在 ASP.NET MVC 中使用 AJAX 根据搜索结果刷新表答案

【问题标题】：Refresh table based on search result using AJAX in ASP.NET MVC在 ASP.NET MVC 中使用 AJAX 根据搜索结果刷新表
【发布时间】：2020-06-07 12:20:25
【问题描述】：

我想根据搜索文本框中的关键字使用 ajax 更新 MVC 中的表。我可以使用 ajax 将数据发送到控制器，但无法根据控制器方法的结果更新视图中的表。

附言。尝试搜索并应用建议，但对我没有任何帮助。

Purchase.cshtml

<div class="form-horizontal">
    <div class="form-group">
        <input id="btnSearch" type="text" class="form-control" placeholder="Search" />
    </div>
  </div>

//partial view
if (Model.purchases != null)
{
    @Html.Partial("_PurchaseList", Model);
}
<script>
$(document).ready(function () {
    $('#btnSearch').keyup(function () {
        var searchVal = $('#btnSearch').val();
        //alert(searchVal);
        $.ajax({
            type: "POST",
            cache: false,
            url: "/Home/SearchPurchase/", // the method we are calling
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify({
                "DistributorName": searchVal
            }),
            dataType: "text",
            success: function (result) {
                //alert('Yay! It worked!');
                //location.reload();
            },
            error: function (result) {
                //alert('not worked :' + result.statusText);
            }
        });
    }); //btnsearch keyup finishes

});
</script>

_PurchaseList.cshtml

@model IEnumerable<AEWebSite.Models.PurchaseModel>
<table class="table table-dark table-hover" id="myDataTable" style="border-radius:20px;">
<tr>
    <th>
        @Html.DisplayNameFor(model => model.GSTNumber)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.DistributorName)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.InvoiceDate)
    </th>
</tr>

@foreach (var item in Model)
{
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.GSTNumber)
        </td>
 <td>
            @Html.DisplayFor(modelItem => item. DistributorName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.InvoiceDate)
        </td>
    </tr>
}
</table>

HomeController.cs

public ActionResult SearchPurchase(PurchaseModel data)
{
        if (data != null && !string.IsNullOrEmpty(data.DistributorName))
        {
        var lstPurchase = aEEntities.Purchases.Where(a => a.DistributorName.Contains(data.DistributorName)).ToList();
            List<Models.PurchaseModel> modelObjPurchase = new List<Models.PurchaseModel>();
            foreach (var item in lstPurchase)
            {
                modelObjPurchase.Add(new Models.PurchaseModel { Id = item.Id, GSTNumber = item.GSTNumber, DistributorName = item.DistributorName, InvoiceDate = item.InvoiceDate, InvoiceNumber = item.InvoiceNumber, Total = item.Total });
            }
            return PartialView("_PurchaseList", modelObjPurchase);
        }        
}

【问题讨论】：

标签： jquery asp.net ajax asp.net-mvc

【解决方案1】：

您正在发出 ajax 请求，SearchPurchase 方法只返回一个 PartialView。当您调用该 partialView 时，它不会在您的视图中找到并更新当前的 partialView。因此，您需要在 ajax 请求后查找并更新您的 partialView。

我还没有测试过，但我认为这段代码对你有用：

用 div 包围你的局部视图（以便能够用 JS 找到它并替换它的内容）

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

你的 ajax 调用的成功部分：

    success: function (result) {
        //alert('Yay! It worked!');
        //location.reload();
        $("#searchResult").replaceWith( result );
    }

【讨论】：