2012-07-25 9 views
8

Questa domanda è vicina a: jQuery Mobile layout in ASP.NET MVC app ma sto cercando di trovare le migliori pratiche in quanto ritengo che la riscrittura dell'intestazione e del piè di pagina in ogni vista non sia efficiente. Ci deve essere un modo migliore.Best practice per l'applicazione di ASP.NET MVC Layout a Jquery.Mobile pagine

Quindi, sto cercando il modo migliore per rendere ASP.NET MVC viste di layout condivisa (dette anche pagine master) per funzionare con le mie viste Viste/Parziali.

Dalla lettura intorno ci sono due modi per rendere le pagine mobili JQuery da MVC Layout:

1) formato di layout standard:

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

Come sto imparando ho iniziato a correre in problemi e poi appreso che in realtà non è possibile caricare altre "Pagine" all'interno di quel pagamento principale. Tutte le viste ereditate devono essere parte di quella pagina mobile di Jquery master. Male. 2)

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

Questo funzionerà ma significa anche che devo digitare intestazioni e piè di ogni singolo View.

Potete condividere le vostre opinioni? Qual è l'approccio migliore da prendere per essere in grado di caricare più "pagine" Jquery Mobile nel mio layout senza dover ripetere l'intestazione/piè di pagina ovunque? ... Voglio dire cosa succede se si deve cambiare ad un certo punto?

Grazie in anticipo.

risposta

2

Una cosa che ho fatto in situazioni simili è quello di fare un layout maestro senza "pagina" div:

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

E poi rendere le pagine di layout che ereditano dal layout maestro, in cui è possibile includere il intestazione/piè di pagina

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

Naturalmente, se ciascuna delle tue pagine ha un diverso intestazione/piè di pagina, allora questo non è molto pratico; potresti anche eliminare i layout intermedi e inserire l'intestazione/il piè di pagina direttamente in ciascuna delle tue visualizzazioni. Ma se hai set diversi di pagine multiple in cui ogni set deve avere un aspetto particolare, allora penso che questo possa essere molto utile.

+0

Non ho proprio il senso di avere questo layout Master. Non ha alcun contenuto JQuery Mobile (come l'indicazione della pagina). Il secondo layout che hai postato è quello che utilizzerai comunque per la tua pagina. Come sarebbe diverso dal semplice scenario di una pagina di layout standard? Mi sembra che possa anche creare più "pagine di layout" con viste/intestazioni e usarle per ereditare da per le mie viste. Nessun motivo per avere quel "Master Layout" ... O mi sto perdendo qualcosa? – Shenaniganz

+1

Essenzialmente, è solo per comodità, in quanto posso includere tutti i miei script/fogli di stile che l'intero sito avrà bisogno, quindi non devo includerli su ogni pagina. Se mettete il div di pagina lì o in ogni sotto-layout non dovreste fare la differenza, davvero. – Alejo

+0

Non sono sicuro che potrebbe esserci un approccio migliore, ma questo è il percorso che ho intrapreso. Grazie – Shenaniganz

Problemi correlati