Validate Pop Up Modal using Ajax.Beginform in C# MVC

In this article, I am going to explain, how to show validation messages in the bootstrap pop-up model and save that in the database using PartilView and Entity Framework, without closing the Bootstrap Pop-up model.

in the above scripts,jQuery.validate and jquery.validate.unobtrusiveis used to validate model without refreshing page and jquery.unobtrusive-ajax.min.js is used to update Target Div in Ajax.BeginForm, while jquery is required to run these scripts.

Note: Remember to include jquery.unobtrusive-ajax.min.js otherwise, UpdateTargetId of Ajax.BeginForm will not work. If You don't find this file in your script folder install it using Nuget Command Install-Package Microsoft.jQuery.Unobtrusive.Ajax

Step 9: Run your application, Got to URL "/Home/Create", and Click on "Create Blog", and try to submit the form without entering details, you will see errors, without page-refresh(reload).

Step 10: Enter the details and Click "Submit", it will save the details in a database, and you will see Bootstrap Modal with the fields cleared up, this is due to the line in UpdateTargetId = "frmEmp" in Ajax.Beginform, where "frmEmp" is the id of div.

Here is the working demo of the above example

Note: I am not saving any data in database but you can connect your project to the database using Database first approach or Code First Approach, and save the form data in database after validation.