2012-07-25 9 views
8

Esta pregunta está cerca de: jQuery Mobile layout in ASP.NET MVC app pero estoy tratando de encontrar las mejores prácticas ya que creo que volver a escribir encabezado y pie de página en cada vista no es eficiente. Debe haber una mejor manera.Mejores prácticas para aplicar el diseño ASP.NET MVC a las páginas de Jquery.Mobile

Por lo tanto, estoy buscando la mejor manera de hacer que ASP.NET MVC compartan vistas de diseño (también conocidas como páginas maestras) para trabajar con mis vistas/vistas parciales.

De la lectura de todo hay dos maneras de hacer las páginas móviles de JQuery MVC diseños:

1) Estándar formato de diseño:

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Page Title</title> 
     ... 
</head> 
<body> 
<div data-role="page"> 
    <div data-role="header">...</div> 
    <div data-role="content">@RenderBody()</div> 
    <div data-role="footer">...</div> 
</div> 
</body> 
</html> 

Como estoy aprendiendo empecé a correr en problemas y más tarde aprendidas que realmente no puedes cargar otras "páginas" dentro de ese pago principal. Todas las Vistas heredadas tienen que ser parte de esa página móvil maestra de Jquery. Malo. 2)

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Page Title</title> 
     ... 
</head> 
<body> 
<div data-role="page">  
    @RenderBody() 
</div> 
</body> 
</html> 

Esto funcionará, pero también significa que tengo encabezados que volver a escribir y pies de página en cada vista.

¿Pueden compartir su opinión? ¿Cuál es el mejor enfoque que debo tomar para poder cargar varias "páginas" de Jquery Mobile en mi diseño sin tener que repetir el encabezado/pie de página en todas partes? ... Quiero decir, ¿y si uno tiene que cambiar en algún momento?

Gracias de antemano.

Respuesta

2

Una cosa que he hecho en situaciones similares es hacer un diseño maestro sin "página" div:

<!DOCTYPE html> 
<html> 
    <head>...</head> 
    <body> 
     @RenderBody() 
    </body> 
</html> 

y luego hacer las páginas de diseño que heredan de la disposición principal, donde se puede incluir la encabezado/pie

@{ 
    Layout = "~/Views/Shared/_LayoutMobileMaster.cshtml"; 
} 
<div data-role="page" data-theme="b" position="fixed"> 
    <div data-role="header" data-position="fixed" data-theme="b" id="contentHeader"> 
     <a id="backBtn" data-direction="reverse" data-icon="back" class="ui-btn-left">Back</a> 
     <h1>@ViewBag.Title</h1> 
     <a id="logoutBtn" data-icon="gear" class="ui-btn-right">Logout</a> 
    </div> 
    <div data-role="content" data-theme="b"> 
     @RenderBody() 
    </div> 
</div> 

Por supuesto, si cada una de sus páginas tiene un encabezado diferente/pie de página, entonces esto no es muy práctico; Es mejor que elimine los diseños intermedios y coloque el encabezado/pie de página directamente en cada una de sus vistas. Pero si tiene diferentes conjuntos de páginas múltiples donde cada conjunto debe tener un aspecto particular, entonces creo que esto puede ser muy útil.

+0

No me gusta el diseño de Master. No tiene ningún contenido de JQuery Mobile (como la indicación de página). El segundo diseño que publicaste es el que usarás para tus páginas de todos modos. ¿Cómo sería esto diferente de tener un escenario de página de contenido estándar? Me parece que también puedo crear varias "páginas de diseño" con vistas/encabezados y usarlas para heredar de mis Vistas. No hay razón para tener ese "diseño maestro" ... ¿O me estoy perdiendo algo? – Shenaniganz

+1

Básicamente, es solo por comodidad, ya que puedo incluir todas mis secuencias de comandos/hojas de estilo que todo el sitio necesitará, por lo que no tengo que incluirlas en todas las páginas. Ya sea que coloque el separador de página allí o en cada subdisposición no debe hacer la diferencia, realmente. – Alejo

+0

No estoy seguro de si podría haber un mejor enfoque, pero este es el camino que terminé tomando. Gracias – Shenaniganz

Cuestiones relacionadas