[ASP] .NET MVC helper 整理

【如果覺得文章寫的好的話希望能按一下讚或分享喔】

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

NewImage

 

另外,也可以從既有的 dataValue 來產出對應欄位

請看以下語法

 

NewImage

其中黃色標記的 TextBox(“String”)

會自動去以下位置找尋對應的 String DataValue 

  • ViewBag.DataValue
  • @Model.DataValue
 
內建的用法中,還可以套用 Strongly Typed Input HTML Helpers,透過 lambda expression 來加強其資料的完整性
例如上方的寫法可以改成
 
NewImage
 
 

Templated Helper Methods (模板 Helper 方法)

MVC 還有提供一些既定的 Template helper methods ,可以自動生成表格或欄位
整理如下表格:
  • Html.Editor:提供可以編輯 model property 的方法
  • Html.Label / Html.Display:生成 read only 的內容
  • DisplayForModel, EditorForModel, LabelForModel:自動透過 Model 生成完整的表單元件
ps. 上面有些方法可以在後面加上For,例如,Html.Editor 變成 Html.EditorFor,表示強型別
 
筆者覺得最神奇的是最後面的 @Html.EditorForModel()
也就是說,如果 Model 定義好之後,只要透過 @Html.EditorForModel() , 就可以一行長出完整表單
讀者有興趣可以自己試看看
 
 

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>&nbsp;&nbsp; @content

    </p>

  </div>

}

 

接下來,則在想要套用的頁面加入以下:

@MyHelpers.MakeNote(“My test note content.")

 

頁面顯示的結果就像:

 

URL Helper Method

以下分享一些 URL 的 Helper,透過好讀的語法,能夠快速產出對應的 HTML

NewImage 

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 的互動

 

NewImage

 

接下來,你就可以覆寫一下方法,來完成 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 的第一次親密接觸

mvc中@helper的用法

HTML Helpers , Writing HTML without having to write HTML

還在揮汗徒手安裝程式庫? 試試NuGet吧

ASP.NET MVC 使用 TagBuilder

The Difference Between @Helpers and @Functions In WebMatrix

ASP.NET中App_Code,App_Data等資料夾的作用

Related Posts Plugin for WordPress, Blogger...
【如果覺得文章寫的好的話希望能按一下讚或分享喔】

彭其捷

想要做出很棒的產品,所以我寫程式,也研究介面 (UI) 與使用者經驗 (UX),並思考管理的法則。

【Profile】http://about.me/divaka

twitter facebookgooglepluslinkedinbloggertumblrflickryoutubedribbblerssemail


Fatal error: Uncaught Exception: 12: REST API is deprecated for versions v2.1 and higher (12) thrown in /home/content/63/7692663/html/blog/wp-content/plugins/seo-facebook-comments/facebook/base_facebook.php on line 1273