Geek Answers Handbook

Recommendations for using ASP.NET MVC Layout on jQuery. Mobile Pages

This question is close to: jQuery Mobile layout in an ASP.NET MVC application , but I am trying to find best practices because I believe that retyping the header and footer in all views is inefficient. There must be a better way.

So, I'm looking for the best way to do general ASP.NET MVC (aka master pages) layout views 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 found out, I started to run into problems, and later found out that you cannot load other “Pages” inside this main payout. All inherited views must be part of this jQuery main page. Poorly. 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-enter headers and footers on each view.

Can you guys share your opinion? What is the best approach for me to be able to load multiple JQuery Mobile pages in my layout, but don’t need to repeat the header everywhere? ... I mean, what if at some point you need to change?

Thanks in advance.

+8
jquery-mobile asp.net-mvc
source share
1 answer

One thing I did in similar situations is to create a master layout without a div “page”:

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

And then create layout pages that inherit from the main layout, where you can include a 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, this is not very practical; you could just do away with the intermediate layouts and place the header / footer directly in each of your views. But if you have different sets of several pages, where each set should have a special look, I think this can be very useful.

+2
source share

More articles:


All Articles