javascript中的asp-mvc get函数不显示更新的模型值 [英] asp-mvc get function in javascript not displaying updated model values

问题描述

因此，我正在尝试实现用在搜索框中查询的数据更新html表的最佳方式(最方便用户使用和提高性能).

So i am trying to achieve the best (most user friendly and performant) way of having a html table updated with data that is queried for in a searchbox.

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

The user can search for something by typing in a searchbox, i want to reload that html table with no (visible) postbacks/reloads (if possible) and have it behave like it is dynamically refreshing the data.

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

What i have and what i am currently doing is the following: A Razor Html.TextBox(...) and a Javascript function that looks like this:

  $(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"并查询数据库并返回符合我要求的结果. 注意，该操作与加载的初始操作相同.

Where 'txtSearchString' is the name/id of the Html.TextBox. When i type something in this txtbox, it goes to a HttpGet Action where i receive the 'searchvalue' and i query my database and return results matching my requirements. NOTE that this Action is the same action as the initial one that is loaded.

我不返回模型(此更新数据所在的模型)，在调试结果列表时(例如，初始列表包含100)，我还可以在调试时清楚地看到控制器中还有更新结果项目，更新后的列表包含20)，但仍然在加载视图时，我看到的结果与最初加载的结果相同，它似乎没有在浏览器中上传视图.

I than return my model (where this updated data resides), i can also clearly see when debugging that i have update results in my controller as well in my view when iterating over the list of results (ex, initial list contains 100 items, updated list contains 20) but still when the view is loaded, i am seeing the same results as initially loaded, it doesn't seem to upload the view in the browser.

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

I have no idea why this is so. I don't know if this is the best way of doing what i want to, i have no experience in Partial views and don't know if i better use that instead, but still whatever i end up using, i want to understand whats happening behind and resulting in this behavior.

如果您有任何疑问，需要进一步澄清，请问我. 亲切的问候！

If you have any question, need more clarification on anything, please ask me. Kind regards!

更新:

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

This is how i populate/update my html table with the values from my model:

<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"具有更新后的值.

Where i can see that "Model.Customers" has the updated values when iterating over it.

推荐答案

使用ajax(您的$.get()函数时，您正在调用服务器方法，在这种情况下，该方法返回html，但是您需要这样做附带一些东西-在您的情况下，将其添加到成功回调"中的DOM中.

When you use ajax (your $.get() function, you are making a call to a server method which in you case returns html, but you then need to do something with it - in your case, add it to the DOM in the `success callback.

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

Because you are only interested in updating the <tbody> in your view to display the filtered rows, your method should return a partial view of only that, so start by creating a partial, say _Customers.cshtl

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

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

and delete the @foreach (var customer in Model.Customers){ ... } code in the main view and replace with

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

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

Now create a separate controller method, say

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

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

and modify the ajax call to update the table body in the success callback

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循环表主体中的每一行，并根据搜索字符串显示或隐藏子项.对于一个简单的示例，请参考基于选择值过滤表行.

However, since you are initially displaying all Customers in the view, there is no need to make an ajax call in this case (and doing on each .keyup event will affect performance), since the data is already in the DOM. Instead you can just use javaScript to loop each row in the table body, and show or hide roes based on the search string. For a simple example, refer Filter table rows based on select value.

这篇关于javascript中的asp-mvc get函数不显示更新的模型值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！