Asp.Net Core-幾行代碼解決Razor中的嵌套if語句

MVC開發中，經常會遇到在razor中插入簡單的邏輯判斷。 

                @if (clientManager.IsAdmin)
                {
                    if (!Model.Topic.Top)
                    {
                        <a asp-action="Top" asp-controller="Topic" asp-route-id="@Model.Topic.ID" class="btn btn-default btn-xs" title="置頂"><i class="fa fa-lg fa-star-o"></i> 置頂</a>
                    }
                    else
                    {
                        <a asp-action="Top" asp-controller="Topic" asp-route-id="@Model.Topic.ID" class="btn btn-success btn-xs" title="取消置頂"><i class="fa fa-lg fa-star"></i> 取消置頂</a>
                    }
                    if (!Model.Topic.Recommand)
                    {
                        <a asp-action="Recommand" asp-controller="Topic" asp-route-id="@Model.Topic.ID" class="btn btn-default btn-xs" title="加精華"><i class="fa fa-lg fa-heart-o"></i> 添加精華</a>
                    }
                    else
                    {
                        <a asp-action="Recommand" asp-controller="Topic" asp-route-id="@Model.Topic.ID" class="btn btn-success btn-xs" title="取消精華"><i class="fa fa-lg fa-heart"></i> 取消精華</a>
                    }
                }    

代碼嵌套在HTML中其實是很不好，同時也是很無奈的行為。這樣會導致HTML不整潔，如果嵌套層次多了也會不好維護。在Asp.Net Core中，提供了TagHelper可以很方便的解決這個問題。關於TagHelper，大家可以參考官方文檔

1. 先定義一個叫VisibleTagHelper的類，代碼如下

    [HtmlTargetElement(Attributes = "condition")]
    [HtmlTargetElement("visible")]
    public class VisibleTagHelper : TagHelper
    {
        [HtmlAttributeName("condition")]
        public bool Condition { get; set; }

        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            if (output.TagName == "visible")
            {
                output.TagName = "";
            }

            if (!this.Condition)
            {
                output.TagName = "";
                output.Content.SetHtmlContent("");
            }
            else
            {
                base.Process(context, output);
            }
        }
    }

2. 在_ViewImports中添加TagHelper

@addTagHelper *, YourNamespace

3. 修改一下上面的Razor代碼

<visible condition="@clientManager.IsAdmin">
                    <a condition="@(!Model.Topic.Top)" asp-action="Top" asp-controller="Topic" asp-route-id="@Model.Topic.ID" class="btn btn-default btn-xs" title="置頂"><i class="fa fa-lg fa-star-o"></i> 置頂</a>

                    <a condition="@Model.Topic.Top" asp-action="Top" asp-controller="Topic" asp-route-id="@Model.Topic.ID" class="btn btn-success btn-xs" title="取消置頂"><i class="fa fa-lg fa-star"></i> 取消置頂</a>

                    <a condition="@(!Model.Topic.Recommand)" asp-action="Recommand" asp-controller="Topic" asp-route-id="@Model.Topic.ID" class="btn btn-default btn-xs" title="加精華"><i class="fa fa-lg fa-heart-o"></i> 添加精華</a>

                    <a condition="@Model.Topic.Recommand" asp-action="Recommand" asp-controller="Topic" asp-route-id="@Model.Topic.ID" class="btn btn-success btn-xs" title="取消精華"><i class="fa fa-lg fa-heart"></i> 取消精華</a>
                </visible>

全部是HTML，沒有了煩人的大括號，是不是清爽了很多！！

那么再說會VisibleTagHelper，這個類主要做了什么操作呢？

[HtmlTargetElement(Attributes = "condition")]
[HtmlTargetElement("visible")]

頂部的2個Attribute作為選擇符，表示這個TagHelper在哪些HTML元素上生效。第一個Attribute表示在所有擁有condition屬性的HTML元素生效，第二個Attribute表示在<visible>元素生效。

[HtmlAttributeName("condition")]
public bool Condition { get; set; }

此TagHelper公布了一個bool類型的屬性，作為是否顯示內容的判斷條件

public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            if (output.TagName == "visible")
            {
                output.TagName = "";
            }

            if (!this.Condition)
            {
                output.TagName = "";
                output.Content.SetHtmlContent("");
            }
            else
            {
                base.Process(context, output);
            }
        }

通過重寫TagHelper基類的Process方法，實現控制顯示內容的邏輯。當Condition條件為false，則將TagHelper所應用的元素的HTML內容設置為空。

仔細一想，這個和angularjs的directive何其相似。asp.net core集各種先進的思想為一身，又可以跨平台，真心希望它能帶領.Net社區邁出更大的一步！