ASP.Net MVC 布局页、模板页使用方法详细介绍
一、views文件夹 -> shared文件夹下的 _layout.cshtml 母版页
@renderbody
当创建基于_layout.cshtml布局页面的视图时,视图的内容会和布局页面合并,而新创建视图的内容会通过_layout.cshtml布局页面的@renderbody()方法呈现在标签之间。
@renderpage
从名称可以猜出来这个方法是要呈现一个页面。比如网页中固定的头部可以单独放在一个共享的视图文件中,然后在布局页面中通过这个方法调用,用法如下:
@renderpage(“~/views/shared/_header.cshtml”)
带参数
@renderpage(“~/views/shared/_header.cshtml”,new{parm="my",parm2="you")
调用页面获取参数:
//获取 renderpage() 传递过来的参数
@pagedata["param"]
@rendersection
布局页面还有节(section)的概念,也就是说,如果某个视图模板中定义了一个节,那么可以把它单独呈现出来
为了防止因缺少节而出现异常,可以给rendersection()提供第2个参数:
@rendersection("head", false)
或
@if (issectiondefined("head"))
{
@rendersection("head", false)
}
else
{
<p>submenu section is not defined!</p>
}
代码如下:
<!doctype html> <html> <head> <title>@viewbag.title</title> <link href="@url.content(" rel="external nofollow" ~/content/site.css")" rel="stylesheet" type="text/css" /> <script src="@url.content("~/scripts/jquery-1.4.4.min.js")" type="text/javascript"></script> @rendersection("head", required: true)@*view页面自定义特定js/css使用*@ </head> <body> @renderpage("~/views/shared/_header.cshtml") @renderbody() </body> </html>
二、创建视图,使用母版页
代码如下:
@{ viewbag.title = "index"; layout = "~/views/shared/_layout.cshtml"; } <h2>index</h2> @section head{ <script type="text/javascript"> $(function () { alert("hello jquery"); }); </script> } <p>执行c#普通语法</p><br /> @datetime.now.date.toshortdatestring() <p>执行c#语句段</p> @{ list<string> list = new list<string> { "mvc3", "razor" }; list.add(".net4"); } <ul> @foreach(string s in list) { if (string.isnullorempty(s)) { <li>空</li> } else { <li>@s</li> } } </ul>
三、生成页面的源代码
<!doctype html> <html> <head> <title>index</title> <link href="/content/site.css" rel="external nofollow" rel="stylesheet" type="text/css" /> <script src="/scripts/jquery-1.4.4.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { alert("hello jquery"); }); </script> </head> <body> <h2>index</h2> <p>执行c#普通语法</p><br /> 2013/3/11 <p>执行c#语句段</p> <ul> <li>mvc3</li> <li>razor</li> <li>.net4</li> </ul> </body> </html>
四、@html.partial
partial 每次都会创建自己的 textwriter 实例并且把内容缓存在内存中. 最后把所有 writer输出的内容发送到一个 mvcstring对象中
更多时候我们会使用 @{ html.renderpartial("details"); } 而不是@html.partial
html.renderpartial()与@html.partial的区别
html.renderpartial 直接输出至当前 httpcontext(因为是直接输出,所以性能好)。
html.partial 将视图内容直接生成一个字符串并返回(相当于有个转义的过程)。
renderpage()和renderpartial()的区别
renderpage()调用的页面只能使用其传递过去的数据。
而renderpartial()是可以使用viewdata,model等数据的。
如:@{html.renderpartial("basicchart",model);}
用这个重载可以在部分视图里使用强类型,然后在主视图中使用第二个参数传model过去
@{html.renderpartial("basicchart",viewdata["mydata"]);}
html.renderpartial和html.renderaction的区别
html.renderpartial适合用在重覆使用的usercontrol,并且只需要透过model来呈现内容,或是对于广告的usercontrol也适合使用。
html.renderaction则会先去呼叫controller的action方法,如果此usercontrol是需要透过资料库取得资料来呈现(透过action来读取资料库),此时会比较适合使用此方式。
补充:
1、带有render的方法返回值是void,在方法内部进行输出;不带的返回值类型为mvchtmlstring,所以只能这样使用:
@html.partial 对应 @{html.renderpartial(....);}
@html.action 对应 @{html.renderaction(....);}
2、html.partial可以直接提供用户控件名作为参数,而html.action需要有对应的action,在action内部返回partailresult(即retun partialview())。
3、对于简单的没有任何逻辑的用户控件,推荐使用html.partial;对于需要设置一些model的用户控件,推荐使用html.action。当然,有model数据也是可以使用html.partial方法的,可以看方法的重载。
4、使用html.action有个好处,就是可以根据不同的场景选择不同的用户控件。
比如:
@html.action("userinfocontrol")
在对应的userinfocontrol这个action中,在用户未登录的时候,可以retun partialview("logonusercontrol");登录后,可以retun partialview("userinfocontrol");