Twitter Bootstrap MVC Alternatives [closed]

Question

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

Answer 1

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

Answer 2

you can create your own helpers for controls and consume them. Below is sample for input button custom helper

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

Add the namespace CustomHelpers in your views web.config file under tag and there you go you have your helper in the intellisense You just need to rebuild your solution for helper to be available in your views.