Twitter Bootstrap MVC Alternatives

asp.net-mvc, html, twitter-bootstrap

Solution

Well, the easiest thing to do is do the helper yourself, it's really not hard and you have full control on them, especially as you can reuse default helper calls, for example for a simple Boostrap textbox group you could have:

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() );
    }
}

You can then add any parameters, check for the validation, add helper boxes, do any kind of formatting, etc.

Then you can use it in your views:

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

Update:

Example for a dropdown, simply reuse `ListBoxFor` and pass an `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() );
    }
}

In the view:

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

Problem

After reviewing https://www.twitterbootstrapmvc.com/ I found you had to pay for it. Is there any free alternative or tuturiols around that allow you to make HTML helpers for bootstrap for thing like text boxes, check boxes, dropdowns etc? I've tried creating simple HTML helpers but having issues even if i could override current HTML helpers like TextBoxFor but add classes and set how it should render this would be helpful. An example of my first steps is within the Views folder i have created a folder named "EditorTemplates" Within this folder i have added "string.cshtml" this is called for thing like TextBoxFor. Within here i have: ``` @{ 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> ``` This creates a bootstrap looking input item, but doesnt have the required flexibility such as parameteres. Thanks

Original source