【ASP.NET Core】标记帮助器——替换元素名称
标记帮助器不仅可以给目标元素(标记)插入(或修改)属性,插入自定义的HTML内容,在某些需求中还可以替换原来标记的名称。
比如我们在使用 Blazor 时很熟悉的 Component 标记帮助器。在 Razor 文档中你将使用 <Component> 元素来设置要呈现的组件。而在实际处理时,会去掉 <Component> 元素,并呈现组件的HTML内容。
下面咱们举两个例子。
第一个比较简单,自定义的元素是 <textBox>,生成的元素是 <input type=text />。
[HtmlTargetElement("textBox", TagStructure = TagStructure.WithoutEndTag)]
public class TextInputTagHelper : TagHelper
{
public override void Process(TagHelperContext context, TagHelperOutput output)
{
// 将标记名称改为 input
output.TagName = "input";
// 设置 type 属性
output.Attributes.SetAttribute("type", "text");
}
}
这个不难理解,首先我们用的是候,在 Razor 文档使用的是元素是 <textbox>,而最后呈现出来的 HTML 是 <input> 元素。咱们就把它弄得像个控件那样用,是不是有点以前 ASP.NET 的味儿了?以前是有个前缀 asp:TextBox。
TagStructure.WithoutEndTag 的意思是指定这个标记没有结束标签,就像 <input > 或 <input />。
Razor 文档中要用 @addTagHelper 指令导入一下。
@addTagHelper *, TestApp
TestApp 是我这个程序集的名称,它导入此程序集下所有标记帮助器。
用起来也方便。
<div>
<TextBox />
</div>
运行之后,生成这样的 HTML。
<input type="text">
咱们确实可以让它更像传统 ASP.NET。
@addTagHelper *, TestApp
@tagHelperPrefix "asp:" <div>
<asp:textBox />
</div>
@tagHelperPrefix 就是为标记添加一个前缀,这里指定的是“asp:”,所以用的时候就真的捡到“童年回忆”了。想当年,ASP.NET 就是这么用的。
下面再举一例,咱们做 RadioButton(单选按钮)。选项之间互斥,同一个分组中你只能选择一项。在 HTML 中是 <input type=radio >,它没有“分组”属性,而是通过 name 属性来分组。name 相同的就是同一组,互斥。
注意的是,<input type=radio> 只显示个圈圈让你可以选中,可不包含选项文本。一般我们会给它配个 <label> 元素。然后,<label> 元素的 for 属性指向 <input> 的 id 属性。这样二者就关联了,点击<label>也能选中单选按钮。
所以,咱们实现的帮助器要生成一个<div>,里面包含<input>和<label>两个元素。
[HtmlTargetElement("radioButton", TagStructure = TagStructure.WithoutEndTag)]
public class RadioInputTagHelper : TagHelper { // 分组名称
[HtmlAttributeName("group-name")]
public string? Group { get; set; } = "radio"; // id 值
public string? Id { get; set; } = string.Empty; // 标签文本
public string? Label { get; set; } // 默认是否选中
public bool IsChecked { get; set; } = false; // 选项代表的值
public string? Value { get; set; } = string.Empty; public override void Process(TagHelperContext context, TagHelperOutput output)
{
// 修改标记名称
output.TagName = null; StringBuilder builder = new();
string html = $"""
<div>
<input type="radio" id="{Id}" name="{Group}" value="{Value}" {(IsChecked ? "checked" : "")} />
<label for="{Id}">{Label}</label>
</div>
"""; // 设置HTML内容
output.Content.SetHtmlContent(html);
}
}
默认情况下,在 Razor 文档中使用标记帮助器时,属性与.NET类属性相同。比如这个类中的 Label 属性,在Razor代码中也是Label属性。
<radioButton Label="老司机" ……>
如果你希望 HTML 属性与 .NET 属性不同,可以加上 [HtmlAttributeName] 特性,配分一个别名。
[HtmlAttributeName("group-name")]
咱们这个例子中,就为 Group 属性分配一个别名—— group-name。
<label> 元素只是呈现在HTML中的文本,让用户看,很多时候程序处理的往往不是这个,而是让标签对应一个值,即 Value 属性。Value 属性指定的值才是给程序用的。
我们来用一下这个单选按钮。
<div>
<radioButton group-name="abc" id="itme1" value="1" label="山药" is-checked="true" />
<radioButton group-name="abc" id="item2" value="2" label="鸭梨" />
<radioButton group-name="abc" id="item3" value="3" label="龙眼" />
<hr />
<radioButton group-name="good" id="item5" value="5" label="大卡车" />
<radioButton group-name="good" id="item6" value="6" label="皮卡" is-checked="true" />
<radioButton group-name="good" id="item4" value="4" label="独轮车" />
</div>
同一 group-name 下的选项是互斥关系,而不同组之间是互不影响的。
运行后,生成以下 HTML:
<div>
<input type="radio" id="itme1" name="abc" value="1" checked />
<label for="itme1">山药</label>
</div>
<div>
<input type="radio" id="item2" name="abc" value="2" />
<label for="item2">鸭梨</label>
</div>
<div>
<input type="radio" id="item3" name="abc" value="3" />
<label for="item3">龙眼</label>
</div>
<hr />
<div>
<input type="radio" id="item5" name="good" value="5" />
<label for="item5">大卡车</label>
</div>
<div>
<input type="radio" id="item6" name="good" value="6" checked />
<label for="item6">皮卡</label>
</div>
<div>
<input type="radio" id="item4" name="good" value="4" />
<label for="item4">独轮车</label>
</div>
</div>
结果如下图所示。
接下来看第三个例子。咱们来画一个圆,标记帮助器定义一个 <circle> 元素,我们直接设置相关属性就行。比如画布宽度、画布高度、圆的圆心、半径、线的粗细。然后会生成 <canvas> 元素和相关的 js 脚本代码。
[HtmlTargetElement("Circle")]
public class CircleTagHelper : TagHelper
{
// 圆的半径
public int Radius { get; set; } // 线宽度
public int LineWidth { get; set; } // 圆心-X
public int CenterX { get; set; } // 圆心-Y
public int CenterY { get; set; } // 画布宽度
public int Width { get; set; } = 300; // 画布高度
public int Height { get; set; } = 300; public override void Process(TagHelperContext context, TagHelperOutput output)
{
// 无标记名称
output.TagName = null;
// 生成的内容
string s = $"""
<canvas id="cv" width="{Width}" height="{Height}"></canvas>
<script>
var canvas = document.getElementById('cv');
var ctx = canvas.getContext('2d');
ctx.lineWidth = {LineWidth};
ctx.strokeStyle = 'blue';
ctx.beginPath();
ctx.arc({CenterX}, {CenterY}, {Radius}, 0, 2 * Math.PI);
ctx.stroke();
</script>
""";
output.Content.SetHtmlContent(s);
}
}
TagName 设置为 null 表示咱们这个帮助器不生产标签,而是用输出字符串 s 中那段代码。即这段代码直接呈现在 HTML 文档中,外部不用其他元素包装。
来,咱们在 Razor 文档中试试看。
<Circle center-x="115" center-y="90"
width="900"
height="900"
line-width="4"
radius="70" />
绘制的圆如下图所示。
生成的 HTML 如下:
<canvas id="cv" width="900" height="900"></canvas> <script>
var canvas = document.getElementById('cv');
var ctx = canvas.getContext('2d');
ctx.lineWidth = 4;
ctx.strokeStyle = 'blue';
ctx.beginPath();
ctx.arc(115, 90, 70, 0, 2 * Math.PI);
ctx.stroke();
</script>
用这个方法,咱们可以封装出许多图形绘制的标记,用的时候只要赋值一下属性即可,很省事的哟。
最新文章
- BZOJ1303 [CQOI2009]中位数图
- 问题导向VS目标导向:领导者要倾向哪种?
- 【HDU 2853】 KM算法
- samba的rpm包,只有tar.gz文件安装
- [JavaScript]函数调用作用域的一些问题
- 软工实践练习——使用git进行代码管理心得
- j疑难杂症:java.lang.VerifyError: class org.hibernate.type.WrappedMaterializedBlobType overrides final method getReturnedClass.()Ljava/lang/Class;
- PreparedStatement可以有效地防止sql被注入
- ViewFilpper
- HDU3988-Harry Potter and the Hide Story(数论-质因数分解)
- PE文件结构(五岁以下儿童)基地搬迁
- 高性能管线式HTTP请求(实践&#183;原理&#183;实现)
- JFinal配合Shiro权限控制在FreeMarker模板引擎中控制到按钮粒度的使用
- 如何将markdown转换为wxml
- Java 多线程总结
- hadoop java上传文件
- Hadoop启动之后jps没有NameNode节点
- VS2015中不同开发环境设置转换(C#->;C++等)
- Golang之Mysql操作
- Spring 依赖注入 基于构造函数、设值函数、内部Beans、集合注入
热门文章
- Zabbix技术分享——使用Zabbix6.0监控业务日志
- 3.7V升压5V,3.7V转5V电路图芯片
- Windows10下python3和python2同时安装(二)python2.exe、python3.exe和pip2、pip3设置
- vivo 云原生容器探索和落地实践
- python 实现RSA数字签名
- Linux 环境中使用 LVGL
- RedisTemplate设置redis的key时出现\xac\xed\x00\x05t\x00\x0f前缀
- python进阶之路20 正则表达式 re模块
- JavaScript 图像压缩
- angular11 报错 ERROR Error: If ngModel is used within a form tag, either the name attribute must be set or the form