Khi sử dụng .net MVC RadioButtonFor(), làm thế nào để bạn nhóm để chỉ có một lựa chọn có thể được thực hiện?

Question

Cái này đã cho tôi bối rối, tôi có một cái nhìn mạnh mẽ gõ có vòng lặp này để tạo radiobutton:

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

Nó ám tốt, nhưng kể từ khi tên không giống nhau, bạn có thể chọn nhiều hơn 1 RadioButton. Làm thế nào tôi có thể nhóm chúng để chỉ có thể chọn 1 radio?

Mọi trợ giúp sẽ được đánh giá cao!

Answer 1

Tham số đầu tiên của Html.RadioButtonFor() phải là tên thuộc tính bạn đang sử dụng và tham số thứ hai phải là giá trị của nút radio cụ thể đó. Sau đó, chúng sẽ có cùng giá trị thuộc tính name và helper sẽ chọn nút radio đã cho khi/nếu nó khớp với giá trị thuộc tính.

Ví dụ:

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

Dưới đây là một ví dụ cụ thể hơn:

tôi đã thực hiện một dự án MVC nhanh chóng có tên là "DeleteMeQuestion" (DeleteMe tiền tố vì vậy tôi biết rằng tôi có thể loại bỏ nó sau này sau khi Tôi quên nó đi.

tôi đã thực hiện mô hình sau:

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

Có một validator phạm vi đơn giản trong mô hình, chỉ để cho vui. Tiếp theo, tôi đã thực hiện bộ điều khiển sau:

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

Cuối cùng, tôi đã nhìn sau mà làm cho việc sử dụng mô hình:

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

Như tôi hiểu hoàn cảnh của bạn, bạn có thắc mắc với một danh sách câu trả lời có sẵn. Mỗi câu trả lời sẽ quyết định câu hỏi tiếp theo. Hy vọng rằng có ý nghĩa từ mô hình của tôi và nhận xét TODO.

Nút này cung cấp cho bạn các nút radio có cùng thuộc tính tên nhưng thuộc tính ID khác nhau.

Answer 2

Trong trường hợp thuộc tính tên khác nhau, cách dễ nhất là kiểm soát nhóm radio qua JQuery. Khi một tùy chọn được chọn, sử dụng JQuery để bỏ chọn các tùy chọn khác.

Answer 3

Trong trường hợp của tôi, tôi có một bộ sưu tập các nút radio cần thiết trong một nhóm. Tôi chỉ bao gồm thuộc tính 'Đã chọn' trong mô hình. Sau đó, trong vòng lặp xuất ra các nút vô tuyến chỉ cần thực hiện ...

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

Bằng cách này, tên này giống nhau cho tất cả các nút radio. Khi biểu mẫu được đăng tải, các tài sản 'chọn' là tương đương với tiêu đề mục (hoặc id hoặc bất cứ điều gì) và điều này có thể được sử dụng để cập nhật các ràng buộc đối với các radiobutton có liên quan, như thế này ...

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

tháng không phải là cách tốt nhất, nhưng nó hoạt động.