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。 当我在这个 txtbox 中输入内容时，它会转到一个 HttpGet 操作，在该操作中我会收到“搜索值”并查询我的数据库并返回符合我要求的结果。 注意，此操作与加载的初始操作相同。

除了返回我的模型（此更新数据所在的位置）之外，我还可以在调试时清楚地看到，在迭代结果列表时，我的控制器中也有更新结果（例如，初始列表包含 100项目，更新列表包含 20）但仍然在加载视图时，我看到的结果与最初加载的结果相同，它似乎没有在浏览器中上传视图。

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

如果您有任何问题，需要更多澄清，请问我。 亲切的问候！

更新：

这就是我使用模型中的值填充/更新我的 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> 以显示过滤后的行感兴趣，所以您的方法应该只返回部分视图，因此首先创建一个部分视图，例如 _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>

现在创建一个单独的控制器方法，比如说

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);
    });
});

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