.net MVC RadioButtonFor ()를 사용할 때 하나만 선택할 수 있도록 그룹화하는 방법은 무엇입니까?

.net MVC RadioButtonFor ()를 사용할 때 하나만 선택할 수 있도록 그룹화하는 방법은 무엇입니까?

---

이것은 나를 당황하게 만들었고, 라디오 버튼을 생성하는 루프가있는 강력한 형식의 뷰를 가지고 있습니다.

<% foreach (QuestionAnswer qa in Model.QuestionAnswers)
   { %>
    <%= Html.RadioButtonFor(model => model.QuestionAnswers[(int)qa.QuestionID - 1].AnswerValue, "Checked" ) %>
    <%= Html.Encode(qa.OptionValue) %>
<% } %>

잘 렌더링되지만 이름이 동일하지 않으므로 라디오 버튼을 두 개 이상 선택할 수 있습니다. 라디오 버튼을 하나만 선택할 수 있도록 그룹화하려면 어떻게해야합니까?

어떤 도움을 주시면 감사하겠습니다!

---

Html.RadioButtonFor ()의 첫 번째 매개 변수는 사용중인 속성 이름이어야하고 두 번째 매개 변수는 특정 라디오 버튼의 값이어야합니다. 그러면 이름 속성 값이 같고 도우미는 속성 값과 일치 할 때 주어진 라디오 버튼을 선택합니다.

예:

<div class="editor-field">
    <%= Html.RadioButtonFor(m => m.Gender, "M" ) %> Male
    <%= Html.RadioButtonFor(m => m.Gender, "F" ) %> Female
</div>

다음은보다 구체적인 예입니다.

"DeleteMeQuestion"이라는 이름의 빠른 MVC 프로젝트를 만들었습니다 (DeleteMe 접두사이므로 잊어 버린 후에 나중에 제거 할 수 있음을 알 수 있습니다).

다음 모델을 만들었습니다.

namespace DeleteMeQuestion.Models
{
    public class QuizModel
    {
        public int ParentQuestionId { get; set; }
        public int QuestionId { get; set; }
        public string QuestionDisplayText { get; set; }
        public List<Response> Responses { get; set; }

        [Range(1,999, ErrorMessage = "Please choose a response.")]
        public int SelectedResponse { get; set; }
    }

    public class Response
    {
        public int ResponseId { get; set; }
        public int ChildQuestionId { get; set; }
        public string ResponseDisplayText { get; set; }
    }
}

재미를 위해 모델에 간단한 범위 검사기가 있습니다. 다음으로 다음 컨트롤러를 만들었습니다.

namespace DeleteMeQuestion.Controllers
{
    [HandleError]
    public class HomeController : Controller
    {
        public ActionResult Index(int? id)
        {
            // TODO: get question to show based on method parameter 
            var model = GetModel(id);
            return View(model);
        }

        [HttpPost]
        public ActionResult Index(int? id, QuizModel model)
        {
            if (!ModelState.IsValid)
            {
                var freshModel = GetModel(id);
                return View(freshModel);
            }

            // TODO: save selected answer in database
            // TODO: get next question based on selected answer (hard coded to 999 for now)

            var nextQuestionId = 999;
            return RedirectToAction("Index", "Home", new {id = nextQuestionId});
        }

        private QuizModel GetModel(int? questionId)
        {
            // just a stub, in lieu of a database

            var model = new QuizModel
            {
                QuestionDisplayText = questionId.HasValue ? "And so on..." : "What is your favorite color?",
                QuestionId = 1,
                Responses = new List<Response>
                                                {
                                                    new Response
                                                        {
                                                            ChildQuestionId = 2,
                                                            ResponseId = 1,
                                                            ResponseDisplayText = "Red"
                                                        },
                                                    new Response
                                                        {
                                                            ChildQuestionId = 3,
                                                            ResponseId = 2,
                                                            ResponseDisplayText = "Blue"
                                                        },
                                                    new Response
                                                        {
                                                            ChildQuestionId = 4,
                                                            ResponseId = 3,
                                                            ResponseDisplayText = "Green"
                                                        },
                                                }
            };

            return model;
        }
    }
}

마지막으로 모델을 사용하는 다음 뷰를 만들었습니다.

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<DeleteMeQuestion.Models.QuizModel>" %>

<asp:Content ContentPlaceHolderID="TitleContent" runat="server">
    Home Page
</asp:Content>

<asp:Content ContentPlaceHolderID="MainContent" runat="server">

    <% using (Html.BeginForm()) { %>

        <div>

            <h1><%: Model.QuestionDisplayText %></h1>

            <div>
            <ul>
            <% foreach (var item in Model.Responses) { %>
                <li>
                    <%= Html.RadioButtonFor(m => m.SelectedResponse, item.ResponseId, new {id="Response" + item.ResponseId}) %>
                    <label for="Response<%: item.ResponseId %>"><%: item.ResponseDisplayText %></label>
                </li>
            <% } %>
            </ul>

            <%= Html.ValidationMessageFor(m => m.SelectedResponse) %>

        </div>

        <input type="submit" value="Submit" />

    <% } %>

</asp:Content>

귀하의 상황을 이해 했으므로 사용 가능한 답변 목록과 함께 질문이 있습니다. 각 답변은 다음 질문을 지시합니다. 내 모델과 TODO 댓글에서 의미가 있기를 바랍니다.

이렇게하면 이름 속성은 같지만 ID 속성은 다른 라디오 버튼이 제공됩니다.

---

제 경우에는 그룹에 있어야하는 라디오 버튼 모음이있었습니다. 모델에 '선택됨'속성을 포함했습니다. 그런 다음 루프에서 라디오 버튼을 출력하려면 ...

@Html.RadioButtonFor(m => Model.Selected, Model.Categories[i].Title)

This way, the name is the same for all radio buttons. When the form is posted, the 'Selected' property is equal to the category title (or id or whatever) and this can be used to update the binding on the relevant radiobutton, like this...

model.Categories.Find(m => m.Title.Equals(model.Selected)).Selected = true;

May not be the best way, but it does work.

---

In cases where the name attribute is different it is easiest to control the radio group via JQuery. When an option is selected use JQuery to un-select the other options.

참고URL : https://stackoverflow.com/questions/3114689/when-using-net-mvc-radiobuttonfor-how-do-you-group-so-only-one-selection-can