将字符串注入到 Blazor/HTML 元素中,当没有 key=value 属性时。

huangapple go评论65阅读模式
英文:

Inject a string into a Blazor/HTML element when there's no key=value property

问题

我需要构建一个<select>列表,其中有一个可选的选定项。目前我必须编写两个版本,取决于我的字典项的selected属性是否为true。

<InputSelect>
    @foreach (var kvp in ListOfValues)
    {
    if (kvp.Key == SelectedValue)
      {
        <option selected value="@kvp.Key">@kvp.Value</option>
      }
      else
      {
        <option value="@kvp.Key">@kvp.Value</option>
      }
    }
</InputSelect>

然而,我希望能够简化这个过程,因为如果需要其他属性(如disabledclass),它会变得非常复杂。在查找教程时,我假设这种方法可能有效,但实际上不行。

<InputSelect>
    @foreach (var kvp in ListOfValues)
    {
        <option @(kvp.Key == SelectedValue ? "selected" : "") value="@kvp.Key">
            @kvp.Value
        </option>
    }
</InputSelect>

在HTML元素中添加字符串时,如果没有属性=值的组合,是否有一种方法?

进一步的说明

我可以成功地跳过条件检查,只需使用<InputSelect @bind-Value="@SelectedValue">,但这个问题也涉及到诸如disabled这样的属性,它们通常不会与=value一起呈现。

英文:

I need to construct a &lt;select&gt; list with an optional selected item. Currently I'm having to write out two versions depending on whether the selected property of my dictionary item is true.

&lt;InputSelect&gt;
    @foreach (var kvp in ListOfValues)
    {
    if (kvp.Key == SelectedValue)
      {
        &lt;option selected value=&quot;@kvp.Key&quot;&gt;@kvp.Value&lt;/option&gt;
      }
      else
      {
        &lt;option value=&quot;@kvp.Key&quot;&gt;@kvp.Value&lt;/option&gt;
      }
    }
&lt;/InputSelect&gt;

However I was hoping to shortcut this process because if additional attributes are required (such as disabled or class it becomes ridiculously complex. Looking around for tutorials I assumed this might work, but it doesn't...

&lt;InputSelect&gt;
	@foreach (var kvp in ListOfValues)
	{
		&lt;option @(kvp.Key == SelectedValue ? &quot;selected&quot; : &quot;&quot;) value=&quot;@kvp.Key&quot;&gt;
			@kvp.Value
		&lt;/option&gt;
	}
&lt;/InputSelect&gt;

Is there a way to add strings into HTML elements when there isn't a property=value combination?

Further clarity

I can successfully skip if the conditional check and just use &lt;InputSelect @bind-Value=&quot;@SelectedValue&quot;&gt;, but this question also relates to aspects such as disabled which don't generally render with =value.

答案1

得分: 2

如果你想通过以下方式渲染 selected 属性:

@(kvp.Key == SelectedValue ? &quot;selected&quot; : &quot;&quot;)

它会报错:

Failed to execute &#39;setAttribute&#39; on &#39;Element&#39;: &#39;@(kvp.Key&#39; is not a valid attribute name.

HTML 元素属性是基于 .NET 值有条件地渲染的。如果值为 false 或 null,则不会渲染该属性。如果值为 true,则以最小化方式渲染该属性。因此,如果你想要简化第一个过程,你可以使用以下方法根据条件渲染 selected 属性:

@foreach (var kvp in ListOfValues)
{
    &lt;option value=&quot;@kvp.Key&quot; selected=&quot;@(kvp.Key==SelectedValue)&quot;&gt;
        @kvp.Value
    &lt;/option&gt;
}
英文:

If you wanna render selected attribute via

@(kvp.Key == SelectedValue ? &quot;selected&quot; : &quot;&quot;)

It will report an error:

Failed to execute &#39;setAttribute&#39; on &#39;Element&#39;: &#39;@(kvp.Key&#39; is not a valid attribute name.

HTML element attributes are conditionally rendered based on the .NET value. If the value is false or null, the attribute isn't rendered. If the value is true, the attribute is rendered minimized. So if you wanna shortcut the first process, You can use this method to render the selected attribute by condition.

@foreach (var kvp in ListOfValues)
{
    &lt;option value=&quot;@kvp.Key&quot; selected=&quot;@(kvp.Key==SelectedValue)&quot;&gt;
        @kvp.Value
    &lt;/option&gt;
}

huangapple
  • 本文由 发表于 2023年7月12日 21:59:06
  • 转载请务必保留本文链接:https://go.coder-hub.com/76671407.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定