How to layout a page with MVC3 Razor?

2020-05-20 07:41发布

问题:

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?

回答1:

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.



回答2:

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.