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 Action，在其中我收到“ 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>
}

在其中可以看到“ Model.Customers”具有更新后的值。

Answer 1

使用ajax（您的$.get()函数时，您正在调用服务器方法，在这种情况下，该方法将返回html，但随后您需要对其进行处理-在您的情况下，请将其添加到成功回调中的DOM。

由于您只对更新视图中的<tbody>以显示过滤后的行感兴趣，因此您的方法应仅返回该视图的部分视图，因此请首先创建一个部分视图，例如_Customers.cshtl < / p>

@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循环表主体中的每一行，并根据搜索字符串显示或隐藏子项。有关简单的示例，请参见Filter table rows based on select value。

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

1 个答案: