zoukankan      html  css  js  c++  java
  • 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>
                        }
                    }    
    View Code

    代码嵌套在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);
                }
            }
        }
    View Code

    2. 在_ViewImports中添加TagHelper

    @addTagHelper *, YourNamespace
    View Code

    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>
    View Code

    全部是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社区迈出更大的一步!

  • 相关阅读:
    输入框实时验证是否跟后台数据重复,重复的话在输入框下边提示该名称已存在
    表格某一列内容需要占据两列宽度,如何设置样式以及只给某一列添加边框
    Dropdown 下拉菜单 修改为 select 框样式,在框内显示图片,并且二次确认,选取消依旧显示原来选项
    常用的正则表达式
    vue element UI 添加一行表单
    Cannot read property 'reduce' of null 报错解决
    vue 打包卡住的问题
    vue 安装scss 报错 TypeError: this.getResolve is not a function 解决
    解压版mysql安装(windows版)
    外部系统调用星空接口
  • 原文地址:https://www.cnblogs.com/scheshan/p/5528927.html
Copyright © 2011-2022 走看看