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社区迈出更大的一步!
转载于:https://www.cnblogs.com/scheshan/p/5528927.html
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/109000.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...