14

所以我正在使用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 样式标签，其中包括像这样的标签标签内的单选或复选框输入

        <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>
4

5 回答 5

15

为什么不能用@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());
        }
    }

编辑：

这个修订版怎么样。这完全复制了标签的作用。


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，因此可以稍微简化整个标签业务。

于 2012-05-16T22:34:46.887 回答
11

谈到 Mirko 提到的关于 MVC 4 的内容，这是我在视图中使用的代码（没有自定义帮助程序）。

<div class="checkbox">
    <label>
        @Html.CheckBoxFor(m => m.RememberMe) @Html.DisplayNameFor(m => m.RememberMe)
    </label>
</div>
于 2013-08-09T19:56:32.920 回答
5

我刚刚构建了一个反映表单在 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

我希望其他人觉得这很有用。

编辑：

新的 Visual Studio 2013 MVC 模板中使用的另一种替代方法是执行以下操作：

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

新模板使用 Twitter Bootstrap 3.0，它遵循与 2.x 相同的约定。

于 2013-11-13T09:12:46.080 回答
2

我的最终解决方案是自定义引导标签助手

    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());
    }
于 2012-05-17T21:00:58.733 回答
2

而不是像这样直接渲染 LabelFor 方法的返回值：

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

首先将输出设置为 decode 的变量和解码文本的渲染：

MvcHtmlString label = Html.LabelFor(m => m.Prop, "Text <a>HTML Tag</a>");
@Html.Raw(HttpUtility.HtmlDecode(label.ToString()))
于 2017-04-06T14:48:36.403 回答