Render a new partial view on existing partial view

Question

I am trying to do a drill down report. I am using MVC and Devexpress Gridviews. I render my view and the partial view and display my gridview with the result.

Now what I need to accomplished is when I double click on the gridview I need to render a new/different partial view in the place off the existing gridview - The one I double clicked on.

Is this possible?

Here is what I have:

    public ActionResult MainPartial()
    {  
        using (var Context = new DataContext())
        {
            ViewBag.Level = 0;
            return PartialView("MainPartial",SomeData);
        }
    }

    public ActionResult FirstDrilldownPartial(int Param)
    {  
        using (var Context = new DataContext())
        {
            ViewBag.Level = 1;
            return PartialView("FirstDrilldownPartial",SomeNewData(Param));
        }
    }

My Gridview RowDblClick event

function onDoubleClick(s, e) {

    $.ajax({
        type: 'POST',
        url: '/Controler/FirstDrilldownPartial',
        dataType: 'json',
        async: false,
        //cache: false,
        data: {
            Param: 1
        }
    });
}

At the moment everything is working but when I call the function "function onDoubleClick(s, e)" the Main grid stay on the view and the new grid is not rendered.

Can someone please help with suggestions.

Thanks

Answer 1

You can render both partials in different divs and hide or show in your js function a div, for example

<div id="mydiv1">
    @Html.Partial("Partial1")
<div>
<div id="mydiv2">
    @Html.Partial("Partial2")
</div>

and in your onDoubleClick ( I assume that you are using jQuery)

$("#mydiv1").hide();
$("#mydiv2").show();

and to hide (on page load) the second div first just add

$(function () {
     $("#mydiv2").hide();
});

or use

<div id="mydiv2" style="display:none;">

This code is not tested, but it should work.