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

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

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

购买.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>

_购买列表.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);
        }        
}
mfuanj7w

mfuanj7w1#

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

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

和成功的一部分:

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

8gsdolmq2#

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

相关问题