ASP.NET MVC - 使用Razor自訂HtmlHelper元件

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檔，
程式碼如下：

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