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

因此，我正在尝试实现一种最佳（最用户友好、性能最好）的方式，用在搜索框中查询的数据更新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操作，在该操作中，我会收到“searchvalue”，然后查询我的数据库并返回符合我的要求的结果注意此操作与加载的初始操作相同

我不仅返回我的模型（更新数据所在的位置），在调试时，我还可以清楚地看到，在迭代结果列表（例如，初始列表包含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>
}

@ActionLink（“Id”，“Customers”，new{sortOrder=ViewBag.DateSortParm}）
@ActionLink（“Name”，“Customers”，new{sortOrder=ViewBag.NameSortParm}）
...
@foreach（Model.Customers中的var客户）
{
@HiddenFor（c=>customer.ID）
@客户ID
@客户名称
...
}

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

当您使用ajax（您的

$.get（）

函数）时，您正在调用一个服务器方法，该方法在您的情况下返回html，但是您需要对它做些什么-在您的情况下，将它添加到`成功回调'中的DOM中

因为您只想更新视图中的

以显示过滤后的行，所以您的方法应该只返回该行的部分视图，所以首先创建一个部分视图，例如

\u Customers.cshtl

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

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

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循环表体中的每一行，并根据搜索字符串显示或隐藏ROE。举一个简单的例子，请参阅。

您正在进行ajax调用，但没有对返回的数据执行任何操作。您需要在成功回调中更新DOM，只需稍作修改即可在提供如下数据之后：

$.get（'@Url.Action（“客户”，“主页”），{“SearchValue”：SearchValue}，函数（结果）{//update DOM here}）

。还请注意，如果操作方法仅具有

返回部分视图（…）

，则需要调用另一个方法，该方法仅返回当前视图中要更新内容的部分视图，然后使用

$（'#targetElementId'）.html（结果）

会将以前的DOM元素更新为新元素。请注意，初始页面加载和获取搜索关键字的操作方法应该分开。将

@foreach

包围在

中，然后有一个方法只返回

元素，然后返回

$.get（'@Url.action（…），{“SearchValue”：SearchValue}，function（result）{$（'#xxx'）.html（result）；}）

（然后您还可以将

@foreach

替换为

@html.Partial（“yourportial”，Model.Customers）

），再次感谢您提供了这个详细、解释得很好的解决方案和相关信息，您真是棒极了！）

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