當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

尝试Razor

發布時間：2025/3/14 编程问答 25 豆豆

生活随笔收集整理的這篇文章主要介紹了尝试Razor 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

　　在幾個月以前寫了一篇關于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 標識符{

??? ……內容….

}

例子如下

母板頁

子頁

@{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標簽的最后一個參數是傳遞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

第二個參數是一個泛型的SelectListItem列表，這個List只要能傳進來就可以了。

例如

@Html.DropDownList("ddl1", new List<SelectListItem>() {new SelectListItem() { Text="男", Value="man"},new SelectListItem(){Text="女", Value="woman"}},"-- 請選擇 --")

生成的html如下

如果要增加一些html屬性的，就這樣子

@Html.DropDownList("ddl1",new List<SelectListItem>() {new SelectListItem() { Text="男", Value="man"},new SelectListItem(){Text="女", Value="woman"}},"-- 請選擇 --", new { style = "font-size:14px; color: #00ffee;" })

　　由于認識尚淺，故有什么說錯說漏的，請各位盡管的批，在下虛心接納，謝謝!

轉載于:https://www.cnblogs.com/HopeGi/archive/2013/05/22/3092074.html

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的尝试Razor的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

Razor

上一篇： C#：如何去掉groupbox的边框线
下一篇：我心目中理想的开源软件