Twitter Bootstrap MVC的替代方案

Question

Twitter Bootstrap MVC的替代方案

htmlasp.net-mvctwitter-bootstrap

7

在查看了 https://www.twitterbootstrapmvc.com/ 后，我发现您需要付费。

有没有免费的替代方案或者教程可以让你为 bootstrap 创建 HTML 辅助工具，例如文本框、复选框、下拉框等？

我尝试创建简单的 HTML 辅助工具，但是遇到了问题，即使我可以覆盖当前的 HTML 辅助工具，比如 TextBoxFor，添加类和设置它应该如何呈现也会很有帮助。

我的第一步示例位于 Views 文件夹中，我创建了一个名为“EditorTemplates”的文件夹。

在这个文件夹中，我添加了“string.cshtml”，用于像 TextBoxFor 这样的东西。

在这里，我有：

@{
    var placeholder = string.Empty;
    if (ViewData.ModelMetadata.AdditionalValues.ContainsKey("placeholder"))
    {
        placeholder = ViewData.ModelMetadata.AdditionalValues["placeholder"] as string;
    }
}
<div class="form-group">
    @Html.Label(ViewData.ModelMetadata.PropertyName)
    @Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue, new { placeholder = placeholder, @class = "form-control"})
 </div>

这将创建一个看起来像Bootstrap的输入项，但缺乏所需的灵活性，如参数。

谢谢。

- Lemex

2

这个问题可能不适合提问：

询问我们推荐或寻找工具、库或最喜爱的站外资源的问题，在 Stack Overflow 上不适合，因为它们往往会吸引持有意见的回答和垃圾信息。

更多细节请参考这里。 - Christofer Eliasson

1

由于Bootstrap现在非常流行，我认为这是一个很好的问题。 - bto.rdz

1

https://www.twitterbootstrapmvc.com/Download - Lemex

这应该是免费的 :) 无论如何，希望我们能从开源社区或微软Web工具团队得到同样的支持 :) - Murali Murugesan

1

@LmC 我知道这个问题已经关闭了，但是如果你还不知道的话，请查看 Chameleon Forms。https://github.com/MRCollective/ChameleonForms - Ashok Padmanabhan

显示剩余6条评论

2个回答

2

您可以创建自己的控件助手并使用它们。以下是输入按钮自定义助手的示例。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace CustomHelpers
{
    public static class ButtonHelper
    {
        public static MvcHtmlString Button(this HtmlHelper helper, String       displayText, String elementId, String cssClass, String onClick)
        {
            TagBuilder inputButton = new TagBuilder("input");
            inputButton.AddCssClass(cssClass);
            inputButton.MergeAttribute("value", displayText);
            inputButton.MergeAttribute("id", elementId);
            inputButton.MergeAttribute("type", "button");
            inputButton.MergeAttribute("onclick","" + onClick + "");

            return MvcHtmlString.Create(inputButton.ToString());
        }
    }
}

在视图的web.config文件中添加CustomHelpers命名空间，具体步骤是在< tag>标签下添加该命名空间即可。这样一来，您就可以在Intellisense中找到您的辅助程序了。只需要重新构建解决方案，辅助程序就会在您的视图中可用。

- zeeshan

我也喜欢这个，它是一个很好的例子！但是例如下拉菜单或验证消息呢？ - Lemex

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Karhgath · Accepted Answer

好的，最简单的方法是自己编写帮助程序，这并不难，而且您可以完全控制它们，特别是您可以重复使用默认帮助程序调用。例如，对于一个简单的 Boostrap 文本框组，您可以有以下代码：

public static class BootstrapHtmlHelper
{    
    public static MvcHtmlString TextboxGroupFor<TModel, TProperty>(
        this HtmlHelper<TModel> html, 
        Expression<Func<TModel, TProperty>> expression, 
        string title, 
        string id, 
        string placeholder)
    { 
        StringBuilder sb = new StringBuilder();
        sb.AppendLine("<div class=\"form-group\">");
        sb.AppendLine("<label for=\"{0}\">{1}</label>", id, title);
        sb.AppendLine( htmlHelper.TextBoxFor( expression, new { @class = "form-control", @id = id, @placeholder = placeholder }) );
        sb.AppendLine( htmlHelper.ValidationMessageFor( expression );
        sb.AppendLine("</div>");
        return new MvcHtmlString( sb.ToString() );
    }
}

您可以添加任何参数，检查验证，添加帮助框，进行任何格式化等操作。

然后您可以在视图中使用它：

@Html.TextboxGroupFor(x => x.FirstName, "First Name", "first-name-id", "Enter first name...")

更新：

下拉菜单的示例，只需重用ListBoxFor并传递IEnumerable<SelectListItem>：

public static class BootstrapHtmlHelper
{    
    public static MvcHtmlString DropdownGroupFor<TModel, TProperty>(
        this HtmlHelper<TModel> html, 
        Expression<Func<TModel, TProperty>> expression,
        IEnumerable<SelectListItem> list,
        string selectedValue,
        string title, 
        string id)
    { 
        // Apply selected value to the list
        var selectedList = list.Select(x => x.Value.Equals(selectedValue) ? x.Selected = true : x.Selected = false);

        StringBuilder sb = new StringBuilder();
        sb.AppendLine("<div class=\"form-group\">");
        sb.AppendLine("<label for=\"{0}\">{1}</label>", id, title);
        sb.AppendLine( htmlHelper.ListBoxFor( expression, selectedList, new { @class = "form-control", @id = id }) );
        sb.AppendLine( htmlHelper.ValidationMessageFor( expression );
        sb.AppendLine("</div>");
        return new MvcHtmlString( sb.ToString() );
    }
}

在视图中:

@Html.DropdownGroupFor(
    x => x.Country, 
    Model.Countries.Select(x => new SelectListItem
    { 
        Text = x.Name, 
        Value = x.Id 
    }));