Mvc示例之四Razor模板(一)

Razor模板是Mvc3開始引用的模板,是Mvc開發推薦模板。本節主要介紹Mvc模板及局部頁使用、Razor語法,下一節介紹MvcHelper用法並通過一個示例詳細講解Razor模板前後臺傳值。

Mvc模板

模板頁一般放在view的Shared文件夾下面。當加載時會將子頁跟模板頁合併行程最終結果。

模板頁所用語法:

@RenderBody

當在頁面中呈現該部分後,表示一個佔位。這是子頁生成的內容會替換這個佔位,合併後行程最終頁面。

@RenderPage

該方法是要呈現一個頁面,將頁面的內容展現在這裏。用過asp的同學可能還記得將頁面分割爲herder.asp。我們現在可以用這個方法這樣寫:

@RenderPage(“~/Views/Shared/_Header.cshtml”)
帶參數
@RenderPage(“~/Views/Shared/_Header.cshtml”,new{parm="my",parm2="you")
調用頁面獲取參數:
//獲取RenderPage() 傳遞過來的參數
@PageData["param"]

如果我們要在某個視圖中定義專門的一節,可以用下面的方法:

@RenderSection

爲了防止因缺少節而出現異常,可以給RenderSection()提供第2個參數:
@RenderSection("head", false)

我們用上面的幾個方法創建一個模板頁:

<!DOCTYPE html>

<html>

<head>

   <title>@ViewBag.Title</title>

   <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>

   @RenderSection("head", required: true)@*View頁面自定義特定js/css使用*@

</head>

 

<body>

   @RenderPage("~/Views/Shared/_Header.cshtml")

   @RenderBody()

</body>

</html>


那麼定義子頁面如下:

@{

   ViewBag.Title = "Index";

   Layout = "~/Views/Shared/_Layout.cshtml";

}

<h2>Index</h2>

@section Head{

   <script type="text/javascript">

       $(function () {

           alert("hello jquery");

       });

   </script>

}

<p>執行C#普通語法</p><br/>

@DateTime.Now.Date.ToShortDateString()

 

<p>執行C#語句段</p>

@{

   List<string> list = new List<string> { "Mvc3","Razor" };

   list.Add(".Net4");   

}

<ul>

@foreach(string s in list)

{

   if (string.IsNullOrEmpty(s))

    {

      <li>空</li>

    }

   else

    {

      <li>@s</li>

    }

}

</ul>


 

生成的頁面代碼如下:

<!DOCTYPE html>
<html>
<head>
    <title>Index</title>
    <link href="/Content/Site.css"rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery-1.4.4.min.js"type="text/javascript"></script>
   
    <script type="text/javascript">
        $(function () {
           alert("hello jquery");
        });
    </script>

</head>

<body>
    <h2>Index</h2>

<p>執行C#普通語法</p><br />
2013/3/11

<p>執行C#語句段</p>
<ul>
       <li>Mvc3</li>
       <li>Razor</li>
       <li>.Net4</li>
</ul>

 

</body>
</html>


本小節參考http://blog.csdn.net/litao2/article/details/8659362%C2%A0

Razor語法

從上面的代碼可以看出Razor語法用好看的@代替了<%%>,而且可以將html代碼與C#代碼混合寫。

當需要寫C#代碼時,只需要加一個@如下

@foreach(User user in ViewBag.Users){

}

如果這是我們想要在這個for循環當中輸出html可以這樣寫

@foreach(User user in ViewBag.Users){

   <span>username:</span>

 

}

如果想輸出實際的用戶名:

@foreach(User user in ViewBag.Users){

<span>username:</span>

@user.Username

 

}

這相當於<%=Html.Encode(user.Username)%>,那麼如果username中含有html代碼怎麼辦呢?可以用@Html.Raw(user.Username)輸出,這樣html代碼不會被轉義,會當作Html代碼解析。

現在,如果我們開頭的語句不是自帶語句塊怎麼辦呢?比如,我們想定義幾個變量。可以這樣寫

@{

   Varstr1=”123”;

   Varnum1=123;

}

又,當我們想要輸出字符拼接字符串,又不像定義變量時可以這樣寫:

@(“123”)

另外,在Razor下定義命名空間,註釋等也很好寫:

@using System;

/*定義變量*/

最後,給出Razor的其他語法:

語法名稱 Razor 語法 Web Forms 等效語法
代碼塊
@{    int x = 123;    string y = "because."; }
<%   int x = 123;    string y = "because.";  %>
表達式(默認encode)
<span>@model.Message</span>
<span><%: model.Message %></span>
表達式(不encode)
<span>
@Html.Raw(model.Message) </span>
<span><%= model.Message %></span>
結合文本和標記的循環
@foreach(var item in items) {   <span>@item.Prop</span>  }
<% foreach(var item in items) { %>   <span><%: item.Prop %></span> <% } %>
代碼和文本混合
@if (foo) {   <text>Plain Text</text>  }
<% if (foo) { %>    Plain Text  <% } %>
代碼和文本混合
@if (foo) {   @:Plain Text is @bar }
同上
Email 地址
Hi [email protected]
Razor 認識基本的郵件格式.可智能識別.
顯示錶達式
<span>ISBN@(isbnNumber)</span>
在括號裏可以有些簡單的操作.擴展一下就是@(20*pageIndex)輸出運算結果
輸出@符號
<span>In Razor, you use the  @@foo to display the value  of foo</span>
要顯示@符號,用兩個@符號"@@"表示.
服務器端註釋
@* This is a server side  


好了,本節就講到這裏,下一節講解一下Razor Helper,並實際寫一個小例子。

發佈了27 篇原創文章 · 獲贊 20 · 訪問量 7萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章