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等資料夾的作用
