Question

我有一个我想用Bootstrap样式自定义的搜索框。 aspx中的textbox代码是：

@Html.TextBox("SearchString")

但是我得到了一个标准风格的textbox。否则，搜索器的按钮会显示为带有以下代码的引导样式：

<button class="btn" type="submit">Buscar</button>

所以我在项目中引用了bootstrap library。获得textbox正确风格的最佳方法是什么？

先谢谢你。

Answer 1

您可以通过将匿名对象传递给助手构造函数中的htmlAttributes属性来向您的Html助手添加类或ID。

@Html.TextBox("txtBox", null, new { @class = "your class name here", id = "your id name here" })

在Bootstrap中，您可能希望使用类form-group和form-control。文档http://getbootstrap.com/css/

中的更多信息

Answer 2

你可以这样做：

@Html.TextBox("SearchString", null, new {@class="form-control"})

如果要将按钮附加到文本框？

 <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
</div>

http://getbootstrap.com/components/#input-groups-buttons

您将<input>替换为@Html.TextBox("SearchString", null, new {@class="form-control"})

 <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      @Html.TextBox("SearchString", null, new {@class="form-control"})
</div>

使用HTML帮助：

如果你想要一个用于Bootstrap TextBox的HTML Helper，你可以这样做：

public static class MyHtmlHelpers
{
    public static MvcHtmlString BootStrapTextBoxFor<TModel, TProperty>(this HtmlHelper<TModel> helper, 
         Expression<Func<TModel, TProperty>> expression)
    {
        return helper.TextBoxFor(expression, new { @class = "form-control" });
    }
}

然后像这样使用：

@Html.BootStrapTextBoxFor(model => model.FirstName)

将引导程序样式放入MVC中的文本框以用于搜索框

2 个答案: