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

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 ?

Answer 1

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