个人中心
文章发布
退出
作者热门文章
- Java锁的逻辑（结合对象头和ObjectMonitor）
- 还在用饼状图？来瞧瞧这些炫酷的百分比可视化新图形（附代码实现）⛵
- 自动注册实体类到EntityFrameworkCore上下文，并适配ABP及ABPVNext
- 基于Sklearn机器学习代码实战
25
4
标记帮助器不仅可以给目标元素（标记）插入（或修改）属性，插入自定义的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
>
用这个方法，咱们可以封装出许多图形绘制的标记，用的时候只要赋值一下属性即可，很省事的哟.
。
最后此篇关于【ASP.NETCore】标记帮助器——替换元素名称的文章就讲到这里了,如果你想了解更多关于【ASP.NETCore】标记帮助器——替换元素名称的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。
25
4
0
在开发中的网页上，我在 IE 上遇到此错误 element = $(element); 此代码位于prototype.js 预期对象 如何消除此错误。 更新: 现场也使用了 jQuery。 最佳答
我有两个大小相同的嵌套数组: Array1 =[[1, 2], [], [2, 3]] Array2= [[1, 4], [8, 11], [3, 6]] 我需要将它们合并到一个数组中，如下所示: A
我有一些 jQuery 代码，当单击具有特定 ID 的项目时运行。当 ID 是 的一部分时，它就可以工作。元素，但当它位于 中时则不然元素。为什么会这样呢？我想使用 an，因为如果用户关闭了 Ja
Flex-box 规范 3声明 flex 元素不是 block 容器: A flex item establishes a new formatting context for its content
我遇到了一个意想不到的问题。 HTML JS $(function() { var $divs = $('.myDiv'); // create new div not in
我使用 Bootstrap 和 Ember.js 得到了一个无序列表。每个列表项都是一个显示新帖子的链接，每当您单击该链接时，Ember 都会添加类 active默认情况下。我正在使用 Bootstr
我正在尝试让一个函数正常工作，但运气不佳，所以我想向 Stackoverflow 智囊团提出一个新手问题! 基本上，我有一个表单，并且循环遍历所有元素以查看是否存在自定义数据属性。如果存在，则保持该元
我想映射一个可选数组，删除那些 nil 值，并使用另一个函数映射非 nil 值。 我知道我可以通过使用 compactMap 然后使用常规 map 来实现这一点，但我只想遍历数组一次。 我为此实现了一
我如何定位 li 元素，除非它们出现在 之后元素？换句话说，我想针对步骤而不是注释。 我尝试向 OL 添加一个我想从选择中排除的类，但我想出的代码不起作用。 (顺便说一句，重构 html 不是一种选
Warning 1 The element 'system.webServer' has invalid child element 'rewrite'. List of possible eleme
我正在尝试编写一个脚本，该脚本将遍历 HTML 源并创建 DOM 的 JSON 文件，然后使用 d3.js 在 TreeView 中显示该文件。我遇到的问题是不仅希望显示元素(TITLE、P、LI 等
我有以下 HTML 表单:- Option 1 Option 2
我试图在选定的 HTML 元素之后选择下一个具有类名 slider-value 的 span 元素。我尝试了多种解决方案，但没有一个有效。 我可以通过 id 选择它，但我不希望那样做使代码冗余。 $(
如果电子邮件地址无效，我想在屏幕上显示一条消息“请输入有效的电子邮件地址”。 body 元素的innerHTML 语句工作正常，但我用于p 元素的innerHTML 语句不起作用。 有一次，当我测试它
以下 jQuery 代码调用 ul 元素，查找元素内的前 三个 li 列表项，并隐藏剩余的 li 项目。然后，它附加一个 li 元素，其中显示“显示更多...”，并且在单击时显示之前隐藏的列表项。 (
我问了a question早些时候关于将编辑/删除链接与 h1 元素内联的最佳方法。我能够通过给出的答案实现这一点，但我现在有额外的要求，我需要在 h1 下方显示一个段落并编辑/删除链接。 到目前为止
我使用 MVC 4 和 knockout.js 库版本 2.1.0 显示从服务器检索到的大量文件的表中的以下摘录。 0)"> 正在正确检索数据，
我创建了一个脚本，该脚本在鼠标悬停在父容器上时激活，并且应该将其子元素移离鼠标。我目前已经让它工作了，但是代码的某些部分似乎与 REACT 代码应该是什么样子相矛盾。特别是两个部分。 我在渲染函数中使
我是 JS 新手，正在尝试理解项目 https://github.com/tastejs/todomvc 的代码 请参阅屏幕截图，我尝试对 button X 以及其父元素 div 设置断点，但在这两种
例如，假设有一个带有奇特颜色的标记: Something written here 使用 Visual Studio 2017 和 MVC 5 元素，有没有办法检查和定位当前应用了哪些样式，以及负责它
我是一名优秀的程序员,十分优秀！