How to call grid view partial view in javascript on button click

See more:

Javascript

MVC4

C#7.0

Hi,

I have taken panel control in that i am displaying dashboard control.I want to display grid view on another button click and it should hide dashboard control and display gridview view.

For that I have written javascript method to call partial view.

Here the forecast followup is the gridview partial view

Forecast_Followup.cshtml

@{
    ViewBag.Title = "Forecast_Followup";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@Html.Action("GridViewPartial")

GridviewPartial.cshtml

@{
	var grid = Html.DevExpress().GridView(settings => {
        settings.Name = "GridView";
        settings.CallbackRouteValues = new { Controller = "Forecast", Action = "GridViewPartial" };
		settings.SettingsEditing.AddNewRowRouteValues = new { Controller = "Forecast", Action = "GridViewPartialAddNew" };
        settings.SettingsEditing.UpdateRowRouteValues = new { Controller = "Forecast", Action = "GridViewPartialUpdate" };
        settings.SettingsEditing.DeleteRowRouteValues = new { Controller = "Forecast", Action = "GridViewPartialDelete" };
        settings.SettingsEditing.Mode = GridViewEditingMode.EditFormAndDisplayRow;
        settings.SettingsBehavior.ConfirmDelete = true;
		settings.CommandColumn.Visible = true;
        settings.CommandColumn.ShowNewButton = true;
        settings.CommandColumn.ShowDeleteButton = true;
        settings.CommandColumn.ShowEditButton = true;
		settings.KeyFieldName = "txt_MP";
		settings.SettingsPager.Visible = true;
		settings.Settings.ShowGroupPanel = true;
		settings.Settings.ShowFilterRow = true;
		settings.SettingsBehavior.AllowSelectByRowClick = true;
		settings.SettingsAdaptivity.AdaptivityMode = GridViewAdaptivityMode.Off;
		settings.SettingsAdaptivity.AdaptiveColumnPosition = GridViewAdaptiveColumnPosition.Right;
		settings.SettingsAdaptivity.AdaptiveDetailColumnCount = 1;
		settings.SettingsAdaptivity.AllowOnlyOneAdaptiveDetailExpanded = false;
		settings.SettingsAdaptivity.HideDataCellsAtWindowInnerWidth = 0;
				settings.Columns.Add("txt_MP");
				settings.Columns.Add("txt_MPTitle");
				settings.Columns.Add("txt_POE");
				settings.Columns.Add("txt_Delta");
				settings.Columns.Add("txt_MP_Origin");
				settings.Columns.Add("txt_Comments");
				settings.Columns.Add("txt_Req_IPT");
				settings.Columns.Add("txt_Req_Group");
				settings.Columns.Add("txt_Req_Section");
				settings.Columns.Add("txt_Resp_Group");
				settings.Columns.Add("txt_Resp_Section");
				settings.Columns.Add("int_Total_ToBeCreated_Forecast");
				settings.Columns.Add("int_TRS_Forecast");
				settings.Columns.Add("int_Current_Forecast");
				settings.Columns.Add("int_Created_Forecast");
				settings.Columns.Add("txt_MPValidity");
			});
		if (ViewData["EditError"] != null){
        grid.SetEditErrorText((string)ViewData["EditError"]);
    }
}
@grid.Bind(Model).GetHtml()

What I have tried:

My Javascript.js

function OnTreeViewNodeClick(s, e) {
    if (e.node.text == "Forecast") {
        Dashboard.SetVisible(false);
        restorefilter.ClientVisible = true;
        restorefilter.SetVisible(true);
        //$("restorefilter").addClass('GridPosition');
        restorefilter.GetMainElement().style = 'GridPosition';
        var url = '@Url.Action("Forecast_Followup", "TreeView")';
        $.ajax({
            type: "POST",
            url: url,
            data: $('#' + formId).serialize(),
            cache: false,
            dataType: 'html',
            success: function (result) {
                if (result == '200') {
                    alert('successfuly inserted');
                }
                else {
                    alert('some error occured');
                }
            }
        });
    }
    else {
        Dashboard.SetVisible(true);
        Dashboard.LoadDashboard(e.node.text);
        restorefilter.ClientVisible = false;
        restorefilter.SetVisible(false);
    }
}

My View

@Html.DevExpress().Panel(settings =>
{
    settings.Name = "PanelDash";
    settings.FixedPosition = PanelFixedPosition.None;
    settings.Styles.Panel.BackColor = ColorTranslator.FromHtml("DarkSeaGreen");
    settings.ControlStyle.CssClass = "PanelPosition";
    settings.SetContent(() =>
    {
        @Html.DevExpress().Dashboard(settingsb =>
{
    settingsb.Name = "Dashboard";
    settingsb.WorkingMode = DevExpress.DashboardWeb.WorkingMode.Viewer;
    settingsb.Width = Unit.Percentage(100);
    settingsb.Height = Unit.Percentage(100);
    settingsb.ControlStyle.CssClass = "Dashboard";
    settingsb.AllowExportDashboardItems = true;
    settingsb.IncludeDashboardIdToUrl = true;
    settingsb.IncludeDashboardStateToUrl = true;
    settingsb.ClientSideEvents.CustomizeMenuItems = "onCustomizeMenuItems";
    settingsb.ClientSideEvents.BeforeRender = "onBeforeRender";
    settingsb.ClientSideEvents.ItemClick = "function(s, e) { getUnderlyingData(e); }";
    //settings.ClientSideEvents.Init = "function(s, e) { initPopup(); }";
}).GetHtml();
    });
}).GetHtml()

My Controller.cs

public ActionResult Forecast_Followup()
     {
         return View("Forecast_Followup");
     }
     public ActionResult GridViewPartial()
     {
         return View("GridViewPartial");
     }