Refresh Existing Grid (PartialView) with New Data on Ajax Call

Question

I have a PartialView which renders a Grid using a List of Model Class passed from the controller.

@model IEnumerable<DeliveryDashboard.Models.UpcomingDMR>

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

The Grid Renders perfectly. Now I have added a Drop down at the top of the Grid.

in the OnChange event of the Drop down, I need to hit the controller and get an Updated list of Same Model Class which should refresh the existing Grid.

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

My controller code returns the List of Model Class which I need to use to bind the Partial View.

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

Now How can I refresh my partial View from the Success block of my Ajax Call ?

Please provide feedback

Batuhan
– Batuhan

2020-02-19 08:33:47 +00:00
Commented Feb 19, 2020 at 8:33 — Batuhan
– Batuhan, Commented Feb 19, 2020 at 8:33

Batuhan · Accepted Answer · 2019-03-28 15:25:39Z

0

You can do it like this in your success method :

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

answered Mar 28, 2019 at 15:25

Batuhan

1,62113 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Refresh Existing Grid (PartialView) with New Data on Ajax Call

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related