2012-07-25 1 views
8

Diese Frage ist in der Nähe von: jQuery Mobile layout in ASP.NET MVC app, aber ich versuche, die Best Practices zu finden, wie ich glaube, Kopf und Fuß in jeder Ansicht neu eingeben ist nicht effizient. Es muss einen besseren Weg geben.Best Practices zum Anwenden von ASP.NET MVC-Layout auf Jquery.Mobile Seiten

Also, ich bin auf der Suche nach dem besten Weg, um ASP.NET MVC geteilte Layout-Ansichten (aka Masterseiten) mit meinen Ansichten/Teilansichten zu arbeiten.

Ab etwa zu lesen gibt es zwei Möglichkeiten JQuery Mobile-Seiten von MVC Layouts zu machen:

1) Standard-Layout-Format:

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

Wie lerne ich begann ich in Probleme laufen und später gelernt dass Sie nicht wirklich andere "Seiten" innerhalb dieser Hauptauszahlung laden können. Alle geerbten Ansichten müssen Teil dieser Master-Jquery-Mobilseite sein. Schlecht. 2)

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

Dies funktioniert aber es bedeutet auch, dass ich wieder Typ Kopf- und Fußzeilen auf jeder einzelnen Ansicht.

Können Sie Ihre Meinung teilen? Was ist der beste Ansatz, um mehrere Jquery Mobile-Seiten in mein Layout laden zu können, ohne die Kopf-/Fußzeile überall wiederholen zu müssen? ... Ich meine was, wenn man sich irgendwann ändern muss?

Vielen Dank im Voraus.

Antwort

2

Eine Sache, die ich in ähnlichen Situationen getan habe, ist ein Master-Layout ohne „page“ div zu machen:

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

Und dann Layoutseiten machen, die vom Master-Layout erben, in dem Sie die einschließen Kopfzeile/Fußzeile

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

Natürlich, wenn jede Ihrer Seiten eine andere Kopf-/Fußzeile hat, dann ist dies nicht sehr praktisch; Sie können auch nur die Zwischenlayouts entfernen und die Kopf-/Fußzeile direkt in jede Ihrer Ansichten einfügen. Aber wenn Sie verschiedene Sätze von mehreren Seiten haben, auf denen jedes Set ein bestimmtes Aussehen haben muss, dann kann das sehr nützlich sein.

+0

Ich bekomme nicht den Punkt, dieses Master-Layout zu haben. Es enthält keinen JQuery Mobile-Inhalt (z. B. Seitenanzeige). Das zweite Layout, das Sie gepostet haben, ist das, das Sie sowieso für Ihre Seite (n) verwenden. Was wäre das anderes als nur ein standardmäßiges Layout-Content-Szenario? Es klingt für mich, dass ich genauso gut mehrere "Layout-Seiten" mit Ansichten/Überschriften erstellen und sie für meine Ansichten übernehmen kann. Kein Grund, dieses "Master-Layout" zu haben ... Oder fehlt mir etwas? – Shenaniganz

+1

Im Wesentlichen ist es nur für die Bequemlichkeit, da ich alle meine Skripte/Stylesheets einschließen kann, die die gesamte Website benötigen wird, also muss ich sie nicht auf jeder Seite einschließen. Ob Sie die Seite div dort oder in jedem Unterlayout platzieren, sollte eigentlich keinen Unterschied machen. – Alejo

+0

Ich bin mir nicht sicher, ob es einen besseren Ansatz geben könnte, aber das ist der Weg, den ich eingeschlagen habe. Vielen Dank – Shenaniganz

Verwandte Themen