Добавление html ввода внутри ярлыка html

Итак, я использую Twitter Bootstrap, и большинство моих форм выглядят фантастически с этим

       <div class="control-group">
            @Html.LabelFor(m => m.Prop)
            <div class="controls">
                @Html.EditorFor(m => m.Prop)
            </div>
            @Html.ValidationMessageFor(model => model.Prop)
        </div>

Единственная проблема - с радио-кнопками и флажками. Twitter Bootstrap вызывает ярлыки стиля HTML5, которые включают в себя радио или флажок ввода INSIDE тег метки, как этот

        <label class="checkbox">
           <input type="checkbox"> Check me out
        </label>

Если я не могу создать их с помощью @Html или перегрузки, я могу хотя бы получить текст, созданный Labelfor?

        <label class="checkbox">
           @Html.EditorFor(m=> m.Prop)
           @Html.TheVariableThatContainsTheTextThatLabelForUsesFor(m => m.Prop)
        </label>

Ответ 1

Почему вы не можете создать их с помощью @Html. Если вы напишете свой собственный метод расширения (см. Ниже), который должен это сделать, нет?


public static class HtmlHelperExtensions
    {
        public static MvcHtmlString MyCheckBoxFor<TModel>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, bool>> expression, object htmlLabelAttributes = null, object htmlCheckBoxAttributes = null)
        {
            var checkbox = htmlHelper.CheckBoxFor(expression, htmlCheckBoxAttributes);

            var labelTag = new TagBuilder("label");
            labelTag.AddCssClass("checkbox");
            labelTag.MergeAttributes(HtmlHelper.AnonymousObjectToHtmlAttributes(htmlLabelAttributes));
            labelTag.InnerHtml = checkbox.ToString();

            return new MvcHtmlString(labelTag.ToString());
        }
    }

EDIT:

Как насчет этой пересмотренной версии. Это точно отражает то, что делает метка.


public static class HtmlHelperExtensions
{
    public static MvcHtmlString MyCheckBoxFor<TModel>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, bool>> expression, object htmlLabelAttributes = null, object htmlCheckBoxAttributes = null)
    {
        var checkbox = htmlHelper.CheckBoxFor(expression, htmlCheckBoxAttributes);

        var labelTag = new TagBuilder("label");
        var checkboxName = ExpressionHelper.GetExpressionText(expression);
        labelTag.AddCssClass("checkbox");
        labelTag.MergeAttributes(HtmlHelper.AnonymousObjectToHtmlAttributes(htmlLabelAttributes));
        labelTag.InnerHtml = checkbox.ToString() + LabelHelper(ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData), checkboxName);

        return new MvcHtmlString(labelTag.ToString());
    }

    private static MvcHtmlString LabelHelper(ModelMetadata metadata, string fieldName)
    {
        string labelText;
        var displayName = metadata.DisplayName;

        if (displayName == null)
        {
            var propertyName = metadata.PropertyName;

            labelText = propertyName ?? fieldName.Split(new[] { '.' }).Last();
        }
        else
        {
            labelText = displayName;
        }

        if (string.IsNullOrEmpty(labelText))
        {
            return MvcHtmlString.Empty;
        }

        return new MvcHtmlString(labelText);
    }
}

Я должен отметить, что с MVC 4 есть DisplayNameFor Helper, так что бизнес целых ярлыков может быть немного упрощен.

Ответ 2

Коснувшись того, что Мирко упомянул о MVC 4, это код, который я использую в представлении (без специального помощника).

<div class="checkbox">
    <label>
        @Html.CheckBoxFor(m => m.RememberMe) @Html.DisplayNameFor(m => m.RememberMe)
    </label>
</div>

Ответ 3

Я только что построил решение, которое отражает способ работы форм в ASP.NET MVC.

@using (Html.BeginLabelFor(m => m.CheckMe, new { @class = "checkbox" })) {
    @Html.CheckBoxFor(m => m.CheckMe)
}

Это отображает вложенную структуру, позволяя вам использовать обычные HTML-хелперы для флажков и переключателей.

<label class="checkbox" for="CheckMe">
    <input type="checkbox" name="CheckMe" value="true" /> Hey, Check Me!
</label>

BeginLabel и BeginLabelFor поддерживают те же подписи, что и Label и LabelFor, соответственно.

https://github.com/toddlucas/bootstrap-mvc.net

Я надеюсь, что кто-то найдет это полезным.

Edit:

Другая альтернатива, которая используется в новых шаблонах MVC Visual Studio 2013, заключается в следующем:

<div class="checkbox">
    @Html.CheckBoxFor(m => m.CheckMe)
    @Html.LabelFor(m => m.CheckMe)
</div>

В новых шаблонах используется Twitter Bootstrap 3.0, который следует тому же соглашению, что и 2.x.

Ответ 4

Моим окончательным решением является помощник Custom Bootstrap Label

    public static MvcHtmlString BootstrapCheckBoxFor<TModel>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, bool>> expression, object htmlLabelAttributes = null, object htmlCheckBoxAttributes = null)
    {
        var checkbox = htmlHelper.CheckBoxFor(expression, htmlCheckBoxAttributes);
        var label = htmlHelper.LabelFor(expression, htmlCheckBoxAttributes);
        string text = Regex.Match(label.ToString(), "(?<=^|>)[^><]+?(?=<|$)").Value;

        var labelTag = new TagBuilder("label");
        labelTag.AddCssClass("checkbox");
        labelTag.MergeAttributes(HtmlHelper.AnonymousObjectToHtmlAttributes(htmlLabelAttributes));
        labelTag.InnerHtml = checkbox.ToString() + text;

        return new MvcHtmlString(labelTag.ToString());
    }

Ответ 5

Вместо того, чтобы возвращать значение метода LabelFor прямо следующим образом:

@Html.LabelFor(m => m.Prop, "Text <a>HTML Tag</a>")

Сначала установите выход в переменное декодирование, которое и рендер, декодированный текст:

MvcHtmlString label = Html.LabelFor(m => m.Prop, "Text <a>HTML Tag</a>");
@Html.Raw(HttpUtility.HtmlDecode(label.ToString()))