MVC3 (Razor) 单选按钮检查

Question

首先，我必须在 mvc3 局部视图中创建一些单选按钮。

当我在屏幕上时，我只需要选择一个单选按钮并检索一个特定值。

我该怎么做（例如使用 JS 或 C#）？

            <div id="UserDeleteInfosField">
                <p>
                    @Html.RadioButton("HasUserLeave", new { id = "rb1" })
                    @UserAccountResources.UserLeave
                    @Html.HiddenFor(x => x.UserLeave)   
                </p>
                <br />
                <p>
                    @Html.RadioButton("HasUserTransfer", new { id = "rb2" })
                    @UserAccountResources.UserTransfer
                    @Html.HiddenFor(x => x.UserTransfer)   
                </p>
                <br />
                <p>
                    @Html.RadioButton("HasUserDetachment", new { id = "rb3" })
                    @UserAccountResources.UserDetachment
                    @Html.HiddenFor(x => x.UserDetachment)   
                </p>
                <br />
                <p>
                    @Html.RadioButton("HasUserRetirement", new { id = "rb4" })
                    @UserAccountResources.UserRetirement
                    @Html.HiddenFor(x => x.UserRetirement)   
                </p>
                <br />
                <p>
                    @Html.RadioButton("HasUserStatus", new { id = "rb5" })
                    @UserAccountResources.UserStatus
                    @Html.HiddenFor(x => x.UserStatus)   
                </p>
            </div>

提前致谢！

Ars_n

Answer 1

所以你需要一组单选按钮？我为此使用了一个自定义助手。

助手代码：

public static MvcHtmlString RadioButtonForSelectList<TModel, TProperty>(
       this HtmlHelper<TModel> htmlHelper,
       Expression<Func<TModel, TProperty>> expression,
       IEnumerable<SelectListItem> listOfValues)
    {
        var metaData = ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData);
        var sb = new StringBuilder();

        if (listOfValues != null)
        {
            // Create a radio button for each item in the list 
            foreach (SelectListItem item in listOfValues)
            {
                // Generate an id to be given to the radio button field 
                var id = string.Format("{0}_{1}", metaData.PropertyName, item.Value);

                // Create and populate a radio button using the existing html helpers 
                var label = htmlHelper.Label(id, HttpUtility.HtmlEncode(item.Text));

                var radio = htmlHelper.RadioButtonFor(expression, item.Value, new { id = id }).ToHtmlString();

                if (item.Selected)
                {
                    radio = htmlHelper.RadioButtonFor(expression, item.Value, new { id = id, @checked = "checked", }).ToHtmlString();
                }


                // Create the html string that will be returned to the client 
                // e.g. <input data-val="true" data-val-required="You must select an option" id="TestRadio_1" name="TestRadio" type="radio" value="1" /><label for="TestRadio_1">Line1</label> 
                sb.AppendFormat("<div class=\"RadioButton\">{0}{1}</div>", radio, label);
            }
        }

        return MvcHtmlString.Create(sb.ToString());
    }

现在在您看来，您可以使用：

@Html.RadioButtonForSelectList(model => model.yourproperty, Model.listUsedToPopulate)

现在您当时只能选中其中一个单选按钮。检查的值存储在 model.yourproperty 中。

Answer 2

查看示例以了解单选按钮的分组方式：example

您需要相同的name 属性，如下所示：

<input type="radio" name="group2" value="Water" /> Water<br />
<input type="radio" name="group2" value="Beer" /> Beer<br />
<input type="radio" name="group2" value="Wine" checked /> Wine<br />

你的例子：

@Html.RadioButton("SameGroup", "rb1")
@Html.RadioButton("SameGroup", "rb2")
@Html.RadioButton("SameGroup", "rb3")
@Html.RadioButton("SameGroup", "rb4")
@Html.RadioButton("SameGroup", "rb5")

只有检查过的值才会在发布后的控制器操作中收到。

Answer 3

我猜你想把它发布到一个控制器方法，所以也许这就是你想要做的：

假设控制器方法接受一个名为 myParameter 的参数，那么您需要将单选按钮的名称设置为相同的名称以对它们进行分组，然后将值设置为您需要的任何值：

<div id="UserDeleteInfosField">
    <p>
        @Html.RadioButton("myParameter", UserAccountResources.UserLeave)
        @UserAccountResources.UserLeave
        @Html.HiddenFor(x => x.UserLeave)   
    </p>
    <br />
    <p>
        @Html.RadioButton("myParameter", UserAccountResources.UserTransfer)
        @UserAccountResources.UserTransfer
        @Html.HiddenFor(x => x.UserTransfer)   
    </p>
    <br />
    <p>
        @Html.RadioButton("myParameter", UserAccountResources.UserDetachment)
        @UserAccountResources.UserDetachment
        @Html.HiddenFor(x => x.UserDetachment)   
    </p>
    <br />
    <p>
        @Html.RadioButton("myParameter", UserAccountResources.UserRetirement)
        @UserAccountResources.UserRetirement
        @Html.HiddenFor(x => x.UserRetirement)   
    </p>
    <br />
    <p>
        @Html.RadioButton("myParameter", UserAccountResources.UserStatus)
        @UserAccountResources.UserStatus
        @Html.HiddenFor(x => x.UserStatus)   
    </p>
</div>

Answer 4

感谢您的回答。

我最终为每个单选按钮创建了一个组。 我在 rb 对象参数中调用该属性。

            <div id="UserDeleteInfosField">
                <p>
                    @Html.RadioButton("RbDeleteGroup", Model.UserLeave)
                    @UserAccountResources.UserLeave
                    @Html.HiddenFor(x => x.UserLeave)   
                </p>
                <br />
                <p>
                    @Html.RadioButton("RbDeleteGroup", Model.UserTransfer)
                    @UserAccountResources.UserTransfer
                    @Html.HiddenFor(x => x.UserTransfer)   
                </p>
                <br />
                <p>
                    @Html.RadioButton("RbDeleteGroup", Model.UserDetachment)
                    @UserAccountResources.UserDetachment
                    @Html.HiddenFor(x => x.UserDetachment)   
                </p>
                <br />
                <p>
                    @Html.RadioButton("RbDeleteGroup", Model.UserRetirement)
                    @UserAccountResources.UserRetirement
                    @Html.HiddenFor(x => x.UserRetirement)   
                </p>
                <br />
                <p>
                    @Html.RadioButton("RbDeleteGroup", Model.UserStatus)
                    @UserAccountResources.UserStatus
                    @Html.HiddenFor(x => x.UserStatus)   
                </p>
            </div>

所以在这种情况下，我只能同时选中一个单选按钮并从相应的 ViewModel 中检索属性值。

    [Display(Name = "UserAccountDeleteInfos", ResourceType = typeof(UserAccountResources))]
    public string UserLeave
    {
        get { return UserAccountResources.UserLeave; }
    }