Question

This is very wired problem to salve as to explain. Before I go to try to fix CSS I wan’t to be sure that I am doing right what I am doing here.
I have one index page that contain few smaller views. Each smaller view has it’s own model classes. I render smaller views like this:

<div id="left" style="width: 205px; float: left; ">
        @{Html.RenderAction("Index", "Controller3");}
    </div>
    <div id="center" style="width: 540px; float: left;">
        @{Html.RenderAction("Index", "Controller2");}
    </div>
    <div id="right" style="width: 205px; float: left;">
        @{Html.RenderAction("Index", "Controller3");}
    </div>
...

Index view contains:

@{
    Layout = null;
}
<div>
  ....

And view renders fine. But if I remove from smaller index view “Layout = null;” then my view big break somehow. All elements loose it’s positions. Now:
– Is this “Layout = null;” line very important for something here?
– When one view contain smaller view like this should I return from Action methods View() or PartialView()?
– Is there any other approach to make big view from few smaller or this is the good way as I doing it?

Answer 1

If you don’t add Layout = null to the child view, each child view will render your entire _Layout.cshtml around it.

Returning Partial(...) from the child action will also suppress the layout.