Кнопка Radio генерирует повторяющиеся идентификаторы HTML

Кажется, что вспомогательный помощник ASP.NET MVC2 по умолчанию генерирует повторяющиеся HTML-идентификаторы при использовании такого кода (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:

<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" />

Это ясно показывает проблему. Поэтому я должен злоупотреблять Помощником или чем-то еще.

Я могу вручную указать атрибут id как html, но тогда я не могу гарантировать, что он будет уникальным.

Итак, вопрос в том, как убедиться, что идентификаторы, сгенерированные помощником RadioButton, уникальны для каждого значения, а все еще сохраняют соглашения для генерации этих идентификаторов (поэтому вложенные модели (желательно не генерировать идентификаторы вручную).

Ответ 1

Я столкнулся с той же проблемой. Образцы идентификаторов вручную кажутся единственным решением. Если вам не нужны идентификаторы для чего-либо (например, javascript), но хотите, чтобы он был уникальным, вы могли бы создавать для них Гиды:

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

Более элегантным решением было бы создать собственный метод расширения на HtmlHelper, чтобы отделить логику создания идентификатора от представления. Что-то вроде:

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

Вспомогательный метод может использовать данные ViewContext и Model для создания более значимых идентификаторов.

UPDATE:

Если вы используете EditorTemplates для визуализации элемента управления, например,

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

Затем внутри MyUserControl.ascx(помещается в ~/Views/Shared/EditorTemplates) вы можете использовать свойство ViewData.TemplateInfo.HtmlFieldPrefix для доступа к родительскому идентификатору элемента управления или Html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldId("MyPostfixPart") для генерации префикса id. Эти методы могут быть использованы в вспомогательном расширении выше. То же самое работает с элементами управления с Html.Editor(...) и Html.EditorForModel(...). В помощнике Html.Editor вы также можете указать htmlFiledName вручную, если хотите.

Когда вы вставляете элемент управления с помощью

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

генерация значащих идентификаторов сложнее, потому что Html.Partial не будет предоставлять информацию о префиксе - ViewData.TemplateInfo.HtmlFieldPrefix будет всегда пустым. Тогда единственным решением было бы передать префикс вручную элементу управления ascx в качестве ключа ViewData как поле модели, которое не является таким элегантным решением, как предыдущее.

Ответ 2

В дополнение к ответу PanJanek:
Если вам действительно не нужны элементы с идентификатором, вы также можете указать id="" в параметре htmlAttributes (т.е. new { id="" }) помощников. Это приведет к тому, что атрибут id будет полностью исключен в сгенерированном html.

источник: fooobar.com/questions/167598/...

Ответ 3

Если вам нужно получить доступ к переключателям через jQuery, я обнаружил, что часто лучшее место для установки идентификатора будет на странице, близкое к предполагаемому использованию. Вот как я сделал то же самое:

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

Затем мой jQuery:

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