.net MVC3 Layout布局系统

最新推荐文章于 2022-06-29 15:08:58 发布
最新推荐文章于 2022-06-29 15:08:58 发布
阅读量241 收藏
点赞数
分类专栏： .netMVC3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dcrenl/article/details/40343283
版权

I:回忆MVC2当中MasterPage那些事

code:

<!------------Begin-------------->

<!-- Master文件 -->
<%@ Master Language="C#" 

Inherits="System.Web.Mvc.ViewMasterPage" %>

Master head

<asp:ContentPlaceHolder ID="MainContent" runat="server" />
Master1...

<asp:ContentPlaceHolder ID="OtherContent" runat="server" />
Master2...

<asp:ContentPlaceHolder ID="AnyContent" runat="server" />
Master3...

<!-------------End--------------->





<!------------Begin-------------->

<!-- 某个View文件 -->
<%@ Page Language="C#" 

MasterPageFile="~/Views/Shared/Site.Master" 

Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
MainContent...

</asp:Content>



<asp:Content ID="Content2" ContentPlaceHolderID="OtherContent" runat="server">
OtherContent...

</asp:Content>



<asp:Content ID="Content3" ContentPlaceHolderID="AnyContent" runat="server">
AnyContent...

</asp:Content>
<!-------------End--------------->





<!------------Begin-------------->

<!-- 最后传回给客户端的文件 -->
Master head

MainContent...

Master1...

OtherContent...

Master2...

AnyContent...

Master3...

<!-------------End--------------->

我们可以看到在Master中ContentPlaceHolder服务端控件起到了一个占位符的作用.最后输出的,其实是在View当中的Content服务端控件内的内容,接下来开始介绍Layout.

II:ASP.NET MVC3 新的Layout布局系统

在MVC3当中我们可以利用新的Layout布局系统来代替掉原来在MVC2当中使用的MasterPage(当然在MVC3当中,如果你是继续使用ASPX视图引擎的话,那么还是可以用回原来的MasterPage,然后~~~~然后~你会和runat=”server”保持着从.NET1.x到.NET 4.0以来从没有间断过的合作关系,可谓缘分呀!).

我们在VS2010 MVC3项目中创建Item时,从创建向导中可以看到以下新增的几个Item
image 
下面进行逐一介绍:

Layout页:
该家伙其实就相当于原来的Master文件.为站点的统一主题界面和减少大部分冗余的Html,head,body标记曾作出过很大的贡献.可谓是功不可莫啊!MasterPage他的诞生是在.NET2.0版本!在服役到.NET4.0版本后出现了一个新成员[Layout]去向他挑战.MasterPage能否经得起新成员的挑战呢?这个还是得留各位观众做详细对比吧!

Partial页:
相当于原来的UserControl.它可以为你减轻不少需要重复劳动的时间!

View页:
就是View啦.创建它时.一般都是在不需要使用Layout/MasterPage的时候.

View Page with Layout:
等同于原来的View ContentPage.它的功能只是为了实现原来在Layout/MasterPage下所定义的占位符.当然在原来的MasterPage中如果你没有实现原先定义的占位符<asp:ContentPlaceHolder/>,那么在最终合并输出的时候MasterPage占位符<asp:ContentPlaceHolder/>那里就会输出空.

以上这4个新成员都是可以利用新的Razor视图引擎进行工作.如果你还没了解Razor那么可以参考我的另外一编文章

1.Layout页基础:
如果你有使用MasterPage的经验,你将会记得如下的几个东西

A:<%@ Master %>

B:<%@ Page %>

C:<asp:ContentPlaceHolder />

D:<asp:Content />

但是在Layout中,以上的这些东西将会消失.(作者不排除有WebPages和WebForms兼容工作的可能性)

取而代之的新功能是:

A.Layout属性:等同于原来的MasterPageFile属性.

B.@RenderBody()方法:直接渲染整个View到占位符处,而不需要原来所使用的<asp:Content/>.

C.@RenderPage()方法:渲染指定的页面到占位符处.

D.@RenderSection方法:声明一个占位符,和原来的<asp:ContentPlaceHolder/>功能类似.

E.@section标记:对@RenderSection方法声明的占位符进行实现,和原来的<asp:Content/>功能类似.

.1.@RenderBody()方法的使用

首先在~/Views/Shared/下创建一个名为_MyLayout.cshtml的LayoutPage文件,并将默认的内容替换为如下:

<!DOCTYPE html>



<html>

<head>
<title>@ViewBag.Title</title>

</head>

<body>
<div>
开始渲染Body<br />
@RenderBody()

渲染Body结束<br />
</div>

</body>

</html>

然后打开在~/Views/Home/Index.cshtml文件并替换为如下的内容:

@{

ViewBag.Title = "首页";

}



<div>
这里就是渲染Body啦.~~不需要写神马&lt;asp:Content /&gt;,其实因为RenderBody()不在有歧义.

</div>

最后输出截图为:
  image

这个与之前MasterPage的代码量相比之下减少了许多,而更为简洁明了.

最后别忘记把~/Views/_ViewStart.cshtml中的Layout属性改为:

Layout = "~/Views/Shared/_MyLayout.cshtml";喔.

在此,你或许会有疑问了.在_Layout中定义的RenderBody()是Render那个页啊?

答:其实最后Render页的归属就是Render你所访问的那个页,比如你访问/Home/Index.那么Render就是Home控制器下的Index.cshtml这个文件,如果访问的是/Ohter/SomePage时,那么Render的是Ohter控制器下的SomePage这个.cshtml!

在这里可能有的朋友没有接触过MVC.在此补个基础,在默认的路由设置选项下:

public static void RegisterRoutes(RouteCollection routes)

{

routes.IgnoreRoute("{resource}.axd/{*pathInfo}");



routes.MapRoute(

"Default", // Route name
"{controller}/{action}/{id}", // URL with parameters
new { controller = "Home", action = "Index", id = UrlParameter.Optional } // Parameter defaults
);



}

请求地址:http://localhost/Home/Index的工作流程为下图(这里没有考虑Layout):
image

如果这个RenderBody满足不了你的业务需求,请放心,在此介绍另外一个Render方式RenderPage().它可以让你指定要Render的页.

1.2.@RenderPage()方法的使用

在~/Views/Home/文件夹下新建立一个ViewPage1.cshtml文件,将内容改为如下:

<div>
这里是~/Views/Home/ViewPage1.cshtml,老规矩:还是不用写&lt;asp:Content /&gt;
</div>

并在原来的_MyLayout.cshtml文件中增加几行代码变成下面的这个样子:

<!DOCTYPE html>



<html>

<head>
<title>@ViewBag.Title</title>

</head>

<body>
<div>
开始渲染Body<br />
@RenderBody()

渲染Body结束<br />
<br />
开始渲染其他页<br />
@RenderPage("~/Views/Home/ViewPage1.cshtml")

渲染其他页结束<br />


</div>

</body>

</html>

我们来看最终的输出效果:
image

在这里记住:@RenderBody()只能在_Layout.cshtml中使用一次,而@RenderPage()则可以使用多次!

好了在这里如果还有不明白的朋友们.我下面上个图说明Render的工作原理
image

如果想要了解在Layout中如何使用类似于原来MasterPage中的<asp:ContentPlaceHolder/><asp:Content/>功能请继续往下看.

III:在Layout布局系统中实现类似于原来MasterPage功能的实现方式

好,写到这里开始介绍上一章节中没有介绍完的两个东西:@RenderSection方法和@section标记
1.@RenderSection()方法等价于<asp:ContentPlaceHolder/>,用途为在Layout中声明一个占位符.
操作:在原来的_MyLayout.cshtml文件中更改内容为如下:

@{

//some code
}

<!DOCTYPE html>



<html>

<head>
<title>@ViewBag.Title</title>

</head>

<body>
<div>
开始渲染Body<br />
@RenderBody()

渲染Body结束<br />
<br />
开始渲染其他页<br />
@RenderPage("~/Views/Home/ViewPage1.cshtml")

渲染其他页结束<br />
<br />
HOHO,开始学习Section了<br />
开始渲染Section<br />
声明方式1(推荐):SectionA:<br />
@RenderSection("SectionA", false)

-------<br />


声明方式2:SectionB:<br />
@{

if (IsSectionDefined("SectionB"))

{

@RenderSection("SectionB")

}

}

-------<br />
渲染Sction结束<br />
</div>

</body>

</html>

在~/Views/Home/Index.cshtml中更改为如下内容:

@{

ViewBag.Title = "首页";





//
// some code
//
}





@section SectionA{

<div>这里是SectionA:也不需要写神马runat="server"啊,有木有</div>
}





@section SectionB{

<div>这里是SectionB:也不需要写神马&lt;asp:Content /&gt啊,有木有</div>
}



<div>
这里就是渲染Body啦.~~不需要写神马&lt;asp:Content /&gt;,其实因为RenderBody()不在有歧义.

</div>

最后显示的页面效果:
image


image 

问:为什么为什么要推荐方式1呢?

答:因为RenderSection()方法有2个重载.

如果使用第一个只接受一个string类型参数的重载的话.~如果你在具体的View中没有利用@section来定义实现的话,运行会报错.所以需要配合另外一个方法IsSectionDefined()来使用,才能防止报错.

而使用第2个重载就可以利用第二个bool类型的参数指明该Section是否为必须的.所以可以在使用该RenderSection方法的时候直接利用第二个重载,再把bool参数值设为false,即使你在具体的View中没有声明实现@section,运行起来也一如既往地蛋定,不Show黄页.

IV:关于前篇文章中有热心的观众朋友们问到如何在Layout(MasterPage)中读取数据库并初始化页面的问题的解答

在这里只是做个一简单的示范,新建一个类文件,替换如下:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Data;

using System.Data.SqlClient; //在这里就用ADO.NET方式吧.EF我接触不久!


namespace Mvc3Application1

{

public class ReaderSQL_Date
{

private static readonly string _SQL_CONN_STR ="server=.\\mssqlserver,1433;uid=sa;pwd=yourpwd;database=student;";



public static IList<StudentEntity> GetAllStudent()

{

//这里仅仅是做演示,生产环境并不这样写
using (SqlConnection conn = new SqlConnection(_SQL_CONN_STR))

{

SqlCommand cmd = conn.CreateCommand();

cmd.CommandType = CommandType.Text;

cmd.CommandText = "SELECT [Sno],[Sname],[Sage] FROM [dbo].[STUDENT]";



IList<StudentEntity> result = new List<StudentEntity>();

conn.Open();

using (SqlDataReader sdr = cmd.ExecuteReader())

{

while (sdr.Read())

{

result.Add(new StudentEntity
{

S_No = sdr.GetInt32(0),

S_Name = sdr.GetString(1),

S_Age = sdr.GetInt32(2)

});

}

}

//SqlConnection.ClearPool(conn); //可选清理连接池.


return result;

}

}

}



public class StudentEntity
{

public int S_No { get; set; }

public string S_Name { get; set; }

public int S_Age { get; set; }

}

}

_MyLayout.cshtml替换如下:

@{

IList<Mvc3Application1.StudentEntity> studentEntities = Mvc3Application1.ReaderSQL_Date.GetAllStudent();

}

<!DOCTYPE html>



<html>

<head>
<title>@ViewBag.Title</title>

</head>

<body>
<div>


@{

<table>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
@foreach (Mvc3Application1.StudentEntity item in studentEntities)

{

<tr>
<td>@item.S_No</td>
<td>@item.S_Name</td>
<td>@item.S_Age</td>
</tr>
}

</table>
}



开始渲染Body<br />
@RenderBody()

渲染Body结束<br />
<br />
开始渲染其他页<br />
@RenderPage("~/Views/Home/ViewPage1.cshtml")

渲染其他页结束<br />
<br />
HOHO,开始学习Section了<br />
开始渲染Section<br />
声明方式1(推荐):SectionA:<br />
@RenderSection("SectionA", false)

-------<br />


声明方式2:SectionB:<br />
@{

if (IsSectionDefined("SectionB"))

{

@RenderSection("SectionB")

}

}

-------<br />
渲染Sction结束<br />
</div>

</body>

</html>

最终显示:
image

本文到此结束!
在此谢谢各位关注本系列教程和关注博主的朋友们!有大家的[推荐]我会有动力将这个系列一直写下去!

声明: 本文版权归 作者和博客园共有，转载必须保留此段声明。
http://www.cnblogs.com/highend/archive/2011/04/18/asp_net_mvc3_layout.html
dcrenl
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
.NET MVC的Layout布局文件
qq_43434300的博客
05-11 779
实例： （1）视图文件夹新建一个布局页 布局页代码： <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>@ViewBag.Title</title> </head> ...
ASP.Net MVC 布局页、模板页使用方法详细介绍
10-19
综上所述，ASP.NET MVC 中的布局页、模板页和节提供了强大的页面组织和复用机制，帮助开发者构建结构清晰、易于维护的 Web 应用程序。通过理解并熟练运用这些概念，可以显著提升开发效率和代码质量。
ASP.NET MVC3 系列教程 – 新的Layout布局系统
weixin_33728268的博客
04-18 214
I:回忆MVC2当中MasterPage那些事 code: &lt;!------------Begin--------------&gt; &lt;!-- Master文件 --&gt; &lt;%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %&gt; Master head &lt;...
ASP.NET Core MVC 之布局（Layout）
极客神殿
02-21 1669
1.什么是布局 布局通常包含常见的用户界面元素，例如应用头，导航或菜单元素和页脚，如图： 常见的HTML结构（例如脚本和样式表）也经常被应用程序中许多页面使用。所有这些共享元素都可以在布局中定义，然后由应用程序中使用的任何视图引用。布局减少了视图中代码的重复。 按照惯例，ASP.NET 应用程序的默认布局名为 _Layout.cshtml。 vs 项目模板在 Views/Shared 文件夹中包含此布局文件。 这个布局为应用程序中的视图定义了一个顶层模板。布局对应用程序来说不是必需的，应用程序可以定义多个
MVC后台设置Layout
awbz527872757的博客
12-14 428
1、后台设置 public ActionResult Index() { ViewBag.Layout = "~/Views/Shared/_Layout.cshtml"; return View(); } 2、前台 @{ ViewBag.Title = "TPM"; Layout = ViewBag.Layout; }
MVC与layout
lv17774848392的博客
03-07 737
1.布局 对于Razor引擎，使用布局页.cshtml 在Shared文件夹中新建mvc布局页 使用@RenderBody()标识出空白区域 新建Action的View，选择刚才创建的布局页，属性Layout指向了布局页的地址 在页面中写一段代码，运行查看效果 如果不指定Layout则会使用_ViewStart.cshtml指定的模板页面，这是所有页面调用的部分 如果不想使用模板页面
asp.net mvc博客系统
06-02
视图模板可能包括`_Layout.cshtml`（全局布局），`List.cshtml`（显示文章列表），`Details.cshtml`（显示文章详情），以及`Create.cshtml`和`Edit.cshtml`（创建和编辑文章）等。 4. **路由(Route)**：ASP.NET MVC...
ASP.NET MVC 2 开发实战项目
最新发布
12-20
此外，视图还可以利用布局页面（_Layout.cshtml）实现页面的共用头部、底部等元素，提高代码复用。 Controller处理用户的请求，协调模型和视图之间的通信。控制器类继承自`System.Web.Mvc.Controller`基类，并包含...
ASP.NET MVC3模板页的使用（2）
01-21
本文为大家演示下MVC3中怎样使用模板页，在传统的webform设计... 内容页在MVC3中也叫做视图布局页，可以右键选中视图文件夹，通过添加视图来添加内容页，然后选择相应的模板。下面就是我们创建的内容页ViewPageOne.cs
Asp.Net MVC-Layout-实际开发中使用
qq_41617901的博客
08-30 266
1.Layout布局所放的目录 2.Layout布局的代码骨架 <!DOCTYPE html> <html lang="zh"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" cont
ASPMVC- Layout 使用
mystonelxj的博客
07-03 9051
介绍ASPMVC 是微软推出的一种不同于其传统的ASP模式的web框架开发技术。在ASP MVC模式中，采用Layout策略实现了网站主体布局的搭建，采用Layout后，应用系统只需要专心于各种业务页面的开发，通过Layout实现系统布局，完成各种页面的切换。在aspmvc框架下，默认模板中，采用Layout策略时涉及两个关键文件：一个是_Layout.cshtml，这个文件是用于做网站主体的建设...
C# MVC引用_ViewStart.cshtml，新页面如何清空Layout模板
热门推荐
希望能找到你的答案
04-21 14万+
新建MVC的项目时会自动创建_ViewStart.cshtml、_Layout.cshtml页面，这样我们就把公共的部分放到_Layout页面中，每次新建页面时都会自动加载_ViewStart。 _ViewStart.cshtml页面代码： @{ Layout = "~/Views/Shared/_Layout.cshtml"; } 有时候我们自定义错误页面，可能不是html静态
.Net MVC 中_Layout.cshtml页面新布局（转载）
qq_33380252的博客
11-09 4977
作为一个刚刚开始学习Mvc的新人来说，从之前的winform页面到现在MVC的转变，感觉这是华丽丽的转身啊，再没有拖拽控件，转而是一种规范的格式，用Model-View-Controller三者把一个系统的构成完美呈现，你可以选择用其自带的模版来完成系统的开发，很强大，很方便。   但是对于现在越来越需要关注度的时代来说，漂亮的页面必不可少，你当然可以自己用html来完成页面的设计，但是，MVC...
C# MVC创建一个视图摆脱布局的影响
weixin_43942765的博客
06-29 286
C# MVC视图摆脱布局页的影响
MVC4 利用Layout的几种方法的Demo
钢ge的博客
10-20 6108
本文参考自 http://blog.csdn.net/vinglemar/article/details/44944639因为 从网上下了个后台权限源码，想自己加上前台页面。发现了自己的不足，对于layout 的理解缺失。下面详细解释如何使用不同 的布局页。页面不多，直接贴代码行了。HomeController.cs public ActionResult Index()
MVC的System.Web.Mvc.ViewPage小结
weixin_30824277的博客
04-12 380
Inherits="System.Web.Mvc.ViewPage<dynamic>这一句最好是自己手动修改,如果是维护用户数据,用户对象名是User,改成Inherits="System.Web.Mvc.ViewPage<User>这样一来,视图里面调用Model属性的时候就是指向控制器(reutnr View(model))传过来的User对象,Controller代码...
ASP.NET MVC2未能加载类型“System.Web.Mvc.ViewPage的解決方法
weixin_30877755的博客
07-06 205
问题描述： “/”应用程序中的服务器错误。 分析器错误 说明:在分析向此请求提供服务所需资源时出错。请检查下列特定分析错误详细信息并适当地修改源文件。分析器错误消息:未能加载类型“System.Web.Mvc.ViewPage<DataAccess.Bulletin>”。源错误: 行 1: <%@ Page Title="" Language...
ASP.NET MVC音乐商店教程：从零开始
项目由ASP.NET MVC3构建，采用Razor视图引擎处理视图，并使用Entity Framework CodeFirst进行数据库交互。应用程序包含购物、结账和管理功能，如浏览唱片、添加至购物车、用户注册与登录、订单确认以及管理员管理...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值