| Tweet |
|
在 .NET 推出 Razor Engine 後，裡面多了 @helper 的可能可以使用
主要目的也算是減少重複的程式碼
因為許多程式的流程都是類似的，這時候我們可以透過 helper 的幫助
讓我們只需要寫一次邏輯，並在多個地方使用
Helper用途與好處
- 重複的邏輯寫在同一個 helper 即可，可以用在多處
- 避免 View 資料夾出現太多為了顯示的檔案，減少 view 的數量，也提升 View 本身的可讀性
- @helper 可以預先編譯，可以讓網站在第一次執行的速度變快
- 相對於 partial view 而言，使用起來較為順手，參數較好傳
- 配上 TagBuilder ，能夠讓最後的 Code 的閱讀性較高
Helper 使用方式
Inline-helper：跟使用的檔案放在一起，只能用在單一檔案
Helper-package：將 Code 抽到其他檔案，所以可以類似用模組的感覺
表單 helper
基本的系統內建 Helper 通常是用在表單 (Form)
以下列出一些系統內建表單 Helper 用法，以及其對應會產出之 Html
另外，也可以從既有的 dataValue 來產出對應欄位
請看以下語法
其中黃色標記的 TextBox(“String”)
會自動去以下位置找尋對應的 String DataValue
- ViewBag.DataValue
- @Model.DataValue
Templated Helper Methods (模板 Helper 方法)
- Html.Editor：提供可以編輯 model property 的方法
- Html.Label / Html.Display：生成 read only 的內容
- DisplayForModel, EditorForModel, LabelForModel：自動透過 Model 生成完整的表單元件
Helper 客製化用法
用法ㄧ：使用 @Html.helperName
如果要在專案裡面客製化 helper，許多人推薦的做法，是在專案開立一個 helper 資料夾，把相關的 helper 檔案放在裡面
接下來，只要在想要使用 helper 的 view 裡面，用 @using 將其宣告即可
using System;
using System.Web;
using System.Web.Mvc;
namespace helperTest.helper
{
publicstaticclassTestCustomHelper//開放、靜態 的類別
{
public static string LabelHelperTest(this HtmlHelper helper, string text)//開放、靜態、的擴充方法
{
return “<label>" + text + “</label>";
}
}
}
記得將函式宣告成 statc 的，接下來，只要在想使用的 View 那邊
表頭請這樣引入
@using helperTest.helper
然後，在要使用的地方用 @Html. 帶出 helper 名稱即可
<div>
test : @Html.LabelHelperTest(“helperParams");
</div>
用法二：使用 @helperFileName.helperName
可參考官方的 這篇文章
請在專案開一個 app_code 的資料夾 (原本專案可能沒有，請透過以下方式新增)
並在裡面加入 MyHelper.cshtml 檔案，加入 MakeNote 函式，程式碼如下：
@helper MakeNote(string content) {
<div class=“note" style=“border: 1px solid black; width: 90%; padding: 5px; margin-left: 15px;“>
<p>
<strong>Note</strong> @content
</p>
</div>
}
接下來，則在想要套用的頁面加入以下：
@MyHelpers.MakeNote(“My test note content.")
頁面顯示的結果就像：
URL Helper Method
以下分享一些 URL 的 Helper，透過好讀的語法，能夠快速產出對應的 HTML
Ajax Helper
在 MVC 當中也有很多 Ajax Helper 可以用，在使用前要先引入以下兩個 library
- jquery.版本.js
- jquery.unobtrusive-ajax.min.js
這邊不詳細介紹 Ajax helper 的使用方式
但是可以參考一下的程式碼來了解其用途
例如，以下 Code 可以透過 c# 產生幾個 Link，並自動對應成 Ajax 的 Method
接下來，我們只要撰寫對應的 OnBegin, OnFailure, OnSuccess, OnComplete 就可以完成 ajax 的互動
接下來，你就可以覆寫一下方法，來完成 ajax 的對應行為
function OnBegin() {
alert(“begin ajax")
}
function OnSuccess(data) {
alert(“This is success, callback:"+ data);
}
function OnFailure(request, error) {
alert(“This is the on onFailure callback:"+ error);
}
function OnComplete(request, status) {
alert(“This is the onComplete callback:"+ status);
}
Ajax helper 也有內建一些方法，可以減少我們的開發時間
例如：
- Confirm：發出 request 前先 prompt 使用者
- HttpMethod：有 GET 或 POST
- InsertionMode：有 InsertAfter, InsertBefore, Replace 三種選項，指 ajax 取得的結果與原本 container 的內容關係
- LoadingElementId：通常發出 request 前都會出現 loading 動畫，可以用這個方法來指定動畫的 container
- LoadingElementDuration：設定 loading 動畫的呈現時間
- UpdateTargetId：指撈回來的 Ajax Result 要取代哪個 DOM 的 container (但如果回傳結果是 json 則沒有用途)
- Url：指 server 發送 ajax 的 URL
@function 與 @helper 差別
在網路上看到有人在討論 @function 與 @helper 之間的差異
其實我覺得看起來跟用起來都很像
最大的差異應該是 @function 一定要回傳值，但 @helper 似乎是不一定
尋找既有 helper
其實很多邏輯流程都有人寫成 helper 了
我們就不用自己去花時間撰寫
找的方法除了 google 外，也可以用 Nuget 來找
以下提供一些 Helper Library (哪裡可以查 Helper 資料)
http://msdn.microsoft.com/en-us/library/dd410596(v=vs.98).aspx
http://www.w3schools.com/aspnet/mvc_htmlhelpers.asp
http://aspnet.codeplex.com/releases
http://www.nuget.org/packages?q=helper
參考資料
Razor 學習筆記 – @functions 和 @helper
ASP.NET MVC
ASP.Net MVC – Razor的@helper 及 語法
[ASP.NET MVC 小牛之路]13 – Helper Method
Creating Custom HTML Helpers (C#)
(6) Razor Helper_與 ASP.NET MVC 的第一次親密接觸
HTML Helpers , Writing HTML without having to write HTML
The Difference Between @Helpers and @Functions In WebMatrix
ASP.NET中App_Code,App_Data等資料夾的作用
