Radio Button tạo trùng lặp HTML id-s

Question

Dường như mặc định ASP.NET MVC2 Html helper tạo trùng lặp HTML ID khi sử dụng mã như thế này (EditorTemplates/UserType.ascx):

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<UserType>" %> 

<%: Html.RadioButton("", UserType.Primary, Model == UserType.Primary) %> 
<%: Html.RadioButton("", UserType.Standard, Model == UserType.Standard) %> 
<%: Html.RadioButton("", UserType.ReadOnly, Model == UserType.ReadOnly) %> 

HTML nó tạo ra là:

<input checked="checked" id="UserType" name="UserType" type="radio" value="Primary" /> 
<input id="UserType" name="UserType" type="radio" value="Standard" /> 
<input id="UserType" name="UserType" type="radio" value="ReadOnly" /> 

Điều đó cho thấy rõ ràng một vấn đề. Vì vậy, tôi phải sử dụng sai Helper hoặc một cái gì đó.

Tôi có thể chỉ định thuộc tính html id theo cách thủ công nhưng sau đó tôi không thể đảm bảo nó sẽ là duy nhất.

Vì vậy, câu hỏi là làm thế nào để chắc chắn rằng các ID được tạo ra bởi RadioButton helper là duy nhất cho mỗi giá trị và vẫn duy trì những quy ước để tạo ra những ID (mô hình để lồng nhau được tôn trọng? (Tốt nhất không tạo ID bằng tay .)

Answer 1

Tôi gặp phải vấn đề tương tự. ID specyfying thủ công có vẻ là giải pháp duy nhất.Nếu bạn không cần id cho bất cứ điều gì (như javascript), nhưng muốn nó là duy nhất bạn có thể tạo ra hướng dẫn cho họ :

<%: Html.RadioButton("", UserType.Primary, Model == UserType.Primary, new { id="radio" + Guid.NewGuid().ToString()}) %> 

Một giải pháp thanh lịch hơn sẽ là tạo phương pháp mở rộng của riêng bạn trên HtmlHelper để tách logic tạo ID khỏi chế độ xem. Một cái gì đó như:

public static class HtmlHelperExtensions 
{ 

    public static MvcHtmlString MyRadioButtonFor<TModel, TValue>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TValue>> expression, bool value) 
    { 
     string myId = // generate id... 
     return htmlHelper.RadioButtonFor(expression, value, new {id=myId}); 
    } 
} 

Phương thức trợ giúp có thể sử dụng dữ liệu ViewContext và Model để tạo ra nhiều ID đầy ý nghĩa hơn.

UPDATE:

Nếu bạn sử dụng EditorTemplates để render sự kiểm soát như thế này

<%= Html.EditorFor(m=>m.User, "MyUserControl") %> 

Sau đó bên trong MyUserControl.ascx (đặt trong ~/Views/Shared/EditorTemplates), bạn có thể sử dụng ViewData.TemplateInfo.HtmlFieldPrefix thuộc tính để truy cập ID kiểm soát chính hoặc Html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldId("MyPostfixPart") để tạo id được đặt trước. Các phương thức Theese có thể được sử dụng trong phần mở rộng của trình trợ giúp ở trên. Các tác phẩm tương tự với các nút điều khiển được hiển thị với Html.Editor(...) và Html.EditorForModel(...). Trong trình trợ giúp Html.Editor, bạn cũng có thể chỉ định htmlFiledName theo cách thủ công nếu bạn muốn.

Khi bạn nhúng sự kiểm soát với

<%= Html.Partial("UserControl", Model.User) %> 

thế hệ của các ID đầy ý nghĩa là khó khăn hơn vì Html.Partial sẽ không cung cấp thông tin về các tiền tố - những ViewData.TemplateInfo.HtmlFieldPrefix sẽ luôn luôn có sản phẩm nào. Sau đó, giải pháp duy nhất là chuyển tiền tố theo cách thủ công đến điều khiển ascx dưới dạng khóa Chế độ xem của trường mô hình không phải là giải pháp thanh lịch như trước đó.

Answer 2

Ngoài câu trả lời PanJanek của:
Nếu bạn không thực sự cần các yếu tố để có một id, bạn cũng có thể chỉ định id="" trong htmlAttributes (ví dụ: new { id="" }) tham số của những người giúp đỡ. Điều này sẽ dẫn đến thuộc tính id bị bỏ hoàn toàn trong html được tạo.

nguồn: https://stackoverflow.com/a/2398670/210336

Answer 3

Nếu bạn cần truy cập vào các nút radio qua jQuery, tôi thấy rằng thường là nơi tốt hơn để thiết lập id sẽ là trên trang, gần đến việc sử dụng dự định của họ. Đây là cách tôi đã làm như nhau:

@Html.Label(Resource.Question) 
@Html.RadioButtonFor(m => m.Question, true, new {id = "QuestionYes"}) Yes 
@Html.RadioButtonFor(m => m.Question, false, new {id = "QuestionNo"}) No 

Sau đó, jQuery tôi:

if ($("input[id='QuestionNo']").is(":checked")) { 
     $('#YesOptionalBlock').removeClass('showDiv'); 
     $('#YesOptionalBlock').addClass('hideDiv'); 
}