TagBuilder

 

使用 TagBuilder 類別，輕鬆地建置 HTML 標記。

 

來看如何應用 TagBuilder，請看以下範例，

我打算客製化自已專有的 html 登入樣版，以方便每一次使用時直接套上即可，

專案結構如下

 

打算把下列原始碼做成樣版

<form class="" action="/Dentist/AdminConsole/Login" method="post">
    <h2>登入</h2>
    <div class="row">
        <div class="form-group col-sm-8 col-md-6 col-lg-4 col-xl-3">
            <label class="control-label">帳號：</label>
            <input class="form-control" type="text" name="account" value="">
        </div>
    </div>
    <div class="row">
        <div class="form-group col-sm-8 col-md-6 col-lg-4 col-xl-3">
            <label class="control-label">密碼：</label>
            <input class="form-control" type="password" name="password" value="">
        </div>
    </div>

    <div class="form-group">
        <button class="btn btn-success" type="submit">登入</button>
    </div>
</form>

 

開始利用 TagBuilder 去把它組出來，MyTemplate.cs 的內容為

using System.Collections.Generic;
using System.Web.Mvc;

namespace WebApplication1.Helpers
{
    public static class MyTemplate
    {
        public static MvcHtmlString Login(this HtmlHelper helper, string word)
        {
            //<form class="" action="/Dentist/AdminConsole/Login" method="post">
            //    <h2>登入</h2>
            //    <div class="row">
            //        <div class="form-group col-sm-8 col-md-6 col-lg-4 col-xl-3">
            //            <label class="control-label">帳號：</label>
            //            <input class="form-control" type="text" name="account" value="">
            //        </div>
            //    </div>
            //    <div class="row">
            //        <div class="form-group col-sm-8 col-md-6 col-lg-4 col-xl-3">
            //            <label class="control-label">密碼：</label>
            //            <input class="form-control" type="password" name="password" value="">
            //        </div>
            //    </div>

            //    <div class="form-group">
            //        <button class="btn btn-success" type="submit">登入</button>
            //    </div>
            //</form>

            TagBuilder formBuilder = new TagBuilder("form");
            TagBuilder h2 = new TagBuilder("h2");
            TagBuilder div_form_group = new TagBuilder("div");
            TagBuilder button = new TagBuilder("button");

            Dictionary<string, string> formAttrDic = new Dictionary<string, string>();
            formAttrDic.Add("class", "");
            formAttrDic.Add("action", "");
            formAttrDic.Add("method", "post");
            formBuilder.MergeAttributes(formAttrDic);

            h2.SetInnerText(word);

            button.MergeAttribute("class", "btn btn-success");
            button.MergeAttribute("type", "submit");
            button.SetInnerText("登入");

            div_form_group.MergeAttribute("class", "form-group");
            div_form_group.InnerHtml = button.ToString();

            formBuilder.InnerHtml = h2.ToString() + Row("帳號", "text", "account") + Row("密碼", "password", "password") + div_form_group.ToString();

            return MvcHtmlString.Create(formBuilder.ToString());
        }

        private static string Row(string innerText, string type, string name)
        {
            //<div class="row">
            //    <div class="form-group col-sm-8 col-md-6 col-lg-4 col-xl-3">
            //        <label class="control-label">帳號：</label>
            //        <input class="form-control" type="text" name="account" value="">
            //    </div>
            //</div>

            TagBuilder div_row = new TagBuilder("div");
            TagBuilder div_form_group = new TagBuilder("div");
            TagBuilder label = new TagBuilder("label");
            TagBuilder input = new TagBuilder("input");

            label.MergeAttribute("class", "control-label");
            label.SetInnerText(innerText + "：");

            Dictionary<string, string> dicInput = new Dictionary<string, string>();
            dicInput.Add("class", "form-control");
            dicInput.Add("type", type);
            dicInput.Add("name", name);
            dicInput.Add("value", "");
            input.MergeAttributes(dicInput);

            div_form_group.MergeAttribute("class", "form-group col-sm-8 col-md-6 col-lg-4 col-xl-3");
            div_form_group.InnerHtml = label.ToString() + input.ToString();

            div_row.MergeAttribute("class", "row");
            div_row.InnerHtml = div_form_group.ToString();

            return div_row.ToString();
        }

    }
}

 

接著在 Index.cshtml 呼叫該樣版，Index.cshtml 內容為

@using WebApplication1.Helpers

@Html.Login("登入")

 

執行後如下圖

 

結論：

雖然利用 TagBuilder 來組 Html 原始碼，其程式還是落落長，但也對開發者幫助很大了。

 

參考資料：

TagBuilder Class

使用 TagBuilder 類別可建置 HTML 協助程式 (C#)

Tag Helpers in ASP.NET Core