当前位置: 代码迷 >> 综合 >> Blazor University (9)组件 — 代码生成 HTML 属性
  详细解决方案

Blazor University (9)组件 — 代码生成 HTML 属性

热度:14   发布时间:2024-01-12 05:33:22.0

原文链接:https://blazor-university.com/components/code-generated-html-attributes/

代码生成 HTML 属性

Razor 在条件 HTML 输出或在 for 循环中输出 HTML 时非常棒,但在元素本身内的条件代码方面,事情就有点棘手了。例如,以下代码无法编译,因为您无法在元素的 <> 内添加 C# 控制块。

<img@foreach(var nameAndValue in AdditionalAttributes){@nameAndValue.Key = @nameAndValue.Value} src="https://randomuser.me/api/portraits/lego/1.jpg" />@code
{Dictionary<string, object> AdditionalAttributes;protected override void OnInitialized(){AdditionalAttributes = new Dictionary<string, object>{["id"] = "EmmetImage",["alt"] = "A photo of Emmet"};base.OnInitialized();}
}

我们可能尝试的下一个方法是编写一个返回字符串的方法,并在 <> 字符内调用它。

<div @IfYouCanSeeThisTextThenTheCodeWasNotExecutedHere />
<span>@IfYouCanSeeThisTextThenTheCodeWasNotExecutedHere</span>@code
{string IfYouCanSeeThisTextThenTheCodeWasNotExecutedHere = "The code here was executed";
}

但这也不起作用。前面的示例将输出以下 HTML。

<div @ifyoucanseethistextthenthecodewasnotexecutedhere=""></div>
<span>The code here was executed</span>`

Razor 只会在以下位置执行 C# 代码:

  1. 在元素的内容区域内,例如 <span>@GetSomeHtml()</span>

  2. 在确定要分配给元素属性的值时,例如 <img src=@GetTheImageForTheUrl() />

  3. @code 部分中。

我们需要用来为 HTML 元素生成一个或多个属性 + 值的技术称为“属性展开”。属性展开涉及将 Dictionary<string, object> 分配给具有特殊名称 @attribute 的属性。

<div @attributes=MyCodeGeneratedAttributes/>@code
{Dictionary<string, object> MyCodeGeneratedAttributes;protected override void OnInitialized(){MyCodeGeneratedAttributes = new Dictionary<string, object>();for(int index = 1; index <= 5; index++){MyCodeGeneratedAttributes["attribute_" + index] = index;}}
}

前面的代码将输出一个具有 5 个属性的 <div>

<div attribute_1="1" attribute_2="2" attribute_3="3" attribute_4="4" attribute_5="5"></div>

特殊情况

一些 HTML 属性,例如 readonlydisabled 不需要任何值——它们仅存在于元素上就足以使它们生效。事实上,即使应用诸如 false 之类的值仍然会激活它们。以下 <input> 元素将是只读和禁用的。

<input readonly="false" disbabled="false"/>

在 razor 视图中,规则略有不同。如果我们输出 readonly=@IsReadOnlydisabled=@IsDisabled - 只要分配的值为 false,razor 根本不会输出该属性;当分配的值为 true 时,razor 将在不分配值的情况下输出元素。

<input readonly=@true disabled=@false/> 将导致生成的 HTML 完全不包含 disabled 属性。

  相关解决方案