jquery 在ASP.NETMVC中使用AJAX基于搜索结果刷新表

h6my8fg2  于 2023-10-17  发布在  jQuery
关注(0)|答案(2)|浏览(154)

我想更新表在MVC中使用基于关键字在搜索文本框中的索引。我能够使用aplogic将数据发送到控制器,但无法根据控制器方法的结果更新视图中的表。
PS.尝试搜索和应用建议,但没有为我工作。

购买.cshtml

  1. <div class="form-horizontal">
  2. <div class="form-group">
  3. <input id="btnSearch" type="text" class="form-control" placeholder="Search" />
  4. </div>
  5. </div>
  6. //partial view
  7. if (Model.purchases != null)
  8. {
  9. @Html.Partial("_PurchaseList", Model);
  10. }
  11. <script>
  12. $(document).ready(function () {
  13. $('#btnSearch').keyup(function () {
  14. var searchVal = $('#btnSearch').val();
  15. //alert(searchVal);
  16. $.ajax({
  17. type: "POST",
  18. cache: false,
  19. url: "/Home/SearchPurchase/", // the method we are calling
  20. contentType: "application/json; charset=utf-8",
  21. data: JSON.stringify({
  22. "DistributorName": searchVal
  23. }),
  24. dataType: "text",
  25. success: function (result) {
  26. //alert('Yay! It worked!');
  27. //location.reload();
  28. },
  29. error: function (result) {
  30. //alert('not worked :' + result.statusText);
  31. }
  32. });
  33. }); //btnsearch keyup finishes
  34. });
  35. </script>

_购买列表.cshtml

  1. @model IEnumerable<AEWebSite.Models.PurchaseModel>
  2. <table class="table table-dark table-hover" id="myDataTable" style="border-radius:20px;">
  3. <tr>
  4. <th>
  5. @Html.DisplayNameFor(model => model.GSTNumber)
  6. </th>
  7. <th>
  8. @Html.DisplayNameFor(model => model.DistributorName)
  9. </th>
  10. <th>
  11. @Html.DisplayNameFor(model => model.InvoiceDate)
  12. </th>
  13. </tr>
  14. @foreach (var item in Model)
  15. {
  16. <tr>
  17. <td>
  18. @Html.DisplayFor(modelItem => item.GSTNumber)
  19. </td>
  20. <td>
  21. @Html.DisplayFor(modelItem => item. DistributorName)
  22. </td>
  23. <td>
  24. @Html.DisplayFor(modelItem => item.InvoiceDate)
  25. </td>
  26. </tr>
  27. }
  28. </table>

HomeController.cs

  1. public ActionResult SearchPurchase(PurchaseModel data)
  2. {
  3. if (data != null && !string.IsNullOrEmpty(data.DistributorName))
  4. {
  5. var lstPurchase = aEEntities.Purchases.Where(a => a.DistributorName.Contains(data.DistributorName)).ToList();
  6. List<Models.PurchaseModel> modelObjPurchase = new List<Models.PurchaseModel>();
  7. foreach (var item in lstPurchase)
  8. {
  9. modelObjPurchase.Add(new Models.PurchaseModel { Id = item.Id, GSTNumber = item.GSTNumber, DistributorName = item.DistributorName, InvoiceDate = item.InvoiceDate, InvoiceNumber = item.InvoiceNumber, Total = item.Total });
  10. }
  11. return PartialView("_PurchaseList", modelObjPurchase);
  12. }
  13. }
mfuanj7w

mfuanj7w1#

你正在发出一个apache请求,SearchPurchase方法只是返回一个PartialView。当你调用partialView时,它不会在你的视图中找到和更新当前的partialView。因此,您需要在收到请求后查找并更新partialView。
我没有测试过,但我认为这段代码将为您工作:
用div包围你的局部视图(以便能够用JS找到它并替换它的内容)

  1. if (Model.purchases != null)
  2. {
  3. <div id="searchResult">
  4. @Html.Partial("_PurchaseList", Model);
  5. </div>
  6. }

和成功的一部分:

  1. success: function (result) {
  2. //alert('Yay! It worked!');
  3. //location.reload();
  4. $("#searchResult").replaceWith( result );
  5. }
展开查看全部
8gsdolmq

8gsdolmq2#

$(“#divId”).html(result);

相关问题