Функция get asp-mvc в javascript не отображает обновленные значения модели

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.Когда я что-то набираю в этом текстовом поле, он переходит к действию 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>
}

Где я могу видеть, что "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, чтобы зациклить каждую строку в теле таблицы, и показать или скрыть косули на основе строки поиска. Простой пример приведен в Фильтрация строк таблицы по значению выбора .