在幾個月以前寫了一篇關於ASP.NET的MVC的博文，當時的視圖沒有用Razor，有園友說了Razor的好處，時隔多月之后，這回體驗一下用Razor，Razor的一個特征就是@，通篇的@，不過這個@的簡便性比ASPX好，寫上去方便，看上去也整潔。
1.Razor基礎語法
@***
首先最簡單的就是利用@*** 輸出某個非字面值，這個就相當於ASPX<%= %>，例如輸出這個系統的當前時間@DateTime.Now
在頁面上的結果是
如果是一個字段的話，也是可以用這種方式，可是對於一個字面值例如一個字符串”Hello world”，或布爾值true或整數1來說，@”Hello world”是不行的。這時就要用另一種形式。
@(……..)
@(……..)這種形式能輸出字面值，它能對括號里面的內容經行編碼，就算里面的內容是一個字符串”<br/>”，它輸出的只是一個字符串”<br/>”，而不是html中的換行。包括上面的@***也是一樣，如果一個字符串類型的字段s，它的值是”<br/>”，當@s的時候，結果只是一個字符串”<br/>”，而不是換行。看看生成的html就知道了。
對於以下代碼(s是已經定義了)
@("<br/>")
<br/>
<br/>
@s
頁面上的結果
生成的html
顯然，在生成html的時候，把@(“<br/>”)和@s都以字符串的形式(“<br/>”)寫到生成的html，而不是單純的標記形式(<br/>)。這里其實和原本ASPX中的<%= %>輸出的道理是一樣的。
說到這里，其實上面用“輸出”這個詞就不對了，不過給我的感覺就跟在控制台上輸出的效果一樣。
@{…….}
接着就到語句塊，使用語句塊的是以這種形式@{}，例如定義一個變量( @{string s=”Hello World”;} )，或者要循環執行一部分代碼，又或者需要進行一個判斷，就需要這語句塊了。也就在程序語言中的流程控制。
這里就列舉了一個例子，是利用for循環輸出一個三角形
@{ int c = 0;} @for (int i = 0; i < 10; i++) { for (int j = 0; j <= i; j++,c++) { <span style="color:@(c%2==0?"red":"green");margin:5px;"> @(c+" ")</span> } <br /> }
這里用了@{....}和@(....)，效果如下，數字是紅綠顏色交錯的。
還有另一個例子，是if-else 語句的，判斷當前時間，在不同時間段顯示不同的問候語
@if(DateTime.Now.TimeOfDay<new TimeSpan(12,0,0)) { @("上午好！")} else if (DateTime.Now.TimeOfDay < new TimeSpan(18, 0, 0)) { @("下午好！")} else { @("晚上好！")}
結果如下
這里要注意下的是，在程序語言中if或者for下面的語句塊如果只有一條語句的話，花括號{} 可以省略，但是Razor不行，如果是這樣
@if(DateTime.Now.TimeOfDay<new TimeSpan(12,0,0)) @("上午好！")
的話，會報錯的，不過在vs里面的提示也會看得出來。
@using
上面的例子有用到一個System命名空間下的結構DateTime，如果現在想調用.net其他命名空間的類，當然可以用類的完全限定名，但是如果在反復使用的情況下，敲打類前面的命名空間這個工作量不小，Razor也可以跟cs文件里的那樣使用命名空間。
例如
@using System.Threading; @DateTime.Now <br/> @{Thread.Sleep(1000);} @DateTime.Now <br/> @{Thread.Sleep(3000);} @DateTime.Now
結果如下
當然我這里是為了舉例才用這個Thead的類，與cs文件里的不同，Razor的命名空間不一定全都要堆在文件的開頭。
母板頁
在Razor中使用母板頁，也不會有之前ASPX那樣的master文件。與其他文件一樣都是cshtml后綴。在使用方面，在需要放子頁內容的地方調用@RenderBody()則可，這個就代替了原本在ASPX中的<asp:ContentPlaceHolder ID="MainContent" runat="server" />標簽了。在子頁方面，只需要放上這么一行代碼就行了@{Layout = "~/Views/Shared/MyLayout.cshtml";}，這就說明了當前子頁要使用Mylayout這個模板頁，當前的子頁內容會插到母版頁的@RenderBody()中去。
先列舉一下母板頁的代碼
<!DOCTYPE html> <html> <head> <title>@ViewBag.Title</title> <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script> <style type="text/css"> input.btn{ background-color:Orange; color:White; font-weight:bold;} </style> <script type="text/javascript"> $(function () { alert("hello world"); }); </script> </head> <body> <div> <span> This is a simple page </span> <ul> <li> <a href="#">Home</a> </li> <li> <a href="#">Register</a> </li> </ul> @RenderBody() </div> </body> </html>
子頁的代碼
@{ Layout = "~/Views/Shared/MyLayout.cshtml"; ViewBag.Title = "Test"; } id:<input type="text" /> <br /> password:<input type="password" />
效果圖
如果在母板頁中插入子頁的內容不止一個，那就要用另一種形式了
母板頁@RenderSection("標識符")
子頁@section 標識符{
……內容….
}
例子如下
母板頁
<!DOCTYPE html> <html> <head> <title>@ViewBag.Title</title> <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script> <style type="text/css"> input.btn{ background-color:Orange; color:White; font-weight:bold;} </style> <script type="text/javascript"> $(function () { alert("hello world"); }); </script> </head> <body> <div> <span> This is a simple page </span> <ul> <li> <a href="#">Home</a> </li> <li> <a href="#">Register</a> </li> </ul> @RenderSection("login") </div> <div> @RenderSection("footer") </div> </body> </html>
子頁
@{ Layout = "~/Views/Shared/MyLayout.cshtml"; ViewBag.Title = "Test"; } @section login{ id:<input type="text" /> <br /> password:<input type="password" /> } @section footer{ <span>this is a footer</span> }
結果
在不確定子頁是否有實現某部分的內容時，可以調用IsSectionDefined(“標識符”)作一個判斷，如果有則引用子頁的相應內容，如果沒有可以做一些默認的操作
例如
@if (IsSectionDefined("footer")) {@RenderSection("footer")} else { <span>defalut footer</span> }
使用行為方法傳來的模型
利用@Model可以獲取到一個Action中傳來的對應的模型，它是一個只讀的屬性。從這個屬性獲取的實例要從Controller進行傳輸，如果沒有則“Model”將為null。獲取了這個實例之后就可以訪問實例的字段，屬性調用它的方法等。
如這里簡單定義了一個模型
public class TestModel { public int Number1{get;set;} public int Number2 { get; set; } public int Sum { get { return Number1 + Number2; } } public int AddOuter(int num1, int num2) { return num1 + num2; } }
控制器的行為方法如下，就構造了一個模型的實例，給它兩個數字賦了值，最后傳到視圖中去。
public ActionResult TestPage() { TestModel model = new TestModel(); model.Number1 = 1; model.Number2 = 2; return View(model); }
最后在視圖上就可以通過@Model來獲取該實例了。
Model.Sum= @Model.Sum <br /> Now Model.Number1 = 3 Model.Number2 = 2; @{ Model.Number1 = 3; Model.Number2 = 2; } <br /> Model.Sum= @Model.Sum <br /> Model.AddOuter(10, 20) @Model.AddOuter(10, 20)
結果如下
2.Html的表單元素的應用
接下來介紹一下一些Html的表單元素在Razor
Label
Label有兩個方法，一個是Label(“expression”)，另一個是Label(“expression”,”labelText”)，Label標簽有個for屬性，expression參數的值就是for屬性的值，labelText是label的內容，是經過編碼的，不能成為一個真正的層
例如
@Html.Label("Hello world") <br /> @Html.Label("hello world","<div>label text</div>") <label><div>text</div></label>
生成的html如下
TextBox
TextBox有以下幾個重載個方法
TextBox(string name) TextBox(string name, object value) TextBox(string name, object value, IDictionary<string, object> htmlAttributes) TextBox(string name, object value, object htmlAttributes)
由參數的名稱都可以看出用途了
這里列舉一個帶樣式的textbox例子
@Html.TextBox("textBox1","value",new { style = "font-size:15px; color:red;"})
生成的html如下
<input id="textBox1" name="textBox1" style="font-size:15px; color:red;" type="text" value="value"/>
文本框肯定是一個input標簽的最后一個參數是傳遞html屬性的，那么input標簽的屬性有type、name、id這些，我經過嘗試在最后一個參數中傳遞了一下屬性
type="password",value="123456",name="textbox2",id="textbox3"
發現成功的有type、id，文本框變成了一個密碼框了，但是value和name確改不成功。
DropDownList
DropDownList最簡單的一個方法是DropDownList( string name)，可是我使用的時候老是有這個異常
There is no ViewData item of type 'IEnumerable<SelectListItem>' that has the key
發現最簡單能用的就這樣了
@Html.DropDownList("ddl1", new List<SelectListItem>(),)
不過這樣生成DropDownList沒有默認值，如果要有默認值則用下面這種形式
@Html.DropDownList("ddl1", new List<SelectListItem>(), "-- 請選擇 --")
它就生成這樣的html
<select id="ddl1" name="ddl1"> <option value="">-- 請選擇 --</option> </select>
第二個參數是一個泛型的SelectListItem列表，這個List只要能傳進來就可以了。
例如
@Html.DropDownList("ddl1", new List<SelectListItem>() { new SelectListItem() { Text="男", Value="man"}, new SelectListItem(){Text="女", Value="woman"} }, "-- 請選擇 --")
生成的html如下
<select id="ddl1" name="ddl1"> <option value="">-- 請選擇 --</option> <option value="man">男</option> <option value="woman">女</option> </select>
如果要增加一些html屬性的，就這樣子
@Html.DropDownList("ddl1", new List<SelectListItem>() { new SelectListItem() { Text="男", Value="man"}, new SelectListItem(){Text="女", Value="woman"} }, "-- 請選擇 --", new { style = "font-size:14px; color: #00ffee;" })
由於認識尚淺，故有什么說錯說漏的，請各位盡管的批，在下虛心接納，謝謝!