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

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) ?

            <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

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

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) ?

            <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

• c#
• javascript
• asp.net-mvc-3
• razor
• radio-button

4 Answers 4

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.

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

You need same name attribute, like here:

<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.

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:

<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>

Thanks for your answers.

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

            <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.

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