javascript MVC3 (Razor) 单选按钮检查

MVC3 (Razor) radio buttons checks

提问by Ars_n

In first,I have to create some radio buttons in a mvc3 partial view.

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

When I'm on the screen I need to select only one radio button and retrieved a specific value.

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

How can I do this (with JS or C# for example) ?

我该怎么做（例如使用 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>

Thanks in advance !

提前致谢 ！

Ars_n

Ars_n

回答by middelpat

So you need a group of radiobuttons? I use a custom helper for that.

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

Code for the helper:

帮手的代码：

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());
    }

now in your view you can just use:

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

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

Now you'll only be able to check one of the radiobuttons at the time. The checked value is stored in model.yourproperty.

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

回答by webdeveloper

Look at example to understand how radio buttons are grouped: example

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

You need same nameattribute, like here:

您需要相同的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 />

Your example:

你的例子：

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

Only checked value you will receive in controller action on post.

您只会在控制器操作中收到选中的值。

回答by Mario Sannum

I'm guessing you want to post this to an controller method, so maybe this is what you are trying to do:

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

Let's say the controller method takes a parameter called myParameter, then you would need to set the name of the radio buttons to the same to group them, then set the value to whatever you need:

假设控制器方法接受一个名为 的参数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>

回答by Ars_n

Thanks for your answers.

感谢您的回答。

I finally create one group for each radio buttons. And I call the property in rb object parameter.

我最终为每个单选按钮创建了一个组。我在 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>

So in this case I can only check one radio button at the same time and retrieved the property value from the respective ViewModel.

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

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