Обновить существующую сетку (PartialView) новыми данными по вызову Ajax - PullRequest
Новая
       25

Обновить существующую сетку (PartialView) новыми данными по вызову Ajax

0 голосов
/ 28 марта 2019

У меня есть PartialView, который отображает Grid с использованием списка класса модели, переданного из контроллера. 

@model IEnumerable<DeliveryDashboard.Models.UpcomingDMR>

@Html.Partial("~/Views/Shared/_DMRGrid.cshtml", Model)

Сетка отлично отрисовывается. Теперь я добавил выпадающий список в верхней части сетки.

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

<script type="text/javascript">

$(function () {
    //Refresh Grid on Date Range Change
    $('#DateRange').change(function () {

        $.ajax({
            url: '@Url.Content("~/DMR/UpcomingDMRByDateRange/")',
            dataType: 'json',
            type: 'POST',
            data: JSON.stringify({ DateRange: $('#DateRange option:selected').val() }),
            contentType: 'application/json',
            success: function (result) {
                // Refresh partialView Here
            }
        });
    });
});

Мой код контроллера возвращает список класса модели, который мне нужно использовать для связывания частичного представления. 

public List<UpcomingDMR> UpcomingDMRByDateRange(string DateRange)
{
    // get data from database and prepare List<UpcomingDMR> 
    return NewDataList;
}

Теперь, как я могу обновить мой частичный вид из Success block моего Ajax Call?

1 Ответ

0 голосов
/ 28 марта 2019

Вы можете сделать это следующим образом в своем методе успеха: 

$(function () {
//Refresh Grid on Date Range Change
$('#DateRange').change(function () {

    $.ajax({
        url: '@Url.Content("~/DMR/UpcomingDMRByDateRange/")',
        dataType: 'json',
        type: 'POST',
        data: JSON.stringify({ DateRange: $('#DateRange option:selected').val() }),
        contentType: 'application/json',
        success: function (result) {
            $("#your_partial_view_id").load('@Url.Action("Foo","Bar")',result)
        }
    });
  });
});
...