介绍 Twitter上的那些家伙用他们的Bootstrap框架为全世界的开发者做了一件好事。这对于我们这些在UI设计方面技能有限的程序员来说特别有用。通过Bootstrap Helpers项目，我使。net开发人员的工作变得更加容易。 更新(2018.05.19) 这个项目已经被我的。net Core的Extenso项目中的ExtensoUI包所取代。它没有所有相同的助手，但大多数重要的助手都在那里(手风琴，标签，面板，模态和一些更小的东西)。更重要的是，我使它可扩展，这样您就可以为Bootstrap 4、Foundation 5或6、jQueryUI等添加自己的提供者。我已经创建了一个矛头包剑道以及我将可能在未来改进这。享受吧! 更新(2013.05.10) 注意，引导帮助程序现在可以作为Nuget包使用!链接如下:https://www.nuget.org/packages/VortexSoft.Bootstrap[title="New Window">^]。另外，这个项目现在托管在GitHub上，因为现在大多数人似乎都在用GitHub来做开源项目。我希望这将有助于贡献者。下面是它的链接:https://github.com/gordon-matt/BootstrapHelpers[title="New Window">^] 使用 下面是一些使用Razor语法的最有用的HTML帮助程序示例。 模态对话框 隐藏,复制Code
<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) } }
选项卡 隐藏,复制Code
@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> } }
您还可以将选项卡放在左边或右边。下面是一个例子: 隐藏,复制Code
@using (var tabs = Html.Bootstrap().Begin(new Tabs(TabPosition.Left))) { //etc }
手风琴/崩溃 隐藏,复制Code
@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> } }
旋转木马 隐藏,复制Code
@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"); }
子导航 隐藏,复制Code
@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" } }); }
杂项 您还可以找到许多较小的助手，比如按钮。下面是一个动作按钮的例子: 隐藏,复制Code
@Html.Bootstrap().ActionButton("Home", BootstrapNamedColor.Primary, "Index", "Home")
是怎么做到的 在构建HTML helper时，我认为将它们与其他标准helper区分开总是一种好的做法。所以，与其打电话: 隐藏,复制Code
Html.BeginBootstrapAccordion()
或者类似的东西，我们想叫: 隐藏,复制Code
Html.Bootstrap().Begin(new Accordion())
这样做的方法是首先创建一个名为Bootstrap的类，只有一个构造函数，其可访问性设置为internal。下面是一个例子: 隐藏,复制Code
public class Bootstrap<TModel> { private readonly HtmlHelper<TModel> helper; internal Bootstrap(HtmlHelper<TModel> helper) { this.helper = helper; } //etc
当然，您还需要传递HtmlHelper的实例，在该类中您将添加所有helper方法。这里有一个简单的例子(重载): 隐藏,收缩,复制Code
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类的实例。因为它只有一个内部构造函数，你只能实例化它从项目中创建，因为你想要能够使用它从任何其他项目，你所做的是创建一个公共扩展方法在同一个项目，像这样: 隐藏,复制Code
public static class HtmlHelperExtensions { public static Bootstrap<TModel> Bootstrap<TModel>(this HtmlHelper<TModel> htmlHelper) { return new Bootstrap<TModel>(htmlHelper); } }
就这么简单，你现在可以把你所有的辅助方法添加到Bootstrap中"我们称它为name space;我找不到更好的词了。现在我这样使用它: 隐藏,复制Code
@Html.Bootstrap().ActionButton("Home", BootstrapNamedColor.Primary, "Index", "Home")
太棒了!给我更多!好的，好的，这里开始:检查以下内容: 隐藏,复制Code
@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继承如下: 隐藏,复制Code
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>"); } }
实际的手风琴代码比上面的代码要复杂一些。我已经简化了上面的内容，以便让您更清楚地了解正在发生的事情。基本上，在构造函数中，我们编写元素的开始(a <在这种情况下或形式在Html.BeginForm())方法中，我们编写结束标记，在Dispose()方法中，我们编写结束标记。由于using语句自动调用了一个IDisposable上的Dispose()，那么这就是我们所需要做的…这里没有什么特别的。 最后一句 这些助手的存在是为了使每个人受益。因此，我希望会有那些愿意贡献的人，并使这些帮助更好地为每个人。享受吧! 确认 我必须给Attila Losonc的jQuery UI helper项目;正是这个很棒的项目激发了我创建Bootstrap helper。 本文转载于：http://www.diyabc.com/frontweb/news15886.html