将引导样式放入 MVC 中的文本框以作为搜索框答案

【问题标题】：Put bootstrap style to a textbox in MVC for a search box将引导样式放入 MVC 中的文本框以作为搜索框
【发布时间】：2017-06-21 05:07:30
【问题描述】：

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

@Html.TextBox("SearchString")

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

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

所以我的项目中有bootstrap library 的引用。以正确样式获取 textbox 的最佳方法是什么？

先谢谢你了。

【问题讨论】：

将该类添加到您的助手应该适合您。看这里stackoverflow.com/questions/5435842/…
我正在使用 Razor 代码：@Html.TextBox("SearchString") 在这种情况下如何应用引导样式？
如果您点击我包含的链接，它将向您展示如何向助手添加类

标签： twitter-bootstrap asp.net-mvc-4

【解决方案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/

【讨论】：

【解决方案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)

【讨论】：