[转载]ASP.NET MVC Razor视图引擎攻略

[转载]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>
 
&nbsp;
 
&nbsp;
 
<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">
 
&nbsp;
</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">
 
&nbsp;
 
&nbsp;
 
</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">
 
&nbsp;
 
      
</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的使用有任何问题,可以在此提出,能力范围内的问题我都可以提供帮助。

  希望大家多多支持。

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

登录

注册