在当今快速发展的软件开发领域，用户界面（UI）设计的重要性日益凸显。对于许多.NET开发者来说，他们可能在UI设计方面缺乏足够的技能。幸运的是，Bootstrap框架的出现为开发者们带来了福音。Bootstrap是一个开源的前端框架，它提供了一套响应式的网页设计工具，可以帮助开发者快速构建美观且功能丰富的用户界面。本文将介绍一个名为Bootstrap Helpers的项目，它进一步简化了.NET开发者使用Bootstrap的过程。
Bootstrap Helpers项目最初是为了帮助.NET开发者更容易地使用Bootstrap框架。随着时间的推移，这个项目已经发展成为一个更加强大和灵活的工具。在2018年5月19日的更新中，开发者引入了ExtensoUI包，这是一个为.NET Core设计的扩展包，它包含了大多数重要的Bootstrap Helpers（如手风琴、标签页、面板、模态框等），并且支持扩展，允许开发者为Bootstrap 4、Foundation 5或6、jQueryUI等添加自己的提供者。此外，还为Kendo创建了一个单独的包，并且未来可能会进一步改进。
2013年5月10日的更新中，Bootstrap Helpers可以通过Nuget包管理器轻松安装，这使得开发者可以更方便地获取和使用这个工具。此外，项目也在GitHub上托管，这有助于吸引更多的贡献者参与到项目中来。
以下是一些使用Razor语法的HTML Helpers示例，这些示例展示了如何使用Bootstrap Helpers来创建模态对话框、标签页、手风琴/折叠面板、轮播图和子导航栏。
模态对话框是一种常见的用户界面元素，它允许用户在当前页面上弹出一个新窗口进行交互。使用Bootstrap Helpers，可以轻松地创建一个模态对话框。以下是一个简单的示例：
<a class="btn" data-toggle="modal" href="#myModal">Normal Modal</a><br/>
@using (var modal = Html.Bootstrap().Begin(new Modal(new { id = "myModal" }))) {
using (var header = modal.BeginHeader()) {
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
}
using (var body = modal.BeginBody()) {
<p>One fine body…</p>
}
using (var footer = modal.BeginFooter()) {
@Html.Bootstrap().Button("Close", BootstrapNamedColor.Default, null, new { data_dismiss = "modal" })
@Html.Bootstrap().Button("Save Changes", BootstrapNamedColor.Primary, null)
}
}
标签页是另一种常见的用户界面元素，它允许用户在不同的内容区域之间切换。使用Bootstrap Helpers，可以轻松地创建标签页。以下是一个简单的示例：
@using (var tabs = Html.Bootstrap().Begin(new Tabs())) {
tabs.Tab("Tab One", "tab1");
tabs.Tab("Tab Two", "tab2");
tabs.Tab("Tab Three", "tab3");
using (tabs.BeginPanel()) {
<p>This is tabs panel 1 content</p>
}
using (tabs.BeginPanel()) {
<p>This is tabs panel 2 content</p>
}
using (tabs.BeginPanel()) {
<p>This is tabs panel 3 content</p>
}
}
手风琴是一种可以折叠和展开的内容区域，它允许用户在不同的内容区域之间切换。使用Bootstrap Helpers，可以轻松地创建手风琴。以下是一个简单的示例：
@using (var accordion = Html.Bootstrap().Begin(new Accordion("accordion1")) {
using (var panel = accordion.BeginPanel("Panel 1", "panel1")) {
<p>This is accordion panel 1 content</p>
}
using (var panel = accordion.BeginPanel("Panel 2", "panel2")) {
<p>This is accordion panel 2 content</p>
}
}
轮播图是一种可以自动播放的图片展示方式，它允许用户在不同的图片之间切换。使用Bootstrap Helpers，可以轻松地创建轮播图。以下是一个简单的示例：
@using (var carousel = Html.Bootstrap().Begin(new Carousel("carousel1"))) {
carousel.Item("~/Images/Red.png", "Red");
using (var item = carousel.ItemWithCaption("~/Images/Green.png", "Green")) {
<h4>This is Green</h4>
<p>Green is a nice color</p>
}
carousel.Item("~/Images/Blue.png", "Blue");
}
子导航栏是一种辅助导航元素，它允许用户在不同的页面或页面部分之间快速导航。使用Bootstrap Helpers，可以轻松地创建子导航栏。以下是一个简单的示例：
@using (var subNav = Html.Bootstrap().Begin(new SubNavBar())) {
subNav.Item("Modal", "#demoModal");
subNav.Item("Tabs", "#demoTabs");
subNav.Item("Accordion", "#demoAccordion");
subNav.Item("Other", "#demoOther");
subNav.Item("Toolbar", "#demoToolbar");
subNav.Item("Thumbnails", "#demoThumbs");
subNav.Item("Carousel", "#demoCarousel");
subNav.Item("Code Blocks", "#demoCodeBlocks");
subNav.Item("Forms", Url.Action("DemoForm", "Home"));
subNav.DropDownItem("DropDown", new List<BootstrapListItem> {
new BootstrapListItem { Text = "Something", Url = "#something" },
new BootstrapListItem { Text = "Something Else", Url = "#something-else" },
new BootstrapListItem { Text = "Yet Something More", Url = "#yet-something-more" }
});
}
在构建任何HTML Helpers时，将它们与标准的HTML Helpers分离是一个好习惯。例如，希望调用的是Html.Bootstrap().Begin(new Accordion())，而不是Html.BeginBootstrapAccordion()。要实现这一点，首先需要创建一个名为Bootstrap的类，该类只有一个设置为internal的构造函数。以下是示例：
public class Bootstrap<TModel> {
private readonly HtmlHelper<TModel> helper;
internal Bootstrap(HtmlHelper<TModel> helper) {
this.helper = helper;
}
// 等等
}
当然，需要传递一个HtmlHelper的实例，并且在那个类中添加所有的辅助方法。以下是一个简单的例子（带有重载）：
public MvcHtmlString ActionButton(string text, BootstrapNamedColor color, string actionName, string controllerName) {
return ActionButton(text, color, actionName, controllerName, null);
}
public MvcHtmlString ActionButton(string text, BootstrapNamedColor color, string actionName, string controllerName, object routeValues) {
return ActionButton(text, color, actionName, controllerName, routeValues, null);
}
public MvcHtmlString ActionButton(string text, BootstrapNamedColor color, string actionName, string controllerName, object routeValues, object htmlAttributes) {
var builder = new TagBuilder("a");
builder.SetInnerText(text);
builder.MergeAttributes(HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes));
switch (color) {
case BootstrapNamedColor.Important: builder.AddCssClass("btn btn-danger"); break;
case BootstrapNamedColor.Default: builder.AddCssClass("btn"); break;
case BootstrapNamedColor.Info: builder.AddCssClass("btn btn-info"); break;
case BootstrapNamedColor.Inverse: builder.AddCssClass("btn btn-inverse"); break;
case BootstrapNamedColor.Primary: builder.AddCssClass("btn btn-primary"); break;
case BootstrapNamedColor.Success: builder.AddCssClass("btn btn-success"); break;
case BootstrapNamedColor.Warning: builder.AddCssClass("btn btn-warning"); break;
default: builder.AddCssClass("btn"); break;
}
var urlHelper = new UrlHelper(helper.ViewContext.RequestContext);
builder.MergeAttribute("href", urlHelper.Action(actionName, controllerName, routeValues));
return MvcHtmlString.Create(builder.ToString());
}
最后，需要在某个地方创建一个Bootstrap类的实例。由于它只有一个internal构造函数，只能从创建它的项目中实例化它，并且由于希望从任何其他项目中使用它，所做的就是创建一个公共扩展方法，如下所示：
public static class HtmlHelperExtensions {
public static Bootstrap<TModel> Bootstrap<TModel>(this HtmlHelper<TModel> htmlHelper) {
return new Bootstrap<TModel>(htmlHelper);
}
}
现在，可以将所有的辅助方法添加到Bootstrap“命名空间”中。现在，就是这样使用的：
@Html.Bootstrap().ActionButton("Home", BootstrapNamedColor.Primary, "Index", "Home")