Best practices for applying ASP.NET MVC Layout to Jquery.Mobile pages

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.