Question

I am trying to make the following layout:
https://i.stack.imgur.com/wIaWO.png
(I cannot put the image directly because of spam rules.)

I want to use a layout file that loads HeaderView, SidebarContainerView and ContentContainerView.
The controller needs to add a datagrid to the SidebarContainerView. When you click on a row in the dataview a ChartView has to open inside the ContentContainerView.
The problem is adding dynamically a view inside ContentContainerView.
I tried it with HTML.RenderPartialView and with Sections but I don’t get the result I want.

I’m in the beginner stage of learning MVC 4.0 so it might be an easy question however Google doesn’t seem to know the answer.

Thanks in advance

Answer 1

<div id="ContentContainerView">

</div>

In sidebarcontainerview:

You should bind row click event to this function:

function AddChart(chartType) {
    $.getJSON("/MyController/AddChart",
    {
        chartType: chartType
    },
    function (data) {
        $('#ContentContainerView').append(data);
    });
}

data here is partial chart view, which will be appended to contentcontainerview. Note that you should serialize chart view before returning as Json from AddChart action method.