返璞归真 asp.net mvc (9) - asp.net mvc 3.0 新特性之 View(Razor)
返璞归真 asp.net mvc (9) - asp.net mvc 3.0 新特性之 View(Razor)
作者：webabcd
介绍
asp.net mvc 之 asp.net mvc 3.0 新特性之 View(Razor)：
- Razor 的语法
- Razor 与 Model
- Razor 与布局
示例
1、Razor 概述
RazorDemoController.cs
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using MVC30.Models; namespace MVC30.Controllers { public class RazorDemoController : Controller { public ActionResult Summary() { return View(); } } }
Summary.cshtml
@{ ViewBag.Title = "Razor 概述"; } <p> 使用 Razor 之前，要在 Web.Config 中做如下配置 <br /> <textarea rows="20" style="width: 100%"> <configSections> <sectionGroup name="system.web.webPages.razor" type="System.Web.WebPages.Razor.Configuration.RazorWebSectionGroup, System.Web.WebPages.Razor, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"> <section name="host" type="System.Web.WebPages.Razor.Configuration.HostSection, System.Web.WebPages.Razor, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" /> <section name="pages" type="System.Web.WebPages.Razor.Configuration.RazorPagesSection, System.Web.WebPages.Razor, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" /> </sectionGroup> </configSections> <system.web.webPages.razor> <host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" /> <pages pageBaseType="System.Web.Mvc.WebViewPage"> <namespaces> <add namespace="System.Web.Mvc" /> <add namespace="System.Web.Mvc.Ajax" /> <add namespace="System.Web.Mvc.Html" /> <add namespace="System.Web.Routing" /> </namespaces> </pages> </system.web.webPages.razor> </textarea> </p> <p> View 在每次 Render 之前都会先执行 _ViewStart.cshtml 中的代码 </p>
2、Razor 语法简介
RazorDemoController.cs
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using MVC30.Models; namespace MVC30.Controllers { public class RazorDemoController : Controller { public ActionResult Syntax() { return View(); } } }
Syntax.cshtml
@{ ViewBag.Title = "Razor 语法"; } <p> 使用@符号加{}，直接在 html 页面中写 C# <br /> @{ var currentTime = DateTime.Now; } @* 相当于 <% Htmlvar currentTime = DateTime.Now; %> *@ @currentTime.ToString("yyyy-MM-dd") </p> <p> 使用@符号，直接在 html 页面中写 C# 并输出结果 <br /> 当前 URL： @Request.Url @* 相当于 <%= Request.Url %> *@ <br /> 当前 URL： @{ @Request.Url; } </p> <p> 想输出字符@怎么办？，那就@@ <br /> webabcd@@abc.com </p> <p> 在 Razor 中写服务端注释（客户端不可见） @* code *@ </p> <p> Razor 自带的类型转换方法 <br /> 例：AsInt(), IsInt(), AsBool(), IsBool(), AsFloat(), IsFloat(), AsDecimal(), IsDecimal(), AsDateTime(), IsDateTime() <br /> 类似 AsInt() 的方法会有一个重载方法 AsInt(int defaultValue)，用于当转换失败时返回指定的默认值 @{ var tmp = "2/14/1980"; var date = tmp.AsDateTime(); } @date.ToString("yyyy-MM-dd") </p> <p> 输出文本的方法 <br /> @* <text></text> 或者 @: *@ @{ <text>我是文本</text> <br /> @:我是文本 } </p> <p> 获取文件的 URL 绝对路径的方法，一般用于 img 标签，link 标签，a 标签中所引用的文件的完全 url 路径 <br /> <img alt="" src="@Href("~/Content/themes/base/images/ui-icons_888888_256x240.png")" /> </p> <p> Html Helper, Ajax Helper, Url Helper 依然可以使用 <br /> @Html.TextBox("txt", "我是 TextBox") </p>
3、Razor 的与 Model 相关的 Demo
User.cs
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace MVC30.Models { public class User { public int ID { get; set; } public string Name { get; set; } public string Password { get; set; } public string ConfirmPassword { get; set; } public DateTime DateOfBirth { get; set; } public string Comment { get; set; } } }
RazorDemoController.cs
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using MVC30.Models; namespace MVC30.Controllers { public class RazorDemoController : Controller { // 用于演示 View 如何获取数据 public ActionResult Model() { // ViewBag 的本质就是把 ViewData 包装成为 dynamic 类型 ViewBag.Author = "webabcd"; var list = new List<User>() { new User { ID = 1, Name = "webabcd", DateOfBirth = new DateTime(1980, 2, 14), Comment = "<b>mvp</b>" }, new User { ID = 2, Name = "prettygyy", DateOfBirth = new DateTime(1981, 6, 26), Comment = "<b>mvp</b>" } }; return View(list); } } }
_MyLayout_ParitalView.cshtml
@* 通过 @model 指定 Model 的类型，同时 Model 对象就是 Html.Partial() 或 Html.RenderPartial() 时传递过来的对象 *@ @using MVC30.Models; @model User <li>@Model.Name</li>
Model.cshtml
@* 通过 @using 引入命名空间 通过 @model 指定 Model 的类型，同时 Model 对象就是 Action 返回的数据 *@ @using MVC30.Models; @model List<User> @{ ViewBag.Title = "Razor 的与 Model 相关的 Demo"; } <p> <!-- 演示 ViewBag 的用法 --> Author: @ViewBag.Author </p> <div> <ul> <!-- Model 就是 Action 返回的数据 --> @foreach (var user in Model) { if (@user.Name == "webabcd") { <!-- 默认输出的是经过 HTML 编码后的数据，如果需要输出原始数据则使用 Html.Raw() --> <li>@user.Name (@Html.Raw(@user.Comment))</li> } else { <li>@user.Name (@user.Comment)</li> } } </ul> </div> <!-- Html.Partial 与 Html.RenderPartial 的区别： Html.Partial - 直接将 View 的结果作为一个字符串输出 Html.RenderPartial - 将 View 作为一个用户控件嵌入到当前的 HttpContext 中 Html.Action 与 Html.RenderAction 的区别（演示参见 ControllerDemo/ChildActionOnlyDemo.cshtml）： Html.Action - 直接将 Action 的结果作为一个字符串输出 Html.RenderAction - 将 Action 作为一个用户控件嵌入到当前的 HttpContext 中 Html.Partial, Html.RenderPartial 与 Html.Action, Html.RenderAction 的区别： 二者都需要指定 View，前者的 View 不需要 Action，而后者的 View 必须要有 Action --> <div> <ul> @foreach (var user in Model) { @Html.Partial("_MyLayout_ParitalView", user) @* <%= Html.Partial("_MyLayout_ParitalView", user) %> *@ } </ul> </div> <div> <ul> @{ var firstUser = Model.First(); Html.RenderPartial("_MyLayout_ParitalView", firstUser); @* <% Html.RenderPartial("_MyLayout_ParitalView", firstUser); %> *@ } </ul> </div>
4、Razor 的与布局相关的 Demo
RazorDemoController.cs
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using MVC30.Models; namespace MVC30.Controllers { public class RazorDemoController : Controller { public ActionResult LayoutView() { return View(); } } }
_ViewStart.cshtml
@{
// View 在每次 Render 之前都会先执行 _ViewStart.cshtml 中的代码
Layout = "~/Views/Shared/_Layout.cshtml";
}
_Layout.cshtml
<!DOCTYPE html> <html> <head> <title>@ViewBag.Title</title> <!-- Url.Content() - 将指定的相对路径转换为绝对路径 --> <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script> </head> <body> @RenderBody() </body> </html>
_MyLayout_MasterPage.cshtml
<!DOCTYPE html> <html> <head> <title>@ViewBag.Title</title> </head> <body> <div style="background-color: Gray"> <!-- 引用此 Layout 的页上的未指明 Section 的内容会在此 Render --> @RenderBody() </div> @if (IsSectionDefined("mySection")) { // 引用此 Layout 的页后，如果指定名为 mySection 的 Section 的话，其会在此处 Render // 第二个参数的意思是，引用此 Layout 的页是否必须有名为 mySection 的 Section @RenderSection("mySection", false) } else { @:没有 mySection } </body> </html>
_MyLayout_RenderPage.cshtml
<h1> RenderPage <br /> @{ // 获取 RenderPage() 传递过来的参数 if (@PageData["param"] == "abc") { @:param == "abc" } if (@PageData["param2"] == "xyz") { @:param == "xyz" } } </h1>
LayoutView.cshtml
@{ // 指定一个 Layout 页（相当于母版页） Layout = "_MyLayout_MasterPage.cshtml"; ViewBag.Title = "Razor 的与布局相关的 Demo"; } <!-- 在 Layout 中的 RenderBody() 中显示 RenderPage() 的第二个参数的意思：给 _MyLayout_RenderPage.cshtml 传递参数 --> 在 RenderBody() 中显示的内容 @RenderPage("~/Views/RazorDemo/_MyLayout_RenderPage.cshtml", new { param = "abc", param2 = "xyz"}) <!-- 在 Layout 中的 RenderSection("mySection") 中显示 --> @section mySection { <b>My Section</b> }
5、其他
<p> Razor 的 dll 在这里 C:\Program Files\Microsoft ASP.NET\ASP.NET Web Pages\v1.0\Assemblies </p> <p> Razor 中约定：布局 View 或者需要被别的 View 引用的 View 要以“_”开头 </p> <p> asp.net mvc 3.0 的 T4 模板的位置在 D:\Program Files\Microsoft Visual Studio 10.0\Common7\IDE\ItemTemplates\CSharp\Web\MVC 3\CodeTemplates <br /> 如果不想修改默认模板的话，那么就将模板安装到当前项目中，然后只修改当前项目的 T4 模板，方法如下： <br /> Tools -> Library Package Manager -> Package Manager Console，然后输入 install-package mvc3codetemplatescsharp，之后 CodeTemplates 文件夹就会添加到当前项目中 </p> <p> 新增的 HTML Helper，例如：Chart, WebGrid, WebImage, WebMail, Crypto 等，详见 System.Web.Helpers.dll </p>
OK
[源码下载]
