Razor button

比起Web Form開發，在後端(.cs)寫法上大同小異，可選擇C#或VB.NET來撰寫；而在前端(.cshtml、.vbhtml)則有比較大的差別，自 MVC3版本後，就以Razor為前端檢視引擎，本篇就針對前端語法在撰寫時常犯的錯誤及重點做說明。

 

(1) 註解

在以往.aspx檔案，我們習慣以html主解 /* */ 或是使用.net註解<%-- --%>

而在.cshtml中，則使用@* 此行為註解 *@ 來表示。

 

 

(2) 在前端(*.cshtml)撰寫後端(*.cs)語法 

以往在Web Form專案時，如果需要將.cs語法寫在aspx，就會寫成：

<% Response.Write("Hello  World"); %>

而在.cshtml則會改成 @{ xxx; }，如下：

@{  Response.Write("Hello  World"); }

需注意結尾需加分號「;」否則會出錯。

 

另外，如果使用@ViewBag或是Html Helper時，結尾則不需加分號，如下：

@ViewBag.Say

@Html.BeginForm()

@Html.ActionLink("Add Member", "Edit", "Travel")

 

值得一提的是，使用Razor語法@時，後面的字母需緊鄰在@後，不能有空格否則會出錯。舉上例為例

@ViewBag.Say不能寫成 @ ViewBag.Say

@Html.BeginForm() 不能寫成@ Html.BeginForm()

@Html.ActionLink("Add Member", "Edit", "Travel")不能寫成@ Html.ActionLink("Add Member", "Edit", "Travel")

 

 

(3) 引用外部JavaScript或CSS檔案

Razor有個寫法Url.Content()是將相對路徑轉為絕對路徑，與Server .Mapth()相似，語法如下：

 <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")"></script>

 

(4) 導頁寫法

如在前端需要增加按鈕或連超來執行導頁，可以有以下做法：

 

1. Link

@Html.ActionLink("Add Member", "Edit", "Travel")

參數1為link名稱

參數2為action名稱，也就是controller裡的method名稱

參數3為controller名稱

 

* 延伸說明

在.Net MVC寫法中，有overloading的參數指定到action或是controller時，

都是先指定action，再指定controller，例如：

@Html.ActionLink("Add Member", "Edit", "Travel")

@Html.BeginForm("Edit", "Travel", FormMethod.Post)

@Url.Action("Index","Mail")

 

2. Button

如欲顯示按鈕時，導向的頁面可使用@Url.Action(action,controller) 來指定。

<input type="button" value="重新填寫" onclick="javascript:window.location='@Url.Action("Edit", "USERLOG")'" />

*如要action到原來的controller，則可省略第二個參數，直接寫成@Url.Action("Edit")即可。

 

(5) 輸出JavaScript

在網路上參考眾多文章後，最後還是習慣TempData來輸出，TempData生命週期只存在一個Request，適合做錯誤或訊息的輸出，方式如下：

 

Controller：

1	public ActionResult Delete(ContactUs us)

2

{

3	//判斷資料更新成功與否

4	if (_IMailRepository.UpdateMailStatus(us, 2) > 0)

5	TempData["Msg"] = "更新成功！";

6

else

7	TempData["Msg"] = "更新失敗！";

8	return View("Index");

9

}

 

View (Index.cshtml)：

1	<script type="text/javascript"><![CDATA[

2	var msg= "@TempData["Msg"]"

3	if(msg!=""){alert(msg);}

4	]]></script>

參考網址： http://msdn.microsoft.com/zh-tw/library/dd394711(v=vs.100).aspx