2012-07-25 15 views
8

To pytanie jest bliskie: jQuery Mobile layout in ASP.NET MVC app, ale próbuję znaleźć najlepsze praktyki, ponieważ uważam, że ponowne wpisywanie nagłówka i stopki w każdym widoku nie jest wydajne. Musi być lepszy sposób.Najlepsze praktyki stosowania layoutu ASP.NET MVC na stronach Jquery.Mobile

Poszukuję więc najlepszego sposobu, aby ASP.NET MVC udostępnił widoki Layout (inaczej strony wzorcowe) do pracy z moimi widokami/Częściowymi widokami.

Od czytania wokół istnieją dwa sposoby, aby uczynić JQuery mobilnych stron z MVC wyglądów:

1) Standardowy format Układ:

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

Jak uczę Zacząłem biegać w problemy i później dowiedziałem że nie można naprawdę załadować innych "Stron" w ramach tej wypłaty głównej. Wszystkie odziedziczone widoki muszą należeć do tej głównej strony mobilnej Jquery. Bad. 2)

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

Będzie to działać, ale oznacza to również, że muszę ponownie nagłówki typu i stopki na każdej View.

Czy możecie podzielić się swoimi opiniami? Jakie jest najlepsze podejście, aby móc załadować wiele "stron" mobilnych JQuery w moim Układzie, ale nie muszę powtarzać nagłówka/stopki wszędzie? ... Mam na myśli to, co trzeba zmienić w pewnym momencie?

Z góry dziękuję.

Odpowiedz

2

Jedno robiłem w podobnych sytuacjach jest, aby układ główny bez „strony” Gr:

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

a następnie dokonać stron układu, które dziedziczą z nadrzędnego układu, gdzie można dołączyć nagłówek/stopka

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

Oczywiście, jeśli każda twoja strona ma inny nagłówek/stopkę, to nie jest to zbyt praktyczne; równie dobrze można po prostu pozbyć się pośrednich układów i umieścić nagłówek/stopkę bezpośrednio w każdym z widoków. Ale jeśli masz różne zestawy wielu stron, gdzie każdy zestaw musi mieć szczególny wygląd, to myślę, że może to być bardzo przydatne.

+0

Nie bardzo rozumiem, że mam taki układ główny. Nie ma żadnej zawartości JQuery Mobile (takiej jak wskazanie strony). Drugi opublikowany układ jest tym, który będziesz używał dla swoich stron. Czym różni się to od standardowego scenariusza z układem stron? Wydaje mi się, że mogę równie dobrze tworzyć wiele "stron układu" z widokami/nagłówkami i używać ich do dziedziczenia z moich widoków. Nie ma powodu, aby mieć "układ główny" ... Czy może czegoś brakuje? – Shenaniganz

+1

Zasadniczo jest to dla wygody, ponieważ mogę uwzględnić wszystkie moje skrypty/arkusze stylów, które będą potrzebne całej witrynie, więc nie muszę ich umieszczać na każdej stronie. Niezależnie od tego, czy umieścisz stronę div tam, czy w każdym pod-układzie, naprawdę nie powinno to mieć znaczenia. – Alejo

+0

Nie jestem pewien, czy może być lepsze podejście, ale to ścieżka, którą podjąłem. Dzięki – Shenaniganz