Updating gridmvc datasource on dropdown selection change

See more:

C#

MVC5

I have 2 MVCgrids

@model GBDashboard.Models.GBDashboardActivityDetailsForVerticalAndTeamModel
@Html.Grid(Model.PrePlacementActivity).Columns(columns =>
{
columns.Add(c => c.SubActivityName).Titled("SubActivityName").Filterable(true);
columns.Add(c => c.CompletedVolumes).Titled("Completed Volumes").Filterable(true);

}).WithPaging(8).Sortable(true)


And


@Html.Grid(Model.PlacementActivity).Columns(columns =>
{
columns.Add(c => c.SubActivityName).Titled("SubActivityName").Filterable(true);
columns.Add(c => c.CompletedVolumes).Titled("Completed Volumes").Filterable(true);

}).WithPaging(8).Sortable(true)



On dropdownchange event of html dropdown control, I need to update the datasource of the grid. Any ideas?

Ajax call :

function OnMonthsChange() {
    //alert('Test');
    var Month = $('#ddlMonths').val();

    $.ajax({
        type: "POST",
        url: "OnMonthChange", //'../../Controllers/ReportsController/SetSelectedHO',//'../../WebForms/ReportTest.aspx/GetRoomLocation', 
        contentType: "application/json; charset=utf-8",
        dataType: "html",
        data: '{Month: "' + Month + '" }',
        success: function (response) {
            alert('Success!!');
        },
        failure: function (response) {
            alert(response.d);
        }
    });

}

Controller code returning Model:

public ActionResult OnMonthChange(string Month)
{
    try
    {
        // do calculations whatever you need to do
        // instantiate Model object
        Activities GBActivityDetailsForVerticalAndTeam = _service.GetActivityDetailsForVerticalAndTeam();
        return View(GBActivityDetailsForVerticalAndTeam);

    }
    catch (Exception)
    {

        throw;
    }
}

What I have tried:

I tried returning a view on post of ajax call but does not work.