javascript - javascript 中的 asp-mvc get 函数不显示更新的模型值

Question

因此，我试图实现使用搜索框中查询的数据更新 html 表的最佳(最用户友好且性能最高)的方式。

用户可以通过在搜索框中键入内容来搜索某些内容，我想重新加载该 html 表，而无需(可见)回发/重新加载(如果可能)，并让它的行为就像动态刷新数据一样。

我所拥有的以及我目前正在做的事情如下: Razor Html.TextBox(...) 和 Javascript 函数如下所示:

  $(function () {
        $('#txtSearchString').keyup(function () {
                  //Content to send
                  var searchvalue = $(this).val();
                  $.get('@Url.Action("Customers", "Home")', { "SearchValue": searchvalue });
                });
            });

其中“txtSearchString”是 Html.TextBox 的名称/ID。 当我在此文本框中输入内容时，它会转到 HttpGet 操作，在其中我收到“搜索值”，然后查询数据库并返回符合我的要求的结果。 注意此操作与加载的初始操作相同。

我返回我的模型(更新后的数据所在的位置)，在调试时我还可以清楚地看到我的 Controller 中以及迭代结果列表时的 View 中都有更新结果(例如，初始列表包含 100项目，更新的列表包含 20)，但是当加载 View 时，我看到的结果与最初加载的结果相同，它似乎没有在浏览器中上传 View 。

我不知道为什么会这样。我不知道这是否是做我想做的事情的最佳方式，我没有部分 View 的经验，也不知道我是否更好地使用它，但无论我最终使用什么，我想了解什么发生在后面并导致这种行为。

如果您有任何疑问，需要更多说明，请询问我。 亲切的问候!

更新:

这就是我使用模型中的值填充/更新 html 表的方式:

<table class="table table-hover trCursor">
<thead>
    <tr>
        <th scope="col">
            @Html.ActionLink("Id", "Customers", new { sortOrder = ViewBag.DateSortParm })
        </th>
        <th scope="col">
            @Html.ActionLink("Name", "Customers", new { sortOrder = ViewBag.NameSortParm })
        </th>      
        <th>...</th>

    </tr>
</thead>
@foreach (var customer in Model.Customers)
{
    <tr onclick="location.href='@(Url.Action("CustomerDetail", "Customer", new { Id = customer.ID }))'">

        @Html.HiddenFor(c => customer.ID)

        <td scope="row">@customer.ID</td>
        <td>@customer.CustomerName</td>
        <td>...</td>

    </tr>
}

我可以看到“Model.Customers”在迭代时具有更新的值。

Answer 1

当你使用ajax(你的$.get()函数时，你正在调用一个服务器方法，在你的情况下返回html，但是你需要用它做一些事情 - 在你的情况下，将它添加到DOM中`成功回调。

因为您只对更新 <tbody> 感兴趣在您的 View 中显示过滤后的行，您的方法应该仅返回该部分 View ，因此首先创建一个部分 View ，例如 _Customers.cshtl

@model IEnumerable<Customer>
@foreach(var customer in Model)
{
    <tr>
        ... // add <td> elements
    </tr>
}

并删除 @foreach (var customer in Model.Customers){ ... }主视图中的代码并替换为

<tbody id="customers">
    @{ Html.RenderPartial("_Customers", Model.Customers); }
</tbody>

现在创建一个单独的 Controller 方法，例如

public PartialViewResult FetchCustomers(string search)
{
    var customers = ... // your code to get Customers based on the search string
    return PartialView("_Customers", customers);
}

并修改ajax调用以更新success中的表体回调

var customers = $('#customers');
var url = '@Url.Action("Customers", "Home"';
$('#txtSearchString').keyup(function () {
    var searchValue = $(this).val();
    $.get(url, { search : searchvalue }, function(response) {
        customers.html(response);
    });
});

但是，由于您最初在 View 中显示所有客户，因此在这种情况下不需要进行 ajax 调用(对每个 .keyup 事件执行操作会影响性能)，因为数据已经在 DOM 中。相反，您可以只使用 javaScript 循环表体中的每一行，并根据搜索字符串显示或隐藏 roes。一个简单的例子，请引用Filter table rows based on select value .