[转载]ASP.NET MVC Razor视图引擎攻略 – 菊花台泡茶 – 博客园.
一,创建基于Razor的Web程序
首先你的开发环境必须安装.NET Framework4.0,然后在VS中新建项目时选择ASP.NET MVC 3 应用程序,在选项页面中选择视图引擎为Razor,如图1:
图1
然后创建项目,就会得到一个基于Razor的Web项目了,如图2。
图2
相信熟悉MVC的看官们对此结构并不陌生。注意红框部份,Razor的页面是以cshtml为后缀的,下面我们来讲下如何使用Razor来进行页面布局。
二,使用Razor来进行页面布局
UI设计师们现在也讲究页面设计的语义化和结构化,把一个页面分成很多个模块,使用语义化的类名或id来标识这些模块。Razor推出了新的布局解决方案来迎合这一潮流。
这里涉及到Razor的一些语法,大家可以不深究“@”后面的内容,讲到页面布局,你只要专注与HTML代码就可以了。语法会在后面补充。
1.指定母版与加载机制
首先我们来看_ViewStart.chhtml页面,它的内容很简单:
@{ Layout = "~/Views/Shared/_Layout.cshtml"; }
这句代码指定了默认的母版的位置: 当前应用程序根目录下<“~”的含义>的Views/Shared/_Layout.cshtml
除非特殊情况,比如视图是Partial视图,或显示的在视图中添加以下代码指示不使用母版:
@{ Layout = null; }
其他情况下,该指定页就是视图的母版页。
然后我们来看看Razor母版页_Layout.cshtml的内容:
< span class = "typ" >View</ span >< span class = "pln" > </ span >< span class = "typ" >Code</ span >< span class = "pln" > </ span >< span class = "lit" >@ViewBag</ span >< span class = "pun" >.</ span >< span class = "typ" >Title</ span >< span class = "pln" > </ span >< span class = "pun" ><</ span >< span class = "pln" >script type</ span >< span class = "pun" >=</ span >< span class = "str" >"text/javascript"</ span >< span class = "pln" > src</ span >< span class = "pun" >=</ span >< span class = "str" >"@Url.Content("</ span >< span class = "pun" >></</ span >< span class = "pln" >script</ span >< span class = "pun" >></ span >< span class = "pln" > </ span >< span class = "pun" ><</ span >< span class = "pln" >div </ span >< span class = "kwd" >class</ span >< span class = "pun" >=</ span >< span class = "str" >"page"</ span >< span class = "pun" >></ span >< span class = "pln" > </ span >< span class = "pun" ><</ span >< span class = "pln" >div id</ span >< span class = "pun" >=</ span >< span class = "str" >"header"</ span >< span class = "pun" >></ span >< span class = "pln" > </ span >< span class = "pun" ><</ span >< span class = "pln" >div id</ span >< span class = "pun" >=</ span >< span class = "str" >"title"</ span >< span class = "pun" >></ span >< span class = "pln" > </ span >< span class = "str" >< h1 ></ span >< span class = "pun" >我的</ span >< span class = "pln" > MVC </ span >< span class = "pun" >应用程序</</ span >< span class = "pln" >h1</ span >< span class = "pun" >></ span >< span class = "pln" > </ span >< span class = "pun" >&</ span >< span class = "pln" >nbsp</ span >< span class = "pun" >;</ span >< span class = "pln" > </ span >< span class = "pun" ><</ span >< span class = "str" >/div> < div id = "logindisplay" >欢迎 < strong >@User.Identity.Name</</ span >< span class = "pln" >strong</ span >< span class = "pun" >>!</</ span >< span class = "pln" >div</ span >< span class = "pun" >></ span >< span class = "pln" > </ span >< span class = "pun" ><</ span >< span class = "pln" >div id</ span >< span class = "pun" >=</ span >< span class = "str" >"menucontainer"</ span >< span class = "pun" >></ span >< span class = "pln" > </ span >< span class = "str" >< ul ></ span >< span class = "pln" > </ span >< span class = "str" >< ul ></ span >< span class = "pln" > </ span >< span class = "str" >< ul ></ span >< span class = "pln" > </ span >< span class = "str" >< li ></ span >< span class = "lit" >@Html</ span >< span class = "pun" >.</ span >< span class = "typ" >ActionLink</ span >< span class = "pun" >(</ span >< span class = "str" >"主页"</ span >< span class = "pun" >,</ span >< span class = "pln" > </ span >< span class = "str" >"Index"</ span >< span class = "pun" >,</ span >< span class = "pln" > </ span >< span class = "str" >"Home"</ span >< span class = "pun" >)</</ span >< span class = "pln" >li</ span >< span class = "pun" >></ span >< span class = "pln" > </ span >< span class = "pun" ><</ span >< span class = "str" >/ul> </</ span >< span class = "pln" >ul</ span >< span class = "pun" >></ span >< span class = "pln" > </ span >< span class = "pun" ><</ span >< span class = "str" >/ul> < ul > < ul > < li >@Html.ActionLink("关于", "About", "Home")</</ span >< span class = "pln" >li</ span >< span class = "pun" >></ span >< span class = "pln" > </ span >< span class = "pun" ><</ span >< span class = "str" >/ul> </</ span >< span class = "pln" >ul</ span >< span class = "pun" >></ span >< span class = "pln" > </ span >< span class = "pun" >&</ span >< span class = "pln" >nbsp</ span >< span class = "pun" >;</ span >< span class = "pln" > </ span >< span class = "pun" ><</ span >< span class = "str" >/div> </</ span >< span class = "pln" >div</ span >< span class = "pun" >></ span >< span class = "pln" > </ span >< span class = "pun" ><</ span >< span class = "pln" >div id</ span >< span class = "pun" >=</ span >< span class = "str" >"main"</ span >< span class = "pun" >></ span >< span class = "lit" >@RenderBody</ span >< span class = "pun" >() <!--一般视图内容的占位符--> </</ span >< span class = "pln" >div</ span >< span class = "pun" >></ span >< span class = "pln" > </ span >< span class = "pun" ><</ span >< span class = "pln" >div id</ span >< span class = "pun" >=</ span >< span class = "str" >"footer"</ span >< span class = "pun" >></</ span >< span class = "pln" >div</ span >< span class = "pun" >></ span >< span class = "pln" > </ span >< span class = "pun" ></</ span >< span class = "pln" >div</ span >< span class = "pun" >></ span >< span class = "pln" > </ span > |
注意@RenderBody()这个方法相当于一个占位符,假如我们的首页视图Index.cshtml是这样,
< span class = "pln" > </ span >< span class = "typ" >View</ span >< span class = "pln" > </ span >< span class = "typ" >Code</ span >< span class = "pln" > </ span >< span class = "pun" >@{</ span >< span class = "pln" > </ span >< span class = "typ" >ViewBag</ span >< span class = "pun" >.</ span >< span class = "typ" >Title</ span >< span class = "pln" > </ span >< span class = "pun" >=</ span >< span class = "pln" > </ span >< span class = "str" >"主页"</ span >< span class = "pun" >;</ span >< span class = "pln" > </ span >< span class = "pun" >}</ span >< span class = "pln" > </ span >< span class = "str" >< h2 ></ span >< span class = "lit" >@ViewBag</ span >< span class = "pun" >.</ span >< span class = "typ" >Message</ span >< span class = "pun" ><</ span >< span class = "str" >/h2> 若要了解有关 ASP.NET MVC 的更多信息,请访问 < a title = "ASP.NET MVC 网站" href="http:/</span>< span class = "pun" >/</ span >< span class = "pln" >asp</ span >< span class = "pun" >.</ span >< span class = "pln" >net</ span >< span class = "pun" >/</ span >< span class = "pln" >mvc</ span >< span class = "str" >">http://asp.net/mvc</ a >。 </ span > |
一般的视图处理,比如当服务器响应一个HomeController.Index()请求的时候,需要返回Index视图,
- 首先会加载母版页_Layout.cshtml的内容,
- 遇到@RenderBody()时,就用首页视图的内容置换到这里,最后处理完成返回静态页面。
2.使用Partial视图 MVC 2.0中,你需要使用<asp:Content></asp:Content>标签来进行页面分割,太多的话自己都忘记了哪个对应的是哪个部份。 在Razor中,可以将需要剥离出来的部份作为一个单独的Partial视图,比如网站的头部(Logo,导航等等..),底部(友情链接,版权声明等等..),或是某个功能模块(登陆框等等..)。 比如上面的母版页,我们可以把它的头部和底部剥离出来,在Share文件夹下右键添加/视图,选择创建为分部视图,如图3: 图3 依照上述步骤创建”_HeaderPartial.cshtml“和”_FooterPartial.cshtml”两个视图:
< span class = "pln" > </ span >< span class = "com" > <!--_HeaderPartial.cshtml--> </ span >< span class = "pln" > </ span >< span class = "tag" >< div </span>< span class = "pln" > </ span >< span class = "atn" >id</ span >< span class = "pun" >=</ span >< span class = "atv" >"header"</ span >< span class = "tag" >></ span >< span class = "pln" > </ span >< span class = "tag" >< div </span>< span class = "pln" > </ span >< span class = "atn" >id</ span >< span class = "pun" >=</ span >< span class = "atv" >"title"</ span >< span class = "tag" >></ span >< span class = "pln" > </ span >< span class = "tag" >< h1 ></ span >< span class = "pln" >我的 MVC 应用程序</ span >< span class = "tag" ></ h1 ></ span >< span class = "pln" > </ span >< span class = "tag" ></ div ></ span >< span class = "pln" > </ span >< span class = "tag" >< div </span>< span class = "pln" > </ span >< span class = "atn" >id</ span >< span class = "pun" >=</ span >< span class = "atv" >"logindisplay"</ span >< span class = "tag" >></ span >< span class = "pln" >欢迎 </ span >< span class = "tag" >< strong ></ span >< span class = "pln" >@User.Identity.Name</ span >< span class = "tag" ></ strong ></ span >< span class = "pln" >!</ span >< span class = "tag" ></ div ></ span >< span class = "pln" > </ span >< span class = "tag" >< div </span>< span class = "pln" > </ span >< span class = "atn" >id</ span >< span class = "pun" >=</ span >< span class = "atv" >"menucontainer"</ span >< span class = "tag" >></ span >< span class = "pln" > </ span >< span class = "tag" >< ul ></ span >< span class = "pln" > </ span >< span class = "tag" >< ul ></ span >< span class = "pln" > </ span >< span class = "tag" >< ul ></ span >< span class = "pln" > </ span >< span class = "tag" >< li ></ span >< span class = "pln" >@Html.ActionLink("主页", "Index", "Home")</ span >< span class = "tag" ></ li ></ span >< span class = "pln" > </ span >< span class = "tag" ></ ul ></ span >< span class = "pln" > </ span >< span class = "tag" ></ ul ></ span >< span class = "pln" > </ span >< span class = "tag" ></ ul ></ span >< span class = "pln" > </ span >< span class = "tag" >< ul ></ span >< span class = "pln" > </ span >< span class = "tag" >< ul ></ span >< span class = "pln" > </ span >< span class = "tag" >< li ></ span >< span class = "pln" >@Html.ActionLink("关于", "About", "Home")</ span >< span class = "tag" ></ li ></ span >< span class = "pln" > </ span >< span class = "tag" ></ ul ></ span >< span class = "pln" > </ span >< span class = "tag" ></ ul ></ span >< span class = "pln" > </ span >< span class = "tag" ></ div ></ span >< span class = "pln" > </ span >< span class = "tag" ></ div ></ span >< span class = "pln" > </ span > |
可以看出,提取Partial视图很简单,就是把需要的内容提取出来,放在新建的Partial视图中。然后,我们还需要干一件事情, 类似于一般视图,Partial视图使用自己特有的占位符来替换原内容。我们这么干之后,原_Layout.cshtml页就变成了这样:
< span class = "pln" > </ span >< span class = "lit" >@ViewBag</ span >< span class = "pun" >.</ span >< span class = "typ" >Title</ span >< span class = "pun" ><</ span >< span class = "pln" >script type</ span >< span class = "pun" >=</ span >< span class = "str" >"text/javascript"</ span >< span class = "pln" > src</ span >< span class = "pun" >=</ span >< span class = "str" >"@Url.Content("</ span >< span class = "pun" >></</ span >< span class = "pln" >script</ span >< span class = "pun" >></ span >< span class = "pln" > </ span >< span class = "pun" ><</ span >< span class = "pln" >div </ span >< span class = "kwd" >class</ span >< span class = "pun" >=</ span >< span class = "str" >"page"</ span >< span class = "pun" >></ span >< span class = "lit" >@Html</ span >< span class = "pun" >.</ span >< span class = "typ" >Partial</ span >< span class = "pun" >(</ span >< span class = "str" >"_HeaderPartial"</ span >< span class = "pun" >) <!--</span><span class="typ">_HeaderPartial</span><span class="pun">视图占位符--> </</ span >< span class = "pln" >div</ span >< span class = "pun" >></ span >< span class = "pln" > </ span >< span class = "pun" ><</ span >< span class = "pln" >div id</ span >< span class = "pun" >=</ span >< span class = "str" >"main"</ span >< span class = "pun" >></ span >< span class = "lit" >@RenderBody</ span >< span class = "pun" >()</</ span >< span class = "pln" >div</ span >< span class = "pun" >></ span >< span class = "pln" > </ span >< span class = "lit" >@Html</ span >< span class = "pun" >.</ span >< span class = "typ" >Partial</ span >< span class = "pun" >(</ span >< span class = "str" >"_FooterPartial"</ span >< span class = "pun" >) <!--</span><span class="typ">_FooterPartial</span><span class="pun">视图占位符--> </ span >< span class = "pln" > </ span > |
这样,页面的布局是不是更清爽简洁了?如同一般视图,返回请求时会先加载母版页然后遇到占位符时加载相应的Partial视图,最后返回处理完成的静态页面。
三,Razor语法简介与应用
1.语法简介
如果我们希望在HTML代码中绑定数据,比如说我们有一个产品的对象Product,需要绑定产品的名称Product.Name,只需要在变量前面加“@”即可,
也可以使用“@(expression)”绑定一个表达式:
<p>@Product.Name</p>
<p>@(Product.Price*0.8)</p>
Razor中使用”@{code}“来标识一段C#代码,代码段可以出现在任何位置,并且支持与HTML混写:
< span class = "pun" >@{</ span >< span class = "pln" > </ span >< span class = "kwd" >var</ span >< span class = "pln" > product</ span >< span class = "pun" >=</ span >< span class = "kwd" >new</ span >< span class = "pln" > product</ span >< span class = "pun" >();</ span >< span class = "pln" > product</ span >< span class = "pun" >.</ span >< span class = "typ" >Name</ span >< span class = "pun" >=</ span >< span class = "str" >"pen"</ span >< span class = "pun" >;</ span >< span class = "pln" > product</ span >< span class = "pun" >.</ span >< span class = "typ" >Price</ span >< span class = "pun" >=</ span >< span class = "lit" >1.00</ span >< span class = "pun" >;</ span >< span class = "pln" > </ span >< span class = "lit" >@product</ span >< span class = "pun" >.</ span >< span class = "typ" >Name</ span >< span class = "pln" > </ span >< span class = "lit" >@product</ span >< span class = "pun" >.</ span >< span class = "typ" >Price</ span >< span class = "pln" > </ span >< span class = "pun" >}</ span > |
使用循环或条件语句时直接加”@”前缀,可以控制页面逻辑:
@foreach(var product in products)
{
@item.Name
}
Razor中注释是”@**@”,即可以注释Html代码,也可以注释C#代码,在代码块中仍可使用C#的注释方式:
复制代码
@{
var product=new product();
product.Name=”pen”;
//product.Price=1.00;
@product.Name
@*
@product.Price
*@
}
2.ASP.NET MVC3.0 Web中的应用
假设我们有一个Product类位于JohnConnor.Data命名空间下,有Name和Price两个属性,HomeController.Index()方法返回一个List对象给Index视图,
打印所有产品名称,并且点击产品名称时,弹出产品价格。
HomeController.Index()方法如下:
<span class = "typ" >View</span><span class = "pln" > </span><span class = "typ" >Code</span><span class = "pln" > </span><span class = "kwd" > using </span><span class = "pln" > </span><span class = "typ" >System</span><span class = "pun" >;</span><span class = "pln" > </span><span class = "kwd" > using </span><span class = "pln" > </span><span class = "typ" >System</span><span class = "pun" >.</span><span class = "typ" >Collections</span><span class = "pun" >.</span><span class = "typ" >Generic</span><span class = "pun" >;</span><span class = "pln" > </span><span class = "kwd" > using </span><span class = "pln" > </span><span class = "typ" >System</span><span class = "pun" >.</span><span class = "typ" >Linq</span><span class = "pun" >;</span><span class = "pln" > </span><span class = "kwd" > using </span><span class = "pln" > </span><span class = "typ" >System</span><span class = "pun" >.</span><span class = "typ" >Web</span><span class = "pun" >;</span><span class = "pln" > </span><span class = "kwd" > using </span><span class = "pln" > </span><span class = "typ" >System</span><span class = "pun" >.</span><span class = "typ" >Web</span><span class = "pun" >.</span><span class = "typ" >Mvc</span><span class = "pun" >;</span><span class = "pln" > </span><span class = "kwd" > using </span><span class = "pln" > </span><span class = "typ" >JohnConnor</span><span class = "pun" >.</span><span class = "typ" >Data</span><span class = "pun" >;</span><span class = "pln" > </span><span class = "kwd" > namespace </span><span class = "pln" > </span><span class = "typ" >JohnConnor</span><span class = "pun" >.</span><span class = "typ" >Web</span><span class = "pun" >.</span><span class = "typ" >Controllers</span><span class = "pln" > </span><span class = "pun" >{</span><span class = "pln" > </span><span class = "kwd" > public </span><span class = "pln" > </span><span class = "kwd" > class </span><span class = "pln" > </span><span class = "typ" >HomeController</span><span class = "pln" > </span><span class = "pun" >:</span><span class = "pln" > </span><span class = "typ" >Controller</span><span class = "pln" > </span><span class = "pun" >{</span><span class = "pln" > </span><span class = "kwd" > public </span><span class = "pln" > </span><span class = "typ" >ActionResult</span><span class = "pln" > </span><span class = "typ" >Index</span><span class = "pun" >()</span><span class = "pln" > </span><span class = "pun" >{</span><span class = "pln" > </span><span class = "kwd" > var </span><span class = "pln" > products </span><span class = "pun" >=</span><span class = "pln" > </span><span class = "kwd" > new </span><span class = "pln" > </span><span class = "typ" >List</span><span class = "pun" >()</span><span class = "pln" > </span><span class = "pun" >{</span><span class = "pln" > </span><span class = "kwd" > new </span><span class = "pln" > </span><span class = "typ" >Product</span><span class = "pun" >{</span><span class = "pln" > </span><span class = "typ" >Name</span><span class = "pun" >=</span><span class = "str" > "钢笔" </span><span class = "pun" >,</span><span class = "pln" > </span><span class = "typ" >Price</span><span class = "pun" >=</span><span class = "lit" >11.55M</span><span class = "pun" >},</span><span class = "pln" > </span><span class = "kwd" > new </span><span class = "pln" > </span><span class = "typ" >Product</span><span class = "pun" >{</span><span class = "pln" > </span><span class = "typ" >Name</span><span class = "pun" >=</span><span class = "str" > "铅笔" </span><span class = "pun" >,</span><span class = "pln" > </span><span class = "typ" >Price</span><span class = "pun" >=</span><span class = "lit" >2.17M</span><span class = "pun" >},</span><span class = "pln" > </span><span class = "kwd" > new </span><span class = "pln" > </span><span class = "typ" >Product</span><span class = "pun" >{</span><span class = "pln" > </span><span class = "typ" >Name</span><span class = "pun" >=</span><span class = "str" > "圆珠笔" </span><span class = "pun" >,</span><span class = "pln" > </span><span class = "typ" >Price</span><span class = "pun" >=</span><span class = "lit" >5.98M</span><span class = "pun" >},</span><span class = "pln" > </span><span class = "pun" >};</span><span class = "pln" > </span><span class = "kwd" > return </span><span class = "pln" > </span><span class = "typ" >View</span><span class = "pun" >(</span><span class = "pln" >products</span><span class = "pun" >);</span><span class = "pln" > </span><span class = "pun" >}</span><span class = "pln" > </span><span class = "pun" >}</span><span class = "pln" > </span><span class = "pun" >}</span> |
我们来改一下Index视图演示一下Razor的简单应用。
< span class = "lit" >@using</ span >< span class = "pln" > </ span >< span class = "typ" >JohnConnor</ span >< span class = "pun" >.</ span >< span class = "typ" >Data</ span >< span class = "pun" >;</ span >< span class = "pln" > </ span >< span class = "lit" >@model</ span >< span class = "pln" > </ span >< span class = "typ" >List</ span >< span class = "pln" > </ span >< span class = "pun" >@{</ span >< span class = "pln" > </ span >< span class = "typ" >ViewBag</ span >< span class = "pun" >.</ span >< span class = "typ" >Title</ span >< span class = "pln" > </ span >< span class = "pun" >=</ span >< span class = "pln" > </ span >< span class = "str" >"主页"</ span >< span class = "pun" >;</ span >< span class = "com" >//母版中ViewBag.Title用于绑定Title标签,这里进行赋值。</ span >< span class = "pln" > </ span >< span class = "pun" >}</ span >< span class = "pln" > </ span >< span class = "str" >< h2 ></ span >< span class = "typ" >Razor</ span >< span class = "pun" ><</ span >< span class = "str" >/h2> @foreach (var product in Model) { /</ span >< span class = "pun" >/遍历所有的产品</ span >< span class = "pln" > </ span >< span class = "pun" ><</ span >< span class = "pln" >input onclick</ span >< span class = "pun" >=</ span >< span class = "str" >"alert(@product.Price)"</ span >< span class = "pln" > type</ span >< span class = "pun" >=</ span >< span class = "str" >"button"</ span >< span class = "pln" > name</ span >< span class = "pun" >=</ span >< span class = "str" >"@product.Name"</ span >< span class = "pln" > value</ span >< span class = "pun" >=</ span >< span class = "str" >"@product.Name"</ span >< span class = "pln" > </ span >< span class = "pun" >/></ span >< span class = "pln" > </ span >< span class = "pun" >}</ span > |
在一般视图中,首先声明视图模型,即Action返回的ViewResult对象的类型<也可以不声明,如果有返回对象建议声明>。
这里的视图模型是一个List<Product>集合,因为Product位于using JohnConnor.Data命名空间,所以先添加了引用。
在母版中ViewBag.Title用于绑定Title标签,在一般视图中就可以进行赋值来绑定页面的Title 。
如果你不想使用母版,就在代码块中添加”Layout = null;”。
最后是就是一些数据绑定,或者是逻辑的处理。
Razor的基本内容大概就讲这些了,当然它还有很丰富的底蕴,需要在实际的运用过程中去学习,一篇短文是无法涵盖所有信息的。
最后提一点,Razor暂时没有设计视图,这是比较悲摧的一点。相信之后会有的。如果对Razor的使用有任何问题,可以在此提出,能力范围内的问题我都可以提供帮助。
希望大家多多支持。