¿Cómo diseñar una página con MVC3 Razor?

He estado leyendo acerca de los diseños, secciones, vistas y vistas parciales, pero no se sabe muy bien cómo abordar un diseño como este ejemplo:¿Cómo diseñar una página con MVC3 Razor?

enter image description here

Barra superior: sería como la barra que Facebook tiene en la parte superior. Contendría la información de autenticación y opciones generales y menús.
Barra de navegación: contendría información sobre dónde está usted, y donde puede ir. También una caja de "búsqueda" .
Cuerpo: La información real deseada.
Barra lateral: contendría información relevante sobre lo que está en el cuerpo .
Pie de página: copyright, licencia y cosas como .

cuerpo sería una "Vista", la barra lateral sería una "sección", pie de página sería HTML estático en el "Diseño", pero ... ¿qué sería Top bar y Navegación?

Barra superior no está relacionada con cualquier cosa, así que lo pondría como "Vista parcial" en el "Diseño", pero no puede hacerlo porque tiene que estar dentro de la <body> de todos modos, así que cuando me llamo @RenderBody(), se debe representar. Lo mismo con Navigation, de alguna manera está relacionado con el cuerpo, pero me gustaría separarlo como un control externo que funciona por sí mismo y muestra información según la información en la URL.

¿Cómo debo abordar esto?

actualización, por favor lea: La pregunta no es acerca de CSS y HTML, no se trata de como se distribuyen, pero el uso de las herramientas de afeitar para hacerlo, se trata de la maquinilla de afeitar RenderBody y PartialView.

Cuando devuelvo un resultado de mi controlador, quiero devolver solo lo que está marcado en la imagen como "cuerpo" y "barra lateral" como una sección, me gustaría evitar repetir el código de barras superior. ¿Hay alguna manera de crear un "ChildView", que hereda de "ParentView", y esto desde "Diseño", de forma que cuando devuelvo "Ver (" ChildView ") la pantalla se construye automáticamente?

Fuente

2011-05-16 vtortola

Verificar el MVC3 Music Store Tutorial

la última parte de este tutorial se describe cómo diseñar la disposición para incluir vistas parciales utilizando el método Html.RenderAction(). véase también el método Html.RenderSection().

Fuente

2011-05-16 14:45:35 rycornell

Ok, ahora lo veo claro gracias a su ejemplo. @RenderBody no es solo para renderizar la etiqueta , sino que representa la vista secundaria principal, por lo que puedo codificar el cuerpo en html, colocar PartialViews donde quiera y representar el área llena de blanco en el ejemplo con RenderBody. – vtortola

Hay un gran post sobre Layouts with Razor: ASP.NET MVC 3: Layouts with Razor.

Básicamente su estructura será:
1) _ViewStart.cshtml (que apuntará a un diseño y otras cosas que compartirían todas sus vistas);
2) A .cshtml que sería su diseño, es decir .: _Layout.cshtml (similar a las páginas web Site.Master).

Dentro _Layout.cshtml que voy a poner a su disposición HTML, así por ejemplo:

<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>

Ver que puse @RenderBody() dentro de la "#body" div, así que cuando mi regreso controlador un ActionResult, solo este div se actualizará con el resultado.

Fuente

2011-05-16 16:52:07

¿Cómo diseñar una página con MVC3 Razor?

Respuesta

Cuestiones relacionadas