Best approach for extending unobtrusive javascript in MVC3 to add a style to a div client side

Question

I\'m using html5/Razor/MVC3 leveraging the Bootstrap template from Twitter. I want to have form validation that looks slick like they\'ve documented (http://twitter.github.com/b

Answer 1

Came accross the same issue. I am tackling it by adding and extesion to the HtmlHelper Class.

This is what I did for the ValidationSummary:

   public static class TwitterBootstrapHelperExtensions
    {
        public static MvcHtmlString BootstrapValidationSummary(this HtmlHelper helper,
                               bool excludePropertyErrors,
                               string message)
        {
            if(helper.ViewData.ModelState.Values.All(v => v.Errors.Count == 0)) return new MvcHtmlString(string.Empty);

            string errorsList = "
";
            foreach (var error in helper.ViewData.ModelState.Values.Where(v => v.Errors.Count >0))
            {
                errorsList += string.Format("
{0}
", error.Errors.First().ErrorMessage);
            }
            errorsList += "
";
            return new MvcHtmlString(string.Format("
{0}{1}
",message,errorsList));

        }
    }

And in the .cshtml file I replace Html.ValidationSummary with this:

@Html.BootstrapValidationSummary(true, "Login was unsuccessful. Please correct the errors and try again.")

Remember to add the namespance of your extension class in the views folder web.config file.

I will post here later if I tackle the individual input item before you. HTH