_Layout模板

常規的頁面一般由頭部導航、左側選單、中間主體內容主成，而其中唯一變動的基本就只有中間主體內容了，而Layout模板就是用來做這樣一件事，編寫好模板，需要變動的地方則使用@RenderBody()方法

_ViewStart

我們嘗試在_Layout模板的footer標籤中增加一點內容，執行程式，發現也會跟著改動，明明在Index檔案中未作任何操作

這是因為有_ViewStart的存在，發現裡面預設有這樣一行程式碼

@{
    Layout = "_Layout";
}

如果在Index中頭部未宣告使用任何模板則會使用ViewStart定義的預設模板，預設一般是不定義，如果賦值為null或其它預設，則優先使用頁面中定義的

頁面載入順序

_ViewStart.cshtml-->_Index.cshtml-->_Layout.cshtml

1. 首先_ViewStart在所有View載入之前載入，設定了預設的模板頁
2. 接著由Controller指定的頁面查詢Index.cshtml載入，並讀取該頁面的Layout設定（在頭部@{}中設定，如未設定則使用預設模板）
3. 最後根據Index頁面的Layout設定的模板頁查詢對應的模板頁載入

我們嘗試將ViewStart的Layout設定為_Layout1，執行程式，可以看到報錯了

View的查詢規則：先查詢Controller對應的資料夾，若未找到，則到View/Shard和Pages/Shard資料夾查詢，若最終還是未找到，則丟擲異常

TagHelper

TagHelper與HtmlHelper對比

以下是在檢視中使用TagHelper和HtmlHelper對比

@model HelloCore.Models.Book
@{
    Layout = null;
}
@*HtmlHelper*@
@Html.EditorFor(m=>m.Name)
@Html.LabelFor(m=>m.Name)
<br />
@*TagHelper*@
<label asp-for=Name></label>
<input asp-for=Name />

通過瀏覽器F12看看這倆到底有啥區別

emm..目前看起來生成後的程式碼是沒有多大區別，個人感覺主要區別還是在寫法上，TagHelper相對HtmlHelper更為接近原生寫法

比如，現在給它們都加一個樣式，看看二者的寫法

自定義TagHelper

建立一個類，名稱建議以TagHelper結尾，並繼承自TagHelper

重寫ProcessAsync方法

public class LabelTagHelper : TagHelper
    {
        public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
        {
            //校驗label是否設定了show-type
            if (output.Attributes.TryGetAttribute("show-type",out TagHelperAttribute tagHelperAttribute))
            {
                //校驗設定的show-type是否為bookCode
                if (tagHelperAttribute.Value.ToString().Equals("bookCode"))
                {
                    //設定該標籤的class為codeColor樣式
                    output.Attributes.SetAttribute("class", "codeColor");
                    //獲取標籤的Contne內容
                    string content = output.Content.IsModified ? output.Content.GetContent() : (await output.GetChildContentAsync()).GetContent(); ;
                    //設定Content
                    output.Content.SetContent($"MVP{content}");
                }
            }
        }
    }

效果如下：

之所以會“亂碼”,應該是編碼問題，轉一下就OK了

TagHelper註冊

在_ViewImports中新增一行

@addTagHelper *,HelloCore

表示新增該程式集下所有TagHelper

TagHelper的作用範圍

目前上面這種方式只能作用於label標籤，如果p標籤也要用，可以在類上加上特性註解

[HtmlTargetElement("p")]
public class LabelTagHelper : TagHelper{

}

但這樣一來，label標籤上就不起作用了

改造一下：

[HtmlTargetElement("p", Attributes = "show-type", ParentTag = "div")]
    [HtmlTargetElement("label", Attributes = "show-type", ParentTag = "div")]
    public class LabelTagHelper : TagHelper{
    
    }

如果HtmlTargetElement設定多個，則是or的關係，也就是隻要滿足一個就會生效，通過Attributes和ParentTag屬性會極大的縮小要作用的物件範圍，ParentTag表示父標籤

如果個別標籤想要遮蔽TagHelper，則可以在標籤尖括號後加上歎號

<!label show-type="bookCode" asp-for=Name class=codeColor></!label>

未完待續...