在 Ajax 调用中使用新数据刷新现有网格 (PartialView)答案

【问题标题】：Refresh Existing Grid (PartialView) with New Data on Ajax Call在 Ajax 调用中使用新数据刷新现有网格 (PartialView)
【发布时间】：2019-08-18 22:23:40
【问题描述】：

我有一个 PartialView，它使用从控制器传递的模型类列表呈现一个网格。

@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;
}

现在如何从我的 Ajax 调用的 Success block 刷新我的部分视图？

【问题讨论】：

请提供反馈

标签： ajax asp.net-mvc asp.net-mvc-partialview

【解决方案1】：

你可以在你的成功方法中这样做：

$(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)
        }
    });
  });
});

【讨论】：