ASP.NET MVC 3.0 新特性之View
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
>