Обновление Html .RenderPartialAsyn c () с ajax - PullRequest
Новая
       36

Обновление Html .RenderPartialAsyn c () с ajax

0 голосов
/ 07 марта 2020

У меня есть частичное представление в виде, которое я загружаю следующим образом из родительского представления: 

<div id="listOfEntities">
    @{await Html.RenderPartialAsync("_PartialView", Model.GetEntities());}
</div>

Как вы можете видеть, частичное представление использует модель в родительском представлении для извлечения список объектов, которые должны использоваться в частичном представлении.

Частичное представление отображает список, который я хочу регулярно обновлять, когда пользователь взаимодействует с родительским представлением. Например, у меня есть следующий ajax метод post, который в идеале должен обновить мое частичное представление после успешного ServiceResult, то есть: 

$.ajax({
    url: '/Controller/DeleteEntity',
    type: 'POST',
    data: { "SomeObject": object },
    success: function (data) {
    //DO SOMETHING HERE TO UPDATE THE PARTIAL VIEW
    },
    error: function (data) {
    //Error from serviceResult - do not update view
    }
});

Так как я довольно неопытен с Ajax методами, я Понятия не имею, правильно ли я делаю это, поэтому я задаю этот вопрос.

Смогу ли я вообще обновить частичное представление, поскольку оно использует модель родительского представления? Должен ли я создать отдельный контроллер, который возвращает частичное представление, сопровождаемое моделью?

Если я совершенно не в курсе, мне бы очень хотелось узнать, как мне правильно этого добиться.

1 Ответ

0 голосов
/ 07 марта 2020

Да, вы правильный путь. Просто нужно добавить метод, который будет возвращать GetEntities (). 

public ActionResult _PartialView()
{
     return PartialView(Model.GetEntities());
}

И затем поместите функцию загрузки в ajax параметров успеха. 

$.ajax({
    url: '/Controller/DeleteEntity',
    type: 'POST',
    data: { "SomeObject": object },
    success: function (data) {
       $('#listOfEntities').load('/<controller>/_PartialView');
    },
    error: function (data) {
       console.log('something went wrong');
    }
});
...