无废话MVC入门教程四[视图中的Layout使用]

piaodoo 菜鸟问答 2021-02-03 22:41:24 525 0 菜鸟知道

朋友炒股两个月赚了10万，我帮他推广一下公众号，把钱用来投资总比放银行连通货膨胀都跑不过里强，硬核离职，在家炒股　，这是他每天的日志，有些经验是花钱也买不到的。

本文目标

1.能够重用Razor模板进行页面的组件化搭建

本文目录

1.母板页_Layout.cshtml

2.用户自定义控件

3.默认Layout引用的使用(_ViewStart.cshtml)

1.母板页_Layout.cshtml

类似于传统WebForm中的.master文件，起到页面整体框架重用的目地

1.母板页代码预览

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>@ViewBag.Title</title>
 5     <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
 6     <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
 7 </head>
 8 
 9 <body>
10     @RenderBody()
11 </body>
12 </html>

2.子页面标题的设置

虽然多个子页面可以引用同一个母板页，但不同的页面标题可以单独设置。@ViewBag.Title 即是一个标题的占位符，在Control里或页面中给该标题的变量赋值。

 1         //LayoutDemo_01
 2         public ActionResult LayoutDemo_01()
 3         {
 4             ViewBag.Title = "布局页一";
 5             return View();
 6         }
 7 
 8         //LayoutDemo_02
 9         public ActionResult LayoutDemo_02()
10         {
11             ViewBag.Title = "布局页二";
12             return View();
13         }

1 @{
2     ViewBag.Title = "布局页一";
3 }

3.子页面主内容的设置
页面主内容是由@RenderBody()来标识的。子页面的内容直接替换到该方法处。

 1 //第一个页面
 2 @{
 3     Layout = "~/Views/Shared/_Layout.cshtml";
 4 }
 5 这里是layoutg一的内容
 6 
 7 
 8 //第二个页面
 9 @{
10     Layout = "~/Views/Shared/_Layout.cshtml";
11 }
12 这里是layout二的内容

4.子页面其他内容的设置

由于母板面的内容大多数不会是连续的，如下代码所示：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>@ViewBag.Title</title>
 5     <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
 6     <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
 7 </head>
 8 <body>
 9     <br />
10     @* 主要部分*@
11     @RenderBody()
12     <br />
13     <br />
14     @*其他部份内容*@
15     @RenderSection("MasterPart", false)
16 </body>
17 </html>

此时我们使用@RenderSection定义占位符子页面实现，@RenderSection方法接受两个参数：("名称"，"是否是必须的")，如果是必须的那么子页面必须实现该方法，否则会报错。
子页面代码如下：

1 @{
2     Layout = "~/Views/Shared/_Layout.cshtml";
3 }
4 这里是layoutg一的内容
5 @section MasterPart{
6 这里是母板页的第二部分
7 }

@section+空格+名称{内容}来实现母板页内容的替换。
5.其他注意项

母板页的命名可以随意，但建议以"_"下划线开头。

6.整体运行效果

2.用户自定义控件

创建时选中Create as a patial view

创建后在页面中填写如下代码：

使用时代码如下：

1 @{
2     Layout = "~/Views/Shared/_Layout.cshtml";
3 }
4 @Html.Partial("~/Views/Shared/_UserControl.cshtml")
5 这里是layoutg一的内容

运行效果如下：

3.默认Layout引用的使用(_ViewStart.cshtml)

当我们的页面未指定Layout的时候，如果项目在全局或在同文件夹内存在_ViewStart.cshtml时该页面的Layout会自动继承自_ViewStart.cshtml，如果不同的文件夹层级都存在_ViewStart.cshtml，则继承离该页面最近的一个。_ViewStart.cshtml是一个特殊的文件。

1.使用全局_ViewStart.cshtml

_ViewStart.cshtml的文件位置和内容，如下图所示：

我们在User文件夹里建立页面LayoutDemo_03.cshtml，如下图所示：

在LayoutDemo_03.cshtml并没有定义Layout，但实际上他的Layout继承了_ViewStart.cshtml为：

1 @{
2     Layout = "~/Views/Shared/_Layout.cshtml";
3 }

运行效果如下：

2.使用文件夹内的_ViewStart.cshtml

在Shared文件夹内新建文件_LayoutNew.cshtml，如下图所示：

我们在上面加了区别的文字"新的布局"，然后在User文件夹内新建文件_ViewStart.cshtml，如下图所示：

我们把User文件夹内的_ViewStart.cshtml的内容修改为Layout = "~/Views/Shared/_LayoutNew.cshtml";，此时我们再次浏览LayoutDemo_03.cshtml的时候，该页面的布局的引用会继承User文件夹内的_ViewStart.cshtml，运行效果如下：

说明：如果不想页面使用任何母板页和布局页，则需要设置Layout = null，如下所示：

1 @{
2     Layout = null;
3 }

版权：http://www.cnblogs.com/iamlilinfeng

版权声明：

本站所有资源均为站长或网友整理自互联网或站长购买自互联网，站长无法分辨资源版权出自何处，所以不承担任何版权以及其他问题带来的法律责任，如有侵权或者其他问题请联系站长删除！站长QQ754403226 谢谢。

有关影视版权：本站只供百度云网盘资源，版权均属于影片公司所有，请在下载后24小时删除，切勿用于商业用途。本站所有资源信息均从互联网搜索而来，本站不对显示的内容承担责任，如您认为本站页面信息侵犯了您的权益，请附上版权证明邮件告知【754403226@qq.com】，在收到邮件后72小时内删除。本文链接：https://www.piaodoo.com/13219.html