Menu
This question is close to: jQuery Mobile layout in ASP.NET MVC app but I'm trying to find the best practices as I believe re-typing Header and Footer in every view is not efficient. There must be a better way.
So, I'm looking for the best way to make ASP.NET MVC shared Layout views ( aka master pages ) to work with my Views/Partial views.
From reading around there are two ways to render JQuery mobile pages from MVC Layouts:
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>
As I'm learning I started running into problems and later learned that you can't really load other "Pages" inside of that master payout. All inherited Views have to be part of that master Jquery mobile page. Bad. 2)
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
...
</head>
<body>
<div data-role="page">
@RenderBody()
</div>
</body>
</html>
This will work but it also means that I have to re-type Headers and Footers on every single View.
Can you guys share your opinions? What's the best approach to take for me to be able to load multiple Jquery Mobile "pages" in my Layout yet not having to repeat the Header/Footer everywhere ? ...I mean what if one has to change at some point ?
Thank you in advance.
499
One thing I've done in similar situations is to make a master layout with no "page" div:
<!DOCTYPE html>
<html>
<head>...</head>
<body>
@RenderBody()
</body>
</html>
And then make layout pages which inherit from the master layout, where you can include the header/footer
@{
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>
Of course, if each of your pages has a different header/footer then this isn't very practical; you might as well just do away with the intermediate layouts and put the header/footer directly in each of your views. But if you have different sets of multiple pages where each set needs to have a particular look, then I think this can be very useful.
108
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
