在我的 Blazor .RAZOR 页面中循环选项时，我无法设置单选框的 "checked" 选项

Question

我正在填充 Dictionary<String,String> 中的一组单选按钮，我希望在页面加载时默认选中第一个选项。但是，我正在尝试的东西不起作用。

这是此 .RAZOR 页面组件中的 Bootstrap 模态 window。

我第一次打开模式时，选择了正确的[第一个选项]。但是，每次我打开它时，总是选择最后一个选项。

// in class StringConstants:
public static Dictionary<String, String> COLOR_EXAMPLES = new Dictionary<String, String>()
{
    {"red","The color of a fire truck"},
    {"orange","The color of a carrot"},
    {"yellow","The color of a banana"},
    {"green","The color of grass"},
    {"blue","The color of the sky"},
    {"indigo","The color of blueberries"},
    {"violet","The color of an eggplant"}
};

// in the .RAZOR file
<div>
    @foreach (KeyValuePair<String, String> entry in StringConstants.COLOR_EXAMPLES)
    {
        <div>
            <input type="radio" id="theinput-@entry.Key" @(firstOptionExpended ? "checked" : "">
            <!-- OR -->
            <input type="radio" id="theinput-@entry.Key" checked='@firstOptionExpended ? "checked" : ""'>
            <label for="theinput-@entry.Key">@entry.Value</label>
        </div>
        firstOptionExpended = true;
    }
</div>

@code {
    bool firstOptionExpended = false;

    // I also tried this

    protected override void OnInitialized()
    {
        firstOptionExpended = false;
    }
}

Answer 1

您的代码中存在一些需要更正的缺陷。

首先，当在 Blazor 中将属性应用于 en 元素时，属性类似于 checked，当没有提供任何值时可以假定为 true，必须像这样提供：

<input type="checkbox" checked=@(IsChecked) />

其次，如果从 @( 开始执行内联，如果从 ) 开始则关闭该内联。在你的情况下：@(firstOptionExpended ? "checked" : "" 应该是：@(firstOptionExpended ? "checked" : "")

第三，单选按钮组必须命名： <input type="radio" name="theName" />

这是一个工作示例：

@page "/"

<div>
    @foreach (KeyValuePair<String, String> entry in COLOR_EXAMPLES)
    {
        <div>
            <input type="radio" id="theinput-@entry.Key" name="SelectColor" checked="@(!firstOpetionSelected)">
            <label for="theinput-@entry.Key">@entry.Value</label>
        </div>
        firstOpetionSelected = true;
    }
</div>

@code {
    bool firstOpetionSelected = false;

    public static Dictionary<String, String> COLOR_EXAMPLES = new Dictionary<String, String>()
    {
        {"red","The color of a fire truck"},
        {"orange","The color of a carrot"},
        {"yellow","The color of a banana"},
        {"green","The color of grass"},
        {"blue","The color of the sky"},
        {"indigo","The color of blueberries"},
        {"violet","The color of an eggplant"}
    };
}

Answer 2

顿悟后，我想出了一个对我有用的答案。

<div>
    @{
        bool firstOptionEnabled = true;
        @foreach (KeyValuePair<String, String> entry in StringConstants.COLOR_EXAMPLES)
        {
            <div>
                <input type="radio" name="theinput" id="theinput-@entry.Key" checked="@(firstOptionEnabled)">
                <label for="theinput-@entry.Key">@entry.Value</label>
            </div>
            firstOptionExpended = false;
        }
    }
</div>

这也是在 @Marius

的帮助下完成的

在我的 Blazor .RAZOR 页面中循环选项时，我无法设置单选框的 "checked" 选项

I cannot get the "checked" option of a Radio Box to set when looping through options in my Blazor .RAZOR page

blazor

blazor-server-side