PartialView не обновляется с новыми данными

Question

По умолчанию я загружаю все данные в частичном представлении

HTML-код в Index.cshtml

@model GMWUI.ViewModel.MessageDisplayModel

<div id="divTblMsg" class="grid-content">
    @{
        Html.RenderPartial("filterMessages", Model);
    }
</div>

HomeController.cs

public async Task<IActionResult> Index()
    {

        messageDisplayModel.Messages = await ApiClientFactory.Instance.GetMessages();

        return View(messageDisplayModel);
    }

когда пользователь нажимает кнопку фильтра с критериями поиска Я получаю отфильтрованные данные из веб-API в мой домашний контроллер. Метод фильтрации сообщений

вот мой ajax-вызов, когда я нажимаю кнопку фильтра

     $.ajax({
            method: 'post',
            url: "Home/postMessage",
            data: JSON.stringify(model),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                //my table element id is divTblMsg
                $("#divTblMsg").html(data);
            }
        });

HomeController.cs

[HttpGet]
public async Task<IActionResult> filterMessages(GetMessageParams searchCriteria)
        {
            //I though adding below line will clear old data should update partial view with filtered data, but it is not working.
            messageDisplayModel.Messages = Enumerable.Empty<Messages>(); 
            messageDisplayModel.Messages = await ApiClientFactory.Instance.GetMessages(searchCriteria);
         //I am getting filtered data to messageDisplayModel.messages and I am passing it to partial view 
            return PartialView("filterMessages", messageDisplayModel.Messages);
        }

Мне не удалось найти проблему

Answer 1

Попробуйте изменить URL-путь так, чтобы он точно совпадал с именем действия контроллера, а тип метода равен атрибуту, установленному для этого действия:

$.ajax({
    method: 'GET', // or type: 'GET'
    url: '@Url.Action("filterMessages", "Home")',
    data: JSON.stringify({ searchCriteria: model }), // here you should include action parameter name
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {
        $("#divTblMsg").html(data);
    }
});

Если вы хотите использовать метод POST, просто замените [HttpGet] на [HttpPost] и следуйте соглашению URL, как показано выше.

Также обратите внимание, что вы должны убедиться, что переданный model содержит объект (объект, определенный как var model = {};), а затем назначить значения для model свойств.

Answer 2

Я исправил проблему, обновив мой вызов ajax следующим образом.

       $.ajax({
        method: 'GET',
        url: '@Url.Action("filterMessages", "Home")',
        async: true,
        cache: false,
        data: model,
        dataType: 'HTML',
        success: function (data) {
            $("#divTblMsg").html(data);
        }
    });

Я обновил Метод получения , так как я использую атрибут Get для моего результата действия и обновил url и dataType в HTML, потому что ответ, который мы получим, находится в HTML .

Answer 3

Случайно ли потому, что ваш метод AJAX post соответствует Home/postMessage, а не get по filterMessages, который вы пометили фильтром [HttpGet]?