ASP.NET中的Razor語法簡介
Razor 不是一種編程語言。它是服務(wù)器端的標(biāo)記語言?？梢宰屇鷮⒒诜?wù)器的代碼（Visual Basic 和 C#）嵌入到網(wǎng)頁中。
當(dāng)服務(wù)器讀取頁面時，它首先運行 Razor 代碼，然后再發(fā)送 HTML 頁面到瀏覽器。在服務(wù)器上執(zhí)行的代碼能夠執(zhí)行一些在瀏覽器上不能完成的任務(wù)，比如，訪問服務(wù)器數(shù)據(jù)庫。服務(wù)器代碼能創(chuàng)建動態(tài)的 HTML 內(nèi)容，然后發(fā)送到瀏覽器。從瀏覽器上看，服務(wù)器代碼生成的 HTML 與靜態(tài)的 HTML 內(nèi)容沒有什么不同。
一、Razor 語法
1、 Razor C# 語法規(guī)則
- Razor 代碼塊包含在 @{ ... } 中 ，當(dāng)行或多行。
- 內(nèi)聯(lián)表達式（變量和函數(shù)）以 @ 開頭 ：@變量 或 @( 表達式 )
- 代碼語句用分號結(jié)束
- 變量使用 var 關(guān)鍵字聲明
- 字符串用引號括起來
- C# 代碼區(qū)分大小寫
- C# 文件的擴展名是 .cshtml
<!-- Single statement block -->
@{ var myMessage = "Hello World"; }
<!-- Inline expression or variable -->
<p>The value of myMessage is:
@myMessage
</p>
<!-- Multi-statement block -->
@{
var greeting = "Welcome to our site!";
var weekDay = DateTime.Now.DayOfWeek;
var greetingMessage = greeting + " Here in Huston it is: " + weekDay;
}
<p>The greeting is:
@greetingMessage
</p>2、Razor的作用域
大括號里面的就是表示作用域的范圍，用形如 “@[code]”來寫一段代碼塊。在作用域 “@(code)” 中輸出也是用@符號的。
我的年齡：
@{
int age = 25;
string sex = "男";
@age
}性別： @(sex)3、Razor和Html混合編寫
- a.在作用域內(nèi)容如果是以html標(biāo)簽開始則視為文本輸出
- b.如果輸出@，則使用@@
- c.如果需在代碼塊中直接輸出純文字而不帶HTML標(biāo)簽，則可以使用@:標(biāo)簽，如果在 "@:" 后面加上@就表示Razor語句的變量。
@{
var strzm = "abc";
@:this is a mail:2734796332@qq.com.this is var:@strzm,this is mail@strzm,this is @@
//輸出abc
@strzm
}如果需要在代碼塊中輸出續(xù)或不連續(xù)的多行純文本，則使用text標(biāo)簽較為方便。
@if (Model.Price > 5M) {
<text> 名稱：<b>@Model.Name</b><br /> 分類：<b>@Model.Description</b><br /> 價錢：<b>@Model.Price</b><br /> <pre> 測試行一: <a>aaaa</a> 測試行二: @@ fda@aaa </pre> </text>
}4、變量
一個變量的名稱必須以字母字符開頭，并且不能包含空格或者保留字符。變量使用 var 關(guān)鍵字聲明，或通過使用具體類型聲明。
// Using the var keyword: var greeting = "Welcome to RUNOOB.COM"; var counter = 103; // Using data types: string greeting = "Welcome to RUNOOB.COM"; int counter = 103;
5、數(shù)據(jù)類型
- int 整數(shù)（全數(shù)字） 103, 12, 5168
- float 浮點數(shù) 3.14, 3.4e38
- decimal 十進制數(shù)字（高精度） 1037.196543
- bool 布爾值 true, false
- string 字符串 "Hello RUNOOB.COM", "John"
6、轉(zhuǎn)換數(shù)據(jù)類型(string類型才能轉(zhuǎn))
- AsInt()\IsInt(): 轉(zhuǎn)換字符串為整數(shù)
if (myString.IsInt()){ myInt=myString.AsInt(); } - AsFloat()\IsFloat(): 轉(zhuǎn)換字符串為浮點數(shù)。
- AsDecimal()\IsDecimal():轉(zhuǎn)換字符串為十進制數(shù)。
- AsDateTime()\IsDateTime(): 轉(zhuǎn)換字符串為 ASP.NET DateTime 類型。
- AsBool()\IsBool(): 轉(zhuǎn)換字符串為布爾值。
- ToString(): 轉(zhuǎn)換任何數(shù)據(jù)類型為字符串。
var myInt=1234; myString=myInt.ToString();
7、循環(huán)
For 循環(huán)
<body>
@for(var i = 10; i < 21; i++) {<p>Line @i</p>}
</body>For Each 循環(huán)
<body>
<ul>
@foreach (var x in Request.ServerVariables)
{
<li>@x</li>
}
</ul>
</body>While 循環(huán)
<body>
@{ var i = 0; while (i < 5) {i += 1; <p>Line @i</p> } }
</body>8、數(shù)組
</p>
<p>Kai is now in position@{
string[] members = {"Jani", "Hege", "Kai", "Jim"};
int i = Array.IndexOf(members, "Kai")+1;
int len = members.Length;
string x = members[2-1];
}
<html>
<body>
<h3>Members</h3>
@foreach (var person in members)
{
<p>@person</p>
}
<p>The number of names in Members are
@l
en</p>
<p>The person at position 2 is
@x
</p>
<p>Kai is now in position
@i
</p>
</body>
</html>9、邏輯條件
If 條件
@{var price=50;}
<html>
<body>
@if (price>30)
{
<p>The price is too high.</p>
}
</body>
</html>Else 條件
@{var price=20;}
<html>
<body>
@if (price>30)
{
<p>The price is too high.</p> } else { <p>The price is OK.</p>
}
</body>
</html>Else If 條件
@{var price=25;}
<html>
<body>
@if (price>=30) { <p>The price is high.</p> } else if (price>20 && price<30) { <p>The price is OK.</p> } else { <p>The price is low.</p> }
</body>
</html>Switch 條件
@{
var weekday=DateTime.Now.DayOfWeek;
var day=weekday.ToString();
var message="";
}
<html>
<body>
@switch(day)
{
case "Monday":
message="This is the first weekday.";
break;
case "Thursday":
message="Only one day before weekend.";
break;
case "Friday":
message="Tomorrow is weekend!";
break;
default:
message="Today is " + day;
break;
}
<p>
@message
</p>
</body>
</html>二、Razor引擎
1、布局(Layout)(@RenderBody()方法)
解釋：Layout方式布局就相當(dāng)于一個模板，我們在它地址地方去添加代碼。類似于ASP.NET母版頁中的ContentPlaceHolder服務(wù)器控件，在MVC中使用@RenderBody()來呈現(xiàn)子Web頁面的內(nèi)容，它可以省去我們在每個視圖文件中寫相同的html元素、JS和樣式等的工作。
母版頁：(~/Views/Layout/_SiteLayout.cshtml)
母版的呈現(xiàn)是MVC內(nèi)部處理的，這種以下劃線（_）開頭的視圖文件，一般是不能直接返回給用戶。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>我的網(wǎng)站 - @Page.Title</title>
</head>
<body>
@RenderBody()
</body>
</html>子頁面：(~/Views/Home/About.cshtml)
@{
Layout = "~/Views/Layout/_SiteLayout.cshtml";
}
<h1>
關(guān)于我的網(wǎng)站
</h1>
<p>
這是一些內(nèi)容顯示在關(guān)于我們這個頁面，我們用的是SiteLayout.cshtml這個主頁母版頁。
<br />
當(dāng)前時間：@DateTime.Now
</p>2、頁面(@RenderPage()方法)
解釋：page當(dāng)需要在一個頁面中，輸出另外一個Razor文件(頁面)的內(nèi)容時候用到，比如頭部或尾部這些公共的內(nèi)容時需要用到，用@RenderPage()方法
母版頁：(~/Views/Layout/_SiteLayout.cshtml)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Simple Site</title>
</head>
<body>
<!--頭部-->
@RenderPage("~/Views/Layout/_header.cshtml")
</body>
</html>公共頁：(~/Views/Layout/_header.cshtml)
<div id="header">
<a href="#" rel="external nofollow" rel="external nofollow" >主頁</a>
<a href="#" rel="external nofollow" rel="external nofollow" >關(guān)于我們</a>
</div>3、Section區(qū)域(@RenderSection())
解釋：Section是定義在Layout的頁面中使用的。在Layout的頁面中用。在要Layout的父頁面中使用@RenderSection()方法。
- @RenderSecion()這個占位符表示：在這里會渲染頁面里面的一個節(jié)（可以是html代碼也可以是c#代碼和Html的結(jié)合體）。
- @RenderSection("scripts", required: false)做一個補充說明，第一個參數(shù)指明：在子頁面被渲染的節(jié)的名稱，第二個參數(shù)：指定子頁面這個節(jié)是否是必需的，如果指定了required:true;但是在子頁面沒有給這個名稱的節(jié)的話，編譯是通不過的。
母版頁：(~/Views/Layout/_SiteLayout.cshtml)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Simple Site</title>
</head>
<body>
<div id="left-menu">
@RenderSection("menu",true)
</div>
</body>
</html>公共頁：(~/Views/Layout/_menu.cshtml)
@{
Layout = "~/Views/Layout/_SiteLayout.cshtml";
}
<h1>
關(guān)于我的網(wǎng)站
</h1>
<p>
這是一些內(nèi)容顯示在關(guān)于我們這個頁面，我們用的是SiteLayout.cshtml這個主頁母版頁。
<br />
當(dāng)前時間：@DateTime.Now
</p>
@section menu{
<ul id="sub-menu"> <li>菜單1</li> <li>菜單2</li> <li>菜單3</li> <li>菜單4</li> </ul> }如果在子頁面中沒有去實現(xiàn)了menu了，則會拋出異常。我們可以使用它的重載@RenderSection("menu", false)
@if (IsSectionDefined("menu")) { @RenderSection("menu", false) } else { <p>menu Section is not defined!</p> }三、Razor 幫助器
ASP.NET 幫助器是通過幾行簡單的 Razor 代碼即可訪問的組件。您可以使用 Razor 語法構(gòu)建自己的幫助器，或者使用內(nèi)建的 ASP.NET 幫助器。
下面是一些有用的 Razor 幫助器的簡短說明：
- Web Grid（Web 網(wǎng)格）
- Web Graphics（Web 圖形）
- Google Analytics（Google 分析）
- Facebook Integration（Facebook 集成）
- Twitter Integration（Twitter 集成）
- Sending Email（發(fā)送電子郵件）
- Validation（驗證）
@Href("~/")//表示網(wǎng)站的根目錄
@Html.Raw('<font color='red'>紅字</font>')就會顯示出紅色的”紅字“，不用的話會直接顯示這段html字符串（<font color='red'>紅字</font>）
自定義Helper
@helper就是可以定義可重復(fù)使用的幫助器方法，不僅可以在同一個頁面不同地方使用，還可以在不同的頁面使用。
1、新建一個HelperMath.cshtml頁面
2、HelperMath.cshtml頁面寫方法
@*求和*@
@helper sum(int a, int b)
{
int result = a + b;
@result
}3、Index.cshtml頁面調(diào)用
1+2= @HelperMath.sum(1, 2) <br />
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了JS瀏覽器事件循環(huán)機制，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
JavaScript DOM 學(xué)習(xí)第二章 編輯文本
在這一章我會給出一個在CMS里非常有用的更新頁面的代碼。在任一段落點擊鼠標(biāo)你就可以修改了。完成以后點擊按鈕，修改的文本就顯示了。2010-02-02
JavaScript是一種描述型腳本語言，它不同于java或C#等編譯性語言,它不需要進行編譯成中間語言,而是由瀏覽器進行動態(tài)地解析與執(zhí)行2014-04-04
這篇文章主要簡單介紹了Unicode與JavaScript的發(fā)展史的相關(guān)資料,需要的朋友可以參考下2015-01-01
他是JavaScript中最大的對象，它描述的是一個瀏覽器窗口。一般要引用它的屬性和方法時，不需要用“window.xxx”這種形式，而直接使用“xxx”。一個框架頁面也是一個窗口。2009-01-01
簡單總結(jié)JavaScript中的String字符串類型
就像其他語言那樣,js中的字符串類型可以表示一串字符,由雙引號包住,這里簡單總結(jié)JavaScript中的String字符串類型的一些基礎(chǔ)知識2016-05-05
這篇文章主要介紹了JS實現(xiàn)的一個隨機點名功能,邏輯簡單,用在班級或活動時是個不錯的選擇,需要的朋友可以參考下2014-08-08
下面小編就為大家?guī)硪黄猨avascript運算符——位運算符全面介紹。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
這篇文章主要介紹了關(guān)于JSON的定義以及如何使用，JSON 的名稱中雖然帶有JavaScript，但這是指其語法規(guī)則是參考JavaScript對象的，而不是指只能用于JavaScript語言,需要的朋友可以參考下2023-07-07
下面小編就為大家?guī)硪黄仙Ｕ凧avaScript數(shù)組的用法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06