RadioButtonlist được đánh máy mạnh

Question

Tôi muốn nhận một số tùy chọn (nói phương thức thanh toán tiền mặt, thẻ tín dụng, v.v.) và liên kết các nút này với các nút radio. Tôi tin rằng không có RadioButtonList trong MVC 3.

Ngoài ra, khi radio bị ràng buộc, tôi muốn hiển thị tùy chọn đã chọn trước đó cho người dùng trong khi chỉnh sửa câu trả lời.

Answer 1

Như mọi khi bạn bắt đầu với một mô hình:

public enum PaiementMethod 
{ 
    Cash, 
    CreditCard, 
} 

public class MyViewModel 
{ 
    public PaiementMethod PaiementMethod { get; set; } 
} 

sau đó một bộ điều khiển:

public class HomeController : Controller 
{ 
    public ActionResult Index() 
    { 
     var model = new MyViewModel(); 
     return View(model); 
    } 

    [HttpPost] 
    public ActionResult Index(MyViewModel model) 
    { 
     return View(model); 
    } 
} 

và cuối cùng là một cái nhìn:

@model MyViewModel 
@using (Html.BeginForm()) 
{ 
    <label for="paiement_cash">Cash</label> 
    @Html.RadioButtonFor(x => x.PaiementMethod, "Cash", new { id = "paiement_cash" }) 

    <label for="paiement_cc">Credit card</label> 
    @Html.RadioButtonFor(x => x.PaiementMethod, "CreditCard", new { id = "paiement_cc" }) 

    <input type="submit" value="OK" /> 
} 

Và nếu bạn muốn có một số giải pháp chung chung hơn mà đóng gói này trong một helper bạn có thể tìm thấy following answer hữu ích.

Answer 2

Bạn nên ràng buộc lựa chọn của bạn để SelectList trong ViewModel và thiết lập thuộc tính Selected để đúng đối với chọn trước tùy chọn

Answer 3

Đây là cách tôi thích để ràng buộc RadioButtonLists. Mô hình khung nhìn có một bộ sưu tập các đối tượng được đánh máy mạnh mẽ của tôi. Ví dụ, có thể PaymentOptions là một bảng mã. Cùng với bộ sưu tập là một SelectedPaymentOptionKey (hoặc Selected * Id nếu bạn tiền tố khóa chính của bạn với Id). Ban đầu phím này sẽ được mặc định là 0, nhưng khi postback, nó sẽ giữ giá trị của mục đã chọn.

public class PaymentSelectionVM 
{ 
    public ICollection<PaymentOption> PaymentOptions { get; set; } 
    public int SelectedPaymentOptionKey { get; set; } 
} 

public ViewResult PaymentSelection() 
{ 
    var paymentOptions = db.PaymentOptions.ToList(); 
    return View(
    new PaymentSelectionVM { 
     PaymentOptions = paymentOptions, 

     //This is not required, but shows how to default the selected radiobutton 
     //Perhaps you have a relationship between a Customer and PaymentOption already, 
     //SelectedPaymentOptionKey = someCustomer.LastPaymentOptionUsed.PaymentOptionKey 
     // or maybe just grab the first one(note this would NullReferenceException on empty collection) 
     //SelectedPaymentOptionKey = paymentOptions.FirstOrDefault().PaymentOptionKey 
    }); 
} 

Sau đó, trong Xem:

@foreach (var opt in Model.PaymentOptions) 
{   
    @*Any other HTML here that you want for displaying labels or styling*@ 
    @Html.RadioButtonFor(m => m.SelectedPaymentOptionKey, opt.PaymentOptionKey) 
} 

Các m.SelectedPaymentOptionKey phục vụ hai mục đích. Đầu tiên, nó nhóm các nút Radio với nhau để lựa chọn là loại trừ lẫn nhau (tôi sẽ khuyến khích bạn sử dụng một cái gì đó như FireBug để kiểm tra html được tạo ra chỉ để hiểu biết của bạn. Điều tuyệt vời về MVC là HTML được tạo ra khá cơ bản và tiêu chuẩn vì vậy nó không khó cho bạn để có thể dự đoán được hành vi của quan điểm của bạn. Có rất ít ma thuật xảy ra ở đây.). Thứ hai, nó sẽ giữ giá trị của mục được chọn trên postback.

Và cuối cùng trong bài handler chúng ta có SelectedPaymentOptionKey sẵn:

[HttpPost] 
public ActionResult PaymentSelection(PaymentSelectionVM vm) 
{ 
    currentOrder.PaymentOption = db.PaymentOptions.Find(vm.SelectedPaymentOptionKey); 
    .... 
} 

Ưu điểm của việc này qua sử dụng SelectListItems là bạn phải truy cập vào nhiều tài sản của đối tượng trong trường hợp bạn đang hiển thị một lưới/và cần hiển thị nhiều giá trị của đối tượng. Tôi cũng thích rằng không có chuỗi mã hóa cứng nào được truyền trong các trình trợ giúp Html như một số cách tiếp cận khác có.

Điểm bất lợi là bạn nhận được các nút radio mà tất cả đều có cùng một ID, đó không thực sự là một thực hành tốt. Điều này có thể dễ dàng được khắc phục bằng cách thay đổi điều này:

@Html.RadioButtonFor(m => m.SelectedPaymentOptionKey, opt.PaymentOptionKey, new { id = "PaymentOptions_" + opt.PaymentOptionKey}) 

Cuối cùng, xác thực là một chút kỳ quặc với hầu hết các kỹ thuật nút radio tôi đã xem. Nếu tôi thực sự cần nó, tôi sẽ dây một số jquery lên để cư một SelectedPaymentOptionsKey ẩn bất cứ khi nào các nút radio được nhấp vào, và đặt [Required] hoặc xác nhận khác trên trường ẩn.

Một cách giải quyết cho vấn đề xác nhận ASP.NET MVC 3 unobtrusive validation and radio buttons

này sẽ hứa hẹn nhưng tôi đã không có cơ hội để thử nghiệm nó: http://memoriesdotnet.blogspot.com/2011/11/mvc-3-radiobuttonlist-including.html