Question

这个问题接近于：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“页面”而不必在任何地方重复页眉/页脚的最佳方法是什么？ ......我的意思是如果一个人必须在某个时候改变呢？

提前谢谢。

Answer 1

我在类似情况下做的一件事是制作一个没有“page”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>

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

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

1 个答案: