Net Core-Razor

Posted 2020-07-15 Leo_wlCnBlogs

几行代码解决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的类，代码如下

@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>
}
}

    [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

[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);
}
}
}

@addTagHelper *, YourNamespace

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

@addTagHelper *, YourNamespace

<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社区迈出更大的一步！