本文目標

1.應用全域性應用程式檔案配置路由規則

2.熟悉Razor語法及HtmlHelper的使用

本文目錄

1.MVC的路由設定

2.Razor的語法及使用

3.HtmlHelper的使用

1.MVC的路由設定

為了方便大家能夠快速的理解路由，在這裡我用白話再解釋一遍：

首先看下面兩個地址：

地址一：http://localhost/index.aspx ：基於傳統的WebForm，直接訪問伺服器相對路徑的Index.aspx檔案。

地址二：http://localhost/Home/Index ：基於MVC的路徑訪問，訪問的是Controls資料夾下的HomeControl類的Index方法。

地址一很容易理解，因為有物理檔案的存在。那麼地址二呢？為什麼Home對應的是Control的類名？Index對應的是方法名？這裡就是路由對映的作用了，路由的作用就相當於把/Home/Index根據“定製的規則(如當前的Home和Control應該對應什麼)”解釋給MVC框架，以便處理相應的程式檔案，如我上一篇文章最後一幅圖一樣。

2.Razor的語法及使用

在Razor模板上的一種描述伺服器端程式的書寫規則。
如：在MVC2或傳統WebForm程式中，我們以<%**%>來表示服務端變數。在MVC3推出後，在cshtml檢視上可以"@"作為字首表示服務端變數。

1.基礎語法：以"@"符號+"{程式碼塊}"，或以"@"符號開頭。如下程式碼所示：

 1 <div>
 2         @{
 3             int id = 100;
 4             var ID = 101;
 5             string Name = "大寫名稱";
 6             string name = "變數區分大小寫";
 7         }
 8     </div>
 9     <div>@id</div>
10     <div>@ID</
 
div>
11     <div>@Name</div>
12     <div>@name</div>
13     <div>[email protected]</div>

注意：

• 在"{程式碼塊}"中的變數宣告要以";"分號結束，使用變數時無需求加";"分號。
• "@"符號前不能有任何Html字元，否則變數將以字串的形式原樣輸出。
• 與C#在類中寫變數的時候一樣，Razor中也是區分大小寫的。

2.字串拼接

1  <div>
2         字串拼接：aa @name bb</div>
3     <div>
4         字串拼接：[email protected]{@Name}
5         End
6     </div>

注意：

• 第一種方法不要忽略@符號前面的空格

3.文字使用

1     <div>
2         @{
3             <div>
4                 內部<br />
5                 文字一</div>
6             @:內部<br />文字二
7         }
8     </div>

4.註釋

1     <div>
2         @{
3             //註釋一，單行
4 @*
5             註釋二，多行
6             *@
7         }
8     </div>

5.迴圈

1    <div>
2         @{
3             for (int i = 0; i < 10; i++)
4             {
5             @:@i
6             }
7         }
8     </div>

6.特殊符號

 1     <div>
 2         @{
 3             var Password = @"""[email protected]#$%^\""";
 4         }
 5     </div>
 6     <div>
 7         @Password
 8     </div>
 9     <div>
10         @@</div>

注意：

• 輸出雙引號時，前面要多加一個雙引號轉義

7.整體執行效果：

3.HtmlHelper的使用

相當於傳統WebForm中的伺服器端控制元件，可以生成Html標籤，但語法更簡潔。以下內容只是對HtmlHelper有個簡單的認識，在實際開發過程中會與強型別Model進行繫結，在後面的文章中會有詳細的介紹。

1.Html.TextBox

1 //服務端寫法
2 @Html.TextBox("txtUserName")
3 //客戶端生成
4 <input id="txtUserName" name="txtUserName" type="text" value="" />

2.Html.Password

1 //服務端寫法
2 @Html.Password("txtPassword")
3 //客戶端生成
4 <input id="txtPassword" name="txtPassword" type="password" />

3.Html.Label

1 //服務端寫法
2 @Html.Label("txtUserName", "顯示值")
3 //客戶端生成
4 <label for="txtUserName">顯示值</label>

4.Html.DropDownList

 1 //服務端寫法     
 2  @{
 3         //下拉列表的值
 4         List<SelectListItem> selectList = new List<SelectListItem>();
 5         selectList.Add(new SelectListItem { Value = "1", Text = "列表項一" });
 6         selectList.Add(new SelectListItem { Value = "2", Text = "列表項二" });
 7     }
 8     @Html.DropDownList("ddlList", (SelectList)new SelectList(selectList.AsEnumerable(), "Value", "Text")) 
 9 //客戶端生成
10 <select id="ddlList" name="ddlList"><option value="1">列表項一</option>
11 <option value="2">列表項二</option>
12 </select>

5.Html.RadioButton

1 //服務端寫法
2 @Html.RadioButton("rdo", "男")
3 //客戶端生成
4 <input id="rdo" name="rdo" type="radio" value="男" />

 6.Html.CheckBox

1 //服務端寫法
2 @Html.CheckBox("chk")
3 //客戶端生成
4 <input id="chk" name="chk" type="checkbox" value="true" /><input name="chk" type="hidden" value="false" />

7.Html.ActionLink

//服務端寫法
@Html.ActionLink("連結首頁", "Login")
//客戶端生成
<a href="/User/Login">連結首頁</a>

8.整體執行效果