14

だから私はTwitterBootstrapを使用していて、私のフォームのほとんどはこれで素晴らしく見えます

       <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 に答える
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>

新しいテンプレートは、2.x と同じ規則に従う Twitter Bootstrap 3.0 を使用します。

于 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 に答える