将 ASP.NET MVC 布局应用于 Jquery.Mobile 页面的最佳实践答案

【问题标题】：Best practices for applying ASP.NET MVC Layout to Jquery.Mobile pages将 ASP.NET MVC 布局应用于 Jquery.Mobile 页面的最佳实践
【发布时间】：2012-07-26 22:16:48
【问题描述】：

这个问题接近：jQuery Mobile layout in ASP.NET MVC app，但我正在努力寻找最佳实践，因为我认为在每个视图中重新输入页眉和页脚效率不高。一定有更好的办法。

因此，我正在寻找使 ASP.NET MVC 共享布局视图（也称为母版页）与我的视图/部分视图一起使用的最佳方法。

通过阅读，有两种方法可以从 MVC 布局呈现 JQuery 移动页面：

1) 标准布局格式：

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

随着我的学习，我开始遇到问题，后来了解到您无法真正在该主付款中加载其他“页面”。所有继承的视图都必须是该主 Jquery 移动页面的一部分。坏的。 2)

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

这会起作用，但这也意味着我必须在每个视图上重新键入页眉和页脚。

你们能分享一下你们的看法吗？让我能够在我的布局中加载多个 Jquery Mobile“页面”而又不必到处重复页眉/页脚的最佳方法是什么？ ...我的意思是如果一个人必须在某个时候改变怎么办？

提前谢谢你。

【问题讨论】：

标签： asp.net-mvc jquery-mobile

【解决方案1】：

我在类似情况下做过的一件事是制作没有“页面” div 的主布局：

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

然后制作从主布局继承的布局页面，您可以在其中包含页眉/页脚

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

当然，如果您的每个页面都有不同的页眉/页脚，那么这不是很实用；您不妨取消中间布局并将页眉/页脚直接放在每个视图中。但是，如果您有多个页面的不同集合，并且每个集合都需要具有特定的外观，那么我认为这会非常有用。

【讨论】：

我不太明白拥有主布局的意义。它没有任何 JQuery Mobile 内容（例如页面指示）。您发布的第二种布局无论如何都是您将用于页面的布局。这与仅具有标准布局内容页面方案有何不同？在我看来，我也可以创建多个带有视图/标题的“布局页面”，并使用它们来继承我的视图。没有理由拥有那个“主布局”......或者我错过了什么？
本质上，这只是为了方便，因为我可以包含整个网站需要的所有脚本/样式表，因此我不必在每个页面上都包含它们。无论您将页面 div 放在那里还是放在每个子布局中都应该没有区别，真的。
不确定是否有更好的方法，但这是我最终选择的路径。谢谢