This is a simple project that provides an alternative replace to the the default MVC validation summary html helper.

I was not happy with it's lack of styling and customization in the modern world and as a big fan of using Twitter's Bootstrap framework I wanted something more in keeping with it.

In addition I missed some of the controls that I had from asp.net webforms and included a simple visual "required fields indicator"

With that in mind here is my little pet project which replaces the default control and gives you the flexibility to show errors in a number of ways.

Well it's pretty simple:

Step 1) Download the source code from here or install from nuget (search for BootstrapMvc via nuget)

  Install-Package BootstrapMvc 

Step 2) Add the following declaration to your views\webconfig file under pages: (Version 1.0.0.4 has a webconfig transform for this but if you are using areas you will need add this change manually)

 <system.web.webPages.razor>
<host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=5.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
<pages pageBaseType="System.Web.Mvc.WebViewPage">
  <namespaces>
  ..... //removed for brevity
 <add namespace="BootstrapMvc.HtmlHelpers"/>
  </namespaces>
</pages>
</system.web.webPages.razor>

Step 3) Go to the view you want to add this too and simply add:

 @Html.BootStrapValidationSummary()

This adds the default Alert panel mode like this:

Step 4) Leave as is or customise.

Samples of the various modes available currently:

For full details go to the project wiki below:

https://github.com/JellyMaster/MVCBootstrap/wiki/BootStrapped-Validation-Summary

To customise the summary panel we pass in a new BootstrapValidationSummaryOptions() object.

This allows you to pass in the various settings to enable/disable features as well as change the styling of the summary panel.

public BootstrapValidationSummaryOptions(
 ErrorMode mode = ErrorMode.Alert,
 bool showModelErrors = true,
 string title = "Oops! There seems to be a problem.",
 string introductionBlock = "There seems to have been a problem with your request. See below: ",
 bool enableRequiredFieldIndicators = false,
 bool enableRequiredFieldHelp = false,
 AlertStyleSettings alertStyleSettings = null,
 PanelStyleSettings panelStyleSettings = null,
 ModalStyleSettings modalStyleSettings = null)
 {
     DisplayMode = mode;
     ShowModelErrors = showModelErrors;
     Title = title;
     IntroductionBlock = introductionBlock;
     EnableRequiredFieldIndicators = enableRequiredFieldIndicators;
     EnableRequiredFieldHelp = enableRequiredFieldHelp;
     AlertDisplaySettings = (alertStyleSettings == null) ? new AlertStyleSettings() : alertStyleSettings;
     PanelDisplaySettings = (panelStyleSettings == null) ? new PanelStyleSettings() : panelStyleSettings;
     ModalDisplaySettings = (modalStyleSettings == null) ? new ModalStyleSettings() : modalStyleSettings;
 }

• DisplayMode mode: this is an enum and can be put in ErrorMode.Alert, ErrorMode.ClosableAlert, ErrorMode.Panel, ErrorMode.CollapsablePanel, ErrorMode.Modal
• bool showModelErrors: turns on or off model errors
• string title: The text displayed at the top of the summary panel
• string introductionBlock: Some text introducing the errors to the user
• bool enableRequiredFieldIndicators: Turns on/off highlighting fields that are set as required
• bool enableRequiredFieldHelp: Turns on/off the required field text help section
• AlertStyleSettings alertStyleSettings: Sets the css classes for the Alert panel styling
• PanelStyleSettings panelStyleSettings: Sets the css classes for the Panel Alert styling
• ModalStyleSettings modalStyleSettings: Sets the css classes for the Modal Alert styling

For further details check the wiki.

https://github.com/JellyMaster/MVCBootstrap/wiki/BootStrapped-Validation-Summary

Well a feature I am still looking at is unobtrusive support and this is something that will hopefully give you the same level of customization as this control. It also gives me the perfect chance to pull out all the jquery that I have stuffed in the helper and maintain it in a more sensible way.

Thanks for taking the time to have a look at this project and if you have any suggestions on improvements/bugs feel free to let me know.