Ins*_*dBy 8 asp.net-mvc jquery-mobile
这个问题接近于:ASP.NET MVC应用程序中的jQuery Mobile布局,但我正在尝试找到最佳实践,因为我认为在每个视图中重新键入页眉和页脚效率不高.肯定有更好的办法.
所以,我正在寻找使用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>
Run Code Online (Sandbox Code Playgroud)
在我学习的过程中,我开始遇到问题,后来才知道你无法在主要支出中加载其他"页面".所有继承的视图必须是该主Jquery移动页面的一部分.坏.2)
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
...
</head>
<body>
<div data-role="page">
@RenderBody()
</div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
这将有效,但这也意味着我必须在每个视图上重新键入页眉和页脚.
你们可以分享你的意见吗?我能够在我的布局中加载多个Jquery Mobile"页面"而不必在任何地方重复页眉/页脚的最佳方法是什么?......我的意思是如果一个人必须在某个时候改变呢?
先感谢您.
我在类似情况下做过的一件事是制作一个没有“页面”div 的主布局:
<!DOCTYPE html>
<html>
<head>...</head>
<body>
@RenderBody()
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
然后制作从主布局继承的布局页面,您可以在其中包含页眉/页脚
@{
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>
Run Code Online (Sandbox Code Playgroud)
当然,如果每个页面都有不同的页眉/页脚,那么这不太实用;您也可以取消中间布局并将页眉/页脚直接放在每个视图中。但是,如果您有不同的多个页面集,其中每个页面集都需要具有特定的外观,那么我认为这可能非常有用。
归档时间: |
|
查看次数: |
2893 次 |
最近记录: |