gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 01:15:29 24 4
gpt4 key购买 nike

因此,我试图实现使用搜索框中查询的数据更新 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”在迭代时具有更新的值。

最佳答案

当你使用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 .

关于javascript - javascript 中的 asp-mvc get 函数不显示更新的模型值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52035129/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com