Menu
I've been reading about layouts, sections, views and partial views, but I don't really know how to approach a layout like this example:
Top bar: would be like the bar that Facebook have on top. I would contain the authentication information and general options and menus.
Navigation bar: would contain information about where are you, and where can you go. Also a "search" box.
Body: The actual wanted information.
Side bar: would contain relevant information about what is in the body.
Footer: copyright, licence and things like that.
Body would be a "View", Sidebar would be a "Section", Footer would be static HTML in the "Layout", but... what would be Top bar and Navigation?
Top bar is not related with anything, so I would put it as a "Partial View" in the "Layout", but I cannot do that because it has to be inside the <body> anyway, so when I call @RenderBody(), it should be rendered. Same thing with Navigation, it's somehow related with the body, but I'd like to separate it as an external control that runs on his own and show information depending on the information in the URL.
How should I approach this?
UPDATE, please read: The question is not about CSS and HTML, it's not about how to layout this, but how to use the Razor tools to do it, it's about Razor RenderBody and PartialView.
When I return a result from my controller, I want to return just what is marked in the picture as "body", and "side bar" as a section, I'd like to avoid repeat the top bar code. Is there a way to create a "ChildView", that inherits from "ParentView", and this from "Layout", in a way that when I return "View("ChildView") the screen is built automatically?
201
Right click the Views\HelloWorld folder and click Add, then click MVC 5 View Page with Layout (Razor). In the Specify Name for Item dialog box, enter Index, and then click OK. In the Select a Layout Page dialog, accept the default _Layout. cshtml and click OK.
If your view is a ViewGroup (layout) You can use InflaterService. inflate(id, ViewGroup) and set the ViewGroup, it will set the current child(s) with the content of your xml.
The file MasterLayout. cshtml represents the layout of each page in the application. Right-click on the Shared folder in the Solution Explorer, then go to Add item and click View. Copy the following layout code.
Check out the MVC3 Music Store Tutorial
The last part of that tutorial describes how design the layout to include partial views using the Html.RenderAction() method. Also see the Html.RenderSection() method.
161
There is a great post about Layouts with Razor: ASP.NET MVC 3: Layouts with Razor.
Basically your structure will be:
1) _ViewStart.cshtml (that will point to a layout and other things that all of yours views would share);
2) A .cshtml that would be your layout, ie.: _Layout.cshtml (similar to the Site.Master webpages).
Inside _Layout.cshtml you'll put your HTML layout, like this for example:
<body>
<div id="maincontainer">
<div id="topsection">
<div class="topbar">
<h1>Header</h1>
<div id="logindisplay">
@Html.Partial("_LogOnPartial")
</div>
</div>
<div class="nav">
<ul><li>Home</li></ul>
</div>
</div>
<div id="contentwrapper">
<div id="contentcolumn">
<div class="body">
@RenderBody()
</div>
</div>
</div>
<div id="sidebar">
<b>Side bar</b>
</div>
<div id="footer">Footer</div>
</div>
</body>
See that I put @RenderBody() inside the div "#body", so when my controller return an ActionResult, only this div will be updated with the result.
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
