0

我正在为基于不可避免的 Twitter Bootstrap 框架的应用程序创建一些基于 Fubu 项目的HtmlTags 库的 HTML Helper 方法。对于大多数简单的控件，我直接子类化 HtmlTag 没有问题；然而，当涉及到通常需要嵌套在 div 标签中的更复杂的控件时，它会变得更复杂一些。

例如，我有一个 TextboxWidget，它的实现如下：

public class TextboxWidget : HtmlTag
{
    public TextboxWidget() : base("input")
    {
        Attr("type", "text");
        AddClass("form-control");
        NoClosingTag();
    }
}

这很简单。然后可以像这样使用它（使用其他一些扩展方法）：

@Html.Bootstrap().Textbox(m => m.FirstName).Data("bind", "Employee.FirstName")

给出想要的结果。

我对 DatepickerWidget 的实现是这样的：

public class DatepickerWidget : HtmlTag
{
    public DatepickerWidget() : base("input")
    {
        Attr("type", "text");
        Attr("role", "datepicker");
        AddClasses("form-control", "datepicker");
        Data("dateformat", "dd/mm/yy");

        Button = new HtmlTag("span").AddClass("input-group-addon");
        var icon = new HtmlTag("i").AddClass("icon-calendar");

        Button.Append(icon);
        Append(Button);
        WrapWith(new DivTag().AddClass("input-group"));
    }
}

然后像这样使用它：

@Html.Bootstrap().Datepicker(m => m.StartDate).DataBind("click", "fnProcessClick").AddClass("special-offer")

但由于某种原因，没有呈现包装 div 标签。如果我为控件编写一些单元测试，那么我可以在对象模型中看到 div 标记（在 Parent 属性中），但它永远不会在页面上变成 HTML。

我真的很想将主输入元素作为控件的焦点元素，所以所有漂亮的 HtmlTag 扩展都挂在小部件上；我是否必须通过为控件中的每个单独元素公开修饰符来遵循 Jimmy Bogard 显示的路线？

4

1 回答 1

1

WrapWith返回一个新的 HtmlTag；在您的实现中，DatePickerWidget它基本上只是被忽略了，而 DatePickerWidget 仍然只是您基于它的“输入”标签。

一种选择是WrapWith从您的类中删除该行，稍后添加包装器：

@Html.Bootstrap().Datepicker(m => m.StartDate).DataBind("click", "fnProcessClick").AddClass("special-offer").WrapWith(new DivTag().AddClass("input-group"))

如果这很麻烦，您可以通过为它的类添加一个方法来缩短它：

 public HtmlTag WrapWithInputGroup()
 {
    return WrapWith(new DivTag().AddClass("input-group"));
 }

@Html.Bootstrap().Datepicker(m => m.StartDate).DataBind("click", "fnProcessClick").AddClass("special-offer").WrapWithInputGroup()

另一个按照您期望的原始类的工作方式工作的选项是覆盖ToString()：

public class DatepickerWidget2 : HtmlTag
{
    public DatepickerWidget2()
        : base("input")
    {
        Attr("type", "text");
        Attr("role", "datepicker");
        AddClasses("form-control", "datepicker");
        Data("dateformat", "dd/mm/yy");

        var Button = new HtmlTag("span").AddClass("input-group-addon");
        var icon = new HtmlTag("i").AddClass("icon-calendar");

        Button.Append(icon);
        Append(Button);
    }

    public override string ToString()
    {
        return WrapWith(new DivTag().AddClass("input-group")).ToString();
    }
}

巨大的警告：在我的快速而肮脏的测试中，这可行，但这可能与 HtmlTags 的原始设计背道而驰。我会谨慎使用这个解决方案（直到/除非像 Jeremy Miller 这样的人出现在这里并说这是正确的解决方案）。

于 2014-10-27T21:39:17.763 回答