ASP.Net MVC中提供了Html Helper功能,
Html Helper提供了許多基本的Html元件的Template,
只要透過@Html.<元件名稱>(<輸入參數>),
Helper就會根據輸入的設定調整並回傳元件的Html字串給View,
在瀏覽器上就會顯示出該元件。
但這些基本的Html元件對於開發人員來說是不夠的,
如果我們需要一個Html元件,
其運算邏輯根據自己的需求來改變,
而這個元件是由可由許多Html基本元件組成,
這種情況就需要一個客製化的Html元件,
ASP.Net MVC也提供開發人員客製化Html Helper的功能,
以下就來開始製作自己的客製化Html Helper:
1. 在專案底下建立一個Helpers的資料夾
2. 在Helpers資料夾下新增一個擴充HtmlHelper的CS檔,
程式碼如下:
這裡記得是要實作HtmlHelper的Extension所以在parameter前面要加上this HtmlHelper,
然後使用MvcHtmlString.Create(HTML)產生Html區段回傳給View。
3. 在Web.conf的system.web.webPages.razor區段加入客製化HtmlHelper的Namespace
4. 在Razor View中加入我們實作的HtmlHelper元件
讓我們來看看最後跑出來的畫面
參考來源:
How to create custom HTML Helpers for ASP.NET MVC 3 and Razor View Engine
Html Helper提供了許多基本的Html元件的Template,
只要透過@Html.<元件名稱>(<輸入參數>),
Helper就會根據輸入的設定調整並回傳元件的Html字串給View,
在瀏覽器上就會顯示出該元件。
但這些基本的Html元件對於開發人員來說是不夠的,
如果我們需要一個Html元件,
其運算邏輯根據自己的需求來改變,
而這個元件是由可由許多Html基本元件組成,
這種情況就需要一個客製化的Html元件,
ASP.Net MVC也提供開發人員客製化Html Helper的功能,
以下就來開始製作自己的客製化Html Helper:
1. 在專案底下建立一個Helpers的資料夾
2. 在Helpers資料夾下新增一個擴充HtmlHelper的CS檔,
程式碼如下:
using System; using System.Web.Mvc; namespace MVCTest.Helpers { public static class CustomHelpers { public static MvcHtmlString QtyPriceCalculator(this HtmlHelper helper, int qtyValue = 0, int priceValue = 0) { return MvcHtmlString.Create(String.Format(@" <div> <label>Quantity: </label> <input type="number" value=""{0}"" /> <label>Price: </label> <input type="number" value=""{1}"" /> <label>Total: {2}</label> </div>", qtyValue, priceValue, qtyValue * priceValue)); } } }
這裡記得是要實作HtmlHelper的Extension所以在parameter前面要加上this HtmlHelper,
然後使用MvcHtmlString.Create(HTML)產生Html區段回傳給View。
3. 在Web.conf的system.web.webPages.razor區段加入客製化HtmlHelper的Namespace
4. 在Razor View中加入我們實作的HtmlHelper元件
@{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } <h2>Index</h2> <div> @Html.QtyPriceCalculator(100, 10) @Html.QtyPriceCalculator() </div>
讓我們來看看最後跑出來的畫面
參考來源:
How to create custom HTML Helpers for ASP.NET MVC 3 and Razor View Engine
留言
張貼留言