.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 속성은 다른 라디오 단추가 제공됩니다.

저의 경우, 그룹에 있어야 하는 라디오 버튼 모음이 있었습니다.방금 'Selected' 속성을 모델에 포함했습니다.그런 다음, 라디오 버튼을 출력하는 루프에서...

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

이렇게 하면 모든 라디오 단추에 대해 이름이 동일합니다.양식이 게시되면 '선택됨' 속성은 범주 제목(또는 ID 또는 기타)과 동일하며, 이를 사용하여 관련 라디오 버튼의 바인딩을 업데이트할 수 있습니다.

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

최선의 방법은 아닐 수도 있지만, 효과가 있습니다.

이름 속성이 다른 경우에는 JQuery를 통해 무선 그룹을 가장 쉽게 제어할 수 있습니다.옵션을 선택하면 JQuery를 사용하여 다른 옵션의 선택을 취소합니다.

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