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

Question

我有一个搜索框,我想用Bootstrap样式自定义.textboxaspx中的代码是:

@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)