引导HTML助手

介绍 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

posted @ 2020-08-12 13:09 Dincat 阅读(219) 评论(0) 编辑收藏举报

刷新页面返回顶部

Dincat

引导HTML助手

公告