Как обновить sh содержимое представления в ASP. NET Core

Question

Ненавижу спрашивать, что похоже на такой базовый c вопрос. Однако я понятия не имею, как это сделать, и застрял на несколько недель.

У меня есть страница содержимого, которая загружена данными в моем контроллере. В представлении у меня есть несколько вариантов фильтрации данных представления с помощью кнопки «Применить». После щелчка я хочу, чтобы страница перезагружалась с отфильтрованными данными, но без повторного выполнения запроса. Я просто хочу, чтобы он посмотрел на то, что у него уже есть, и скрыл отфильтрованный контент. Причина, по которой я не хочу запрашивать, заключается в том, что это очень долгий вызов и может потребоваться до 5 минут для завершения создания содержимого.

Изменить: он почти работает, но данные формы отправляются на javascript устарело.

<div class="content">
<form id="form" asp-area="" asp-controller="Home">
    <div class="col-md-6">
        <div class="form-group">
            <label asp-for="EpicType" class="label-control"></label>
            <select asp-for="EpicType" class="form-control" asp-items="@QueryModel.EpicTypes"></select>
            <span asp-validation-for="EpicType" class="text-danger"></span>
        </div>
    </div>

    <p></p>
    <div class="form-group" style="align-content: center; text-align: center; padding-bottom: 5px;" ;>
        <button type="submit" id="submitbtn" class="btn btn-sm btn-primary rounded-0" onclick="javascript:filterResults('@QueryData.EpicType')">Apply</button>
    </div>
</form>

Когда я нажимаю кнопку «Отправить», я не получаю новое значение, выбранное пользователем для EpicType, вместо этого я получаю то, что было установлено при загрузке страницы. Как получить данные для сохранения в модели перед передачей их вызову javascript?

function filterResults(epicType) {
    $.ajax({
        type: 'POST',
        url: '/Home/refreshSummary',
        data: { epicType },
        dataType: 'json',
        success: function () {
            window.location.reload();
        },
        error: function (error) {
            alert(error);
        }
    });
}

Answer 1

Когда я нажимаю кнопку «Отправить», я не получаю новое значение, выбранное пользователем для EpicType, вместо этого я получаю то, что было установлено при загрузке страницы.

Это потому, что код явно определяет это значение здесь:

onclick="javascript:filterResults('@QueryData.EpicType')"

Итак, допустим, EpicType это 5, тогда на стороне клиента у вас есть следующее:

onclick="javascript:filterResults('5')"

Нет ничего динамического c об этом. Он жестко запрограммирован в JavaScript, чтобы всегда быть 5.

Вместо того, чтобы передавать туда значение, просто вызовите функцию:

onclick="javascript:filterResults()"

И внутри функции получите текущий value:

let epicType = $('#EpicType').val();

Обратите внимание, что я угадываю на id элемента <select> здесь. Вы захотите изучить свой клиентский код (просмотреть исходный код страницы в браузере), чтобы увидеть, что в итоге означает <select>. Это также может работать:

let epicType = $('select[name="EpicType"]').val();

Дело в том, что в коде JavaScript вам нужно получить текущее выбранное значение из элемента <select>. Код на стороне сервера не имеет возможности узнать, каким будет это значение при рендеринге страницы.