Home/ Questions/Q 8283849
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T10:53:26+00:00

This question is close to: jQuery Mobile layout in ASP.NET MVC app but I’m

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0