Twitter Bootstrap MVC 替代方案 [关闭]

Question

在查看https://www.twitterbootstrapmvc.com/ 后，我发现您必须为此付费。

是否有任何免费的替代方案或 tuuriols 可以让您为文本框、复选框、下拉菜单等的引导创建 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>

这会创建一个看起来像引导程序的输入项，但不具备所需的灵活性，例如参数。

谢谢

Answer 1

嗯，最简单的事情就是自己做助手，这真的不难，而且你可以完全控制它们，尤其是你可以重用默认的助手调用，例如对于一个简单的 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 
    }));

Answer 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，然后您就可以在智能感知中拥有您的助手您只需要重建您的解决方案以使助手在您的视图中可用。