英文:
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>
然而,我希望能够简化这个过程,因为如果需要其他属性(如disabled
或class
),它会变得非常复杂。在查找教程时,我假设这种方法可能有效,但实际上不行。
<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 <select>
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.
<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>
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...
<InputSelect>
@foreach (var kvp in ListOfValues)
{
<option @(kvp.Key == SelectedValue ? "selected" : "") value="@kvp.Key">
@kvp.Value
</option>
}
</InputSelect>
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 <InputSelect @bind-Value="@SelectedValue">
, but this question also relates to aspects such as disabled
which don't generally render with =value
.
答案1
得分: 2
如果你想通过以下方式渲染 selected
属性:
@(kvp.Key == SelectedValue ? "selected" : "")
它会报错:
Failed to execute 'setAttribute' on 'Element': '@(kvp.Key' is not a valid attribute name.
HTML 元素属性是基于 .NET 值有条件地渲染的。如果值为 false 或 null,则不会渲染该属性。如果值为 true,则以最小化方式渲染该属性。因此,如果你想要简化第一个过程,你可以使用以下方法根据条件渲染 selected
属性:
@foreach (var kvp in ListOfValues)
{
<option value="@kvp.Key" selected="@(kvp.Key==SelectedValue)">
@kvp.Value
</option>
}
英文:
If you wanna render selected
attribute via
@(kvp.Key == SelectedValue ? "selected" : "")
It will report an error:
Failed to execute 'setAttribute' on 'Element': '@(kvp.Key' 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)
{
<option value="@kvp.Key" selected="@(kvp.Key==SelectedValue)">
@kvp.Value
</option>
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论