Displaying Bootstrap Alert for Validation Summary in ASP.NET MVC with close button

When it comes to creating user-friendly and visually appealing web forms, Bootstrap is a popular choice among developers. Integrating Bootstrap alerts with validation summaries can greatly enhance the user experience by providing clear error messages and an intuitive way to dismiss them. In this blog post, we'll explore how to implement a Bootstrap alert with a close button for @Html.ValidationSummary in ASP.NET MVC.

Step-by-Step Implementation

Follow these steps to integrate Bootstrap alerts with @Html.ValidationSummary in your ASP.NET MVC project:

1. Create a Bootstrap Alert Container:

   Begin by setting up a container for the Bootstrap alert within your HTML code. This container will hold the validation summary and display it using the alert style. Also, include a close button (data-dismiss="alert") to allow users to dismiss the alert.

   <div class="alert alert-danger" id="divValidationSummary">
   <button type="button" class="close" data-dismiss="alert">×</button>
   @Html.ValidationSummary(false, "Please fix the following error and then submit the form")
   </div>
   

2. Include jQuery and JavaScript Code:

   Utilize jQuery to handle the visibility of the Bootstrap alert. You can use the following JavaScript code to initially hide the alert on page load and show it only when validation errors are present.

       $(document).ready(function () {
       var form = $('#myForm');
   
       // Hide Bootstrap alert on initial page load
       if ($(".validation-summary-errors")[0]) {
           $("#divValidationSummary").show();
       } else {
           $("#divValidationSummary").hide();
       }
   
       // Show Bootstrap alert when there are errors on the page
       form.submit(function (e) {
           if ($(".validation-summary-errors")[0]) {
               $("#divValidationSummary").show();
           } else {
               $("#divValidationSummary").hide();
           }
       });
   });
   

3. Output:

   

Incorporating Bootstrap alerts with @Html.ValidationSummary in your ASP.NET MVC project is a great way to improve the usability and visual appeal of your web forms. By following the steps outlined in this blog post, you can seamlessly integrate Bootstrap's user-friendly alert components with your validation messages, enhancing the overall user experience. Remember to customize the alert styles to match your application's branding, and you'll be on your way to creating more user-friendly and engaging web forms.