在DAY 8的時候介紹過HTML Helper的用法，除此之外還有一些helper可以讓我們更方便與彈性地編排View內容，接著就來一一說明。

● @helper輔助方法

有的時候我們在撰寫View的頁面仍會需要處理簡單邏輯判斷，以動態顯示內容。例如下方Code在foreach迴圈內用了if判斷要顯示的票種，我們則可以將這些邏輯包裝成@helper方法，除了可以重複使用外，相對可以讓程式碼變得簡潔明瞭些。

        public ActionResult Index()
        {
            var members = new List<Member>();
            members.Add(new Member { Id = 1, Name = "Amy", Age = 14 });
            members.Add(new Member { Id = 2, Name = "Bob", Age = 66 });
            members.Add(new Member { Id = 3, Name = "Carol", Age = 35 });
            members.Add(new Member { Id = 4, Name = "Dustin", Age = 5 });

            return View(members);
        }

@model IEnumerable<DemoActionResult.Models.Member>

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<div class="col-md-6" style="display:flex">
    <table class="table-bordered table">
        <tr>
            <th>票種</th>
            <th>年齡限制</th>
        </tr>
        <tr>
            <td>全票</td>
            <td>18歲以上，65歲以下</td>
        </tr>
        <tr>
            <td>半票</td>
            <td>6歲以上，未滿18歲</td>
        </tr>
        <tr>
            <td>免票</td>
            <td>滿65歲以上或未滿6歲</td>
        </tr>
    </table>
</div>
<div style="display:grid">
    @foreach (var member in Model)
    {
        <ul>
            <li>ID: @member.Id</li>
            <li>Name: @member.Name</li>
            <li>Age: @member.Age</li>
            @{
                if (member.Age >= 65 || member.Age < 6)
                {
                    <li>票種: 免票</li>
                }
                else if (member.Age >= 18)
                {
                    <li>票種:全票</li>
                }
                else
                {
                    <li>票種:半票</li>
                }
            }
        </ul>
        <hr />
    }
</div>

改寫的方式類似C#的方法，可以在該View的底下任一行以@helper開頭，自訂方法名稱與參數，並撰寫相關邏輯內容。叫用方法時以@開頭輸入方法名稱與參數即可使用，範例如下Code：

...
...
...

<div style="display:grid">
    @foreach (var member in Model)
    {
        <ul>
            <li>ID: @member.Id</li>
            <li>Name: @member.Name</li>
            <li>Age: @member.Age</li>
            @GetTicketType(member.Age)
        </ul>
        <hr />
    }
</div>

@helper GetTicketType(int age)
{
    if (age >= 65 || age < 6)
    {
        <li>票種: 免票</li>
    }
    else if (age >= 18)
    {
        <li>票種:全票</li>
    }
    else
    {
        <li>票種:半票</li>
    }
}

● 將@helper方法共用至整個專案

上述的@helper方法僅能在該檢視頁面中使用，如果要讓整個專案都能使用的話需要進行以下步驟：

1. 新增App_Code資料夾
   

2. 加入MVC5檢視頁面(Razor)
   

3. 自訂helper寫於該檢視頁面
   

4. 叫用方法時前面須加上檢視頁面名稱
   

● 自訂HTML Helper

雖然我們已經有許多HTML Helper方法來幫助撰寫HTML內容，但總是會有無法滿足需求的情況，當既有的HTML Helper方法沒有辦法產生我們要的標籤時，例如想產生<img>標籤與屬性可以如何做呢？其中一種方式就是自訂HTML Helper，參考下列步驟進行：

1. 建立MyHtmlHelper類別(可自行命名)並宣告為static
2. 於類別底下建立Image()方法，注意幾個重點：

• 方法必須宣告為static
• 第一個參數內必定為this HtmlHelper
• 回傳型別為MvcHtmlString才會自動編譯HTML格式

    public static class MyHtmlHelper
    {
        public static IHtmlString Image(this HtmlHelper helper,string url,string alt="找不到圖片")
        {
            //using System.Web.Mvc;
            return new MvcHtmlString($@"<img src={url} alt={alt} />");
        }
    }

3. 自訂方法建立完成後，於檢視頁面內即可以比照一般HTML Helper方法使用，同樣須注意是否需要using存放資料夾。

@Html.Image("https://picsum.photos/536/333")

● Tag Builder

當自訂HTML Hepler時，如果不想在回傳字串直接用HTML標籤格式，還有另一種物件化的方式來產生：Tag Builder。假如同樣想產生一個<img>標籤，利用Tag Builder的寫法可以參考下面Code：

        public static MvcHtmlString Image(this HtmlHelper helper,string url,string alt,string id)
        {
            //產生新的 TagBuilder 物件，並設定標籤為<img>
            var builder = new TagBuilder("img");

            //賦予id屬性值
            builder.GenerateId(id);

            //加入屬性
            builder.MergeAttribute("src", url);
            builder.MergeAttribute("alt", alt);

            //指定標籤為自我結束格式 <img ... />
            var result = builder.ToString(TagRenderMode.SelfClosing);

            return new MvcHtmlString(result);
        }

● 小結

以上就是一些helper相關的補充內容，明天我們來講講JSON資料格式，那麼就明天見囉～