Bootstrap HTML 帮助程序
通过 Bootstrap Helpers 项目，我让 .NET 开发人员的工作变得更加轻松。
引言
Twitter 的朋友们使用他们的 Bootstrap 框架为全世界的开发人员提供了一项重大的帮助。 这对于我们这些 UI 设计技能有限的程序员来说尤其有用。 通过 Bootstrap Helpers 项目，我让 .NET 开发人员的工作变得更加轻松。
更新 (2018.05.19)
此项目已被我的 .NET Core Extenso 项目中的 ExtensoUI 包取代。 它没有所有相同的助手，但大多数重要的助手都在那里（手风琴、选项卡、面板、模式和一些较小的东西）。 更重要的是，我使其具有可扩展性，因此您可以为 Bootstrap 4、Foundation 5 或 6、jQueryUI 等添加您自己的提供程序。 我已经为 Kendo 创建了一个单独的包，并且将来可能会对此进行改进。 享受！
更新 (2013.05.10)
请注意，Bootstrap Helpers 现在可以作为 Nuget 包使用！ 这是链接：https://nuget.net.cn/packages/VortexSoft.Bootstrap[ title="New Window">^]。 此外，该项目现在托管在 GitHub 上，因为现在大多数人似乎都在使用它来进行开源项目。 我希望这能帮助贡献者。 这是链接：https://github.com/gordon-matt/BootstrapHelpers[ title="New Window">^]
用法
以下是使用 Razor 语法的一些最有用的 HTML 助手的示例。
模态对话框
<a class="btn" data-toggle="modal" href="#myModal" >Normal Modal</a>
@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)
}
}
选项卡
@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>
}
}
您也可以将选项卡放在左侧或右侧。 这是一个例子
@using (var tabs = Html.Bootstrap().Begin(new Tabs(TabPosition.Left)))
{
//etc
}
手风琴/折叠
@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>
}
}
旋转木马
@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");
}
子导航
@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.Bootstrap().ActionButton("Home", BootstrapNamedColor.Primary,
"Index", "Home")
如何实现
在构建任何 HTML 助手时，我认为始终将它们与其余标准助手分开是一个好习惯。 所以，不用调用
Html.BeginBootstrapAccordion()
或者类似的东西，我们想要调用
Html.Bootstrap().Begin(new Accordion())
这样做的方法是首先创建一个名为 Bootstrap 的类，其中**只有**一个构造函数，其可访问性设置为 internal。 这是一个例子
public class Bootstrap<TModel>
{
private readonly HtmlHelper<TModel> helper;
internal Bootstrap(HtmlHelper<TModel> helper)
{
this.helper = helper;
}
//etc
您当然还需要传递一个 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 类的实例。 由于它只有一个内部构造函数，因此您只能从创建它的项目中实例化它，并且由于您希望能够从任何其他项目中使用它，因此您要做的就是在同一项目中创建一个 public 扩展方法，如下所示
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")
太棒了！ 给我展示更多！ 好的，好的，开始了：检查以下内容
@using (Html.BeginForm()) {
@Html.AntiForgeryToken()
@Html.ValidationSummary()
<fieldset>
<legend>Registration Form</legend>
<ol>
<li>
@Html.LabelFor(m => m.UserName)
@Html.TextBoxFor(m => m.UserName)
</li>
<li>
@Html.LabelFor(m => m.Password)
@Html.PasswordFor(m => m.Password)
</li>
<li>
@Html.LabelFor(m => m.ConfirmPassword)
@Html.PasswordFor(m => m.ConfirmPassword)
</li>
</ol>
<input type="submit" value="Register" />
</fieldset>
}
在这种情况下，HTML 助手是 BeginForm()，它在某种程度上有所不同......是的，它允许您在花括号之间添加 HTML 内容。 好的！ 有没有想过它是怎么做到的？ 好吧，别再想了……让我们创建我们自己的。 您基本上需要创建一个从 IDisposable 继承的类，如下所示
public class AccordionBuilder<TModel>
{
protected readonly TextWriter textWriter;
protected readonly HtmlHelper<TModel> htmlHelper;
internal AccordionBuilder(HtmlHelper<TModel> htmlHelper, Accordion accordion)
{
this.htmlHelper = htmlHelper;
this.textWriter = htmlHelper.ViewContext.Writer;
this.textWriter.Write(@“<div class=””acccordion””>”);
}
public override void Dispose()
{
this.textWriter.Write(@“</div>”);
}
}
真实手风琴的代码比上面的代码复杂一点。 我简化了上面的内容，以便让您更清楚地了解发生了什么。 基本上，在构造函数中，我们编写元素的开头（在这种情况下为 <div> 或在 Html.BeginForm() 的情况下为 <form> 标签），在 Dispose() 方法中，我们编写 end 标签。 由于 using 语句会自动在 IDisposable 上调用 Dispose()，这就是我们需要做的全部……这里没有什么太花哨的。
结语
这些助手旨在使每个人都受益。 因此，我希望有人愿意贡献并使这些助手对每个人都更好。 享受！
致谢
我必须感谢 jQuery UI Helpers 项目的 Attila Losonc；正是那个很棒的项目启发了我创建 Bootstrap Helpers。