Twitter Bootstrap MVC Alternatives

Question

After watching https://www.twitterbootstrapmvc.com/, I found that you had to pay for it.

Is there a free alternative or tuturons around that allow you to create HTML bootstrap helpers for things like text fields, checkboxes, dropdowns, etc.?

I tried creating simple HTML helpers, but I have problems even if I could override the current HTML helpers, such as TextBoxFor, but add classes and specify how to do this to make it useful.

An example of my first steps is in the "Views" folder, I created a folder called "EditorTemplates"

In this folder I added "string.cshtml", this is called for a thing like TextBoxFor.

Inside here I am:

@{ 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 bootable input element, but does not have the necessary flexibility, such as parameters.

thanks

Answer 1

Well, the easiest way is to make the helper yourself, it’s really not difficult, and you have full control over them, especially since you can reuse standard default calls, for example, for a simple group of Boostrap text fields that you might 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() ); } } 

Then you can add any parameters, check the correctness, add auxiliary fields, do any 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 drop-down list, just reuse ListBoxFor and pass in 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 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 management assistants and consume them. Below is a sample for user input button 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 CustomHelpers namespace to your web.config file views under the tag, and there you have your helper in intellisense. You just need to rebuild your assistant solution so that it is available in your views.