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社区迈出更大的一步!
Asp.Net Core-几行代码解决Razor中的嵌套if语句的更多相关文章
- asp.net导出excel-一行代码实现excel、xml、pdf、word、html、csv等7种格式文件导出功能而且美观-SNF快速开发平台
分享: 腾讯微博 新浪微博 搜狐微博 网易微博 腾讯朋友 百度贴吧 豆瓣 QQ好友 人人网 作者:王春天 原文地址:http://www.cnblogs.com/spring_ ...
- 代码优化实战,3行代码解决了一百个if else!
事情是这样的,前段时间做代码review的时候,发现项目中有一个方法代码量超鸡儿多,而且大部分都是写的参数校验的代码,得,我们先抓着缕一缕需求先. 产品需求 找到产品要到了需求文档,需求是这样得: e ...
- 【译】在 ASP.NET 和 ASP.NET Core 之间共享代码
原文 | Ken 翻译 | 郑子铭 随着 .NET 6 的发布,使用 ASP.NET Core 可以获得更多好处.但是将现有代码迁移到 ASP.NET Core 通常听起来像是一项巨大的投资.今天我们 ...
- asp.net core系列 39 Web 应用Razor 介绍与详细示例
一. Razor介绍 在使用ASP.NET Core Web开发时, ASP.NET Core MVC 提供了一个新特性Razor. 这样开发Web包括了MVC框架和Razor框架.对于Razor来说 ...
- 基于ASP.NET Core 3.0快速搭建Razor Pages Web应用
前言 虽然说学习新的开发框架是一项巨大的投资,但是作为一个开发人员,不断学习新的技术并快速上手是我们应该掌握的技能,甚至是一个.NET Framework开发人员,学习.NET Core 新框架可以更 ...
- asp.net core不通过构造方法从容器中获取对象及解决通过这种方法NLog获取对象失败的问题
一般想从容器中获取对象,我们都是通过构造方法获取对象,但有些条件不允许不能通过构造方法获取对象,我们必须单独从容器中单独创建获取找个对象,这样我们就不行把找个容器静态保存起来供全局diaoy 一. 简 ...
- Jquery几行代码解决跟随屏幕滚动DIV
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 【Asp.Net Core】在Visual Studio 2017中使用Asp.Net Core构建Angular4应用程序
前言 Visual Studio 2017已经发布了很久了.做为集成了Asp.Net Core 1.1的地表最强IDE工具,越来越受.NET系的开发人员追捧. 随着Google Angular4的发布 ...
- ASP.NET Core 在 .NET 6 Preview 2 中的更新
原文:<ASP.NET Core updates in .NET 6 Preview 2>,作者 Daniel Roth .NET 6 预览版 2 现已推出,其中包括许多对 ASP.NET ...
随机推荐
- git 本地库推送远程库 版本冲突的解决方法
参考: http://blog.csdn.net/shiren1118/article/details/7761203 github上的版本和本地版本冲突的解决方法 $ git push XXX ma ...
- sql server使用中遇到的问题记录
一.sql server 不能连接远程服务器,但可以连接本地的数据库 我目前用的是sql server 2012 sp1,用着用着突然就不能连接远程服务器上的数据库了,崩溃了一天... 修复试了,卸载 ...
- 关于UNPIVOT 操作符
UNPIVOT 操作符说明 简而言之,UNPIVOT操作符就是取得一个行的数据集合,然后把每一行都转换成多个行数据.为了更好地理解,请看下图: 图1 从上图中,你能发现UNPOVOT操作符,取得了两行 ...
- 【mysql】关于硬件方面的一些优化
一.CPU最大性能模式 cpu利用特点 5.1 最高可用4个核 5.5 最高可用24核 5.6 最高可用64核心 一次query对应一个逻辑CPU 你仔细检查的话,有些服务器上会有的一个有趣的现象:你 ...
- mysql备份还原
备份java代码如下: /** * 备份单个数据库 * @param dbName 数据库名称 * @return 备份成功或者失败 */ @Override public boolean backu ...
- 远程连接mysql报错【1130 -host 'localhost' is not allowed to connect to this mysql server】
远程连接mysql时包如下错误: 1130 -host 'localhost' is not allowed to connect to this mysql server 解决办法 本地用root账 ...
- AngularJS性能优化
几个概念 域$scope和更新周期DigestCycle AngularJS的域本质上是一些JavaScript对象,它们从一些预定义的对象继承而来.基本上,小的域比大的域运行要快. 每创建一个新的域 ...
- django用户登录和注销
django版本:1.4.21. 一.准备工作 1.新建项目和app [root@yl-web-test srv]# django-admin.py startproject lxysite [roo ...
- [转]ion-slide-box
本文转自:http://ionicframework.com/docs/api/directive/ionSlideBox/ The Slide Box is a multi-page contain ...
- Caffe 抽取CNN网络特征 Python
Caffe Python特征抽取 转载请注明出处,楼燚(yì)航的blog,http://www.cnblogs.com/louyihang-loves-baiyan/ Caffe大家一般用到的深度学 ...