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.

Steps to Validate Bootstrap Pop-up Model in MVC C# using jQuery unobtrusive and Ajax.BeginForm

Step 1: Create a new MVC web-application using Visual Studio

Create-New-Project-web-application-MVC

Step 2: Go to your HomeController(as we have are using basic template, not empty MVC project), and create a new ActionMethod

public ActionResult Create()
{
    return View();
}

Step 3: Right Click inside above created ActionMethod and Click on "Add View" 

Add-View-in-Create-Method

Step 4: Let's assume we have a Database in our Local/SQLExpress named as BlogDb, we will connect to the database using Code First Migration with Entity Framework.

Let's create the class for Blog with data annotation now, for validation purpose,s o our Blog.CS would be

public class Blog
    {
        public int BlogId { get; set; }
        [Display(Name = "Blog Name")]
        [Required(ErrorMessage = "Blog Name is Required.")]
        public string Name { get; set; }
        [Display(Name = "Category Name")]
        [Required(ErrorMessage = "Category Name is Required.")]
        public string CategoryName { get; set; }
    }

Step 5: In the View(Create.cshtml), place this code to show pop-up button 

@{
    ViewBag.Title = "Create";
}

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    Create Blog
</button>
<!-- Modal -->
@using (Ajax.BeginForm("SaveBlog", "Home", new AjaxOptions() { HttpMethod = "POST",UpdateTargetId = "frmEmp"  }))
{

    <div>
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title" id="myModalLabel">Create New Blog</h4>
                    </div>
                    <div class="modal-body" id="frmEmp">
                        @Html.Partial("_Blog")
                    </div>
                    <div class="modal-footer">
                        <input type="submit" class="btn btn-primary" value="Submit" />
                    </div>
                </div>
            </div>
        </div>
    </div>
}

Step 6: Refer the required js files in your view, we will need following files

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>

<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

in the above scripts, jQuery.validate and jquery.validate.unobtrusive is 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: Please Comment down these lines from your _Layout.cshtml page, 

 @*@Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)*@

we don't need them, as only required files are referenced by us above

Step 7: Create _Blog.cshtml PartialView, with the below code, to refer Blog.Cs Model in it, so that we can validate it before submitting it to the controller.

@model BootstrapModalPopUp.Models.Blog

@Html.AntiForgeryToken()
@if (ViewBag.Message != null)
{
    <span class="text-success">@ViewBag.Message</span>
}
<span class="alert-danger">
    @Html.ValidationSummary()
</span>
<div class="form-group">
    @Html.LabelFor(model => model.Name)
    @Html.TextBoxFor(model => model.Name, new { @class = "form-control" })
</div>
<div class="form-group">
    @Html.LabelFor(model => model.CategoryName)
    @Html.TextBoxFor(model => model.CategoryName, new { @class = "form-control" })
</div>

Step 8: Create C# code in controller to save the data

        [HttpPost]
        [ValidateAntiForgeryToken]
        [HandleError]
        public ActionResult SaveBlog(Blog model)
        {
            if (ModelState.IsValid)
            {
                // Save it in database
               
                //Return Success message
                ViewBag.Message = "Blog saved";
                ModelState.Clear();
                return PartialView("_Blog");
            }
            return PartialView("_Blog", model);
        }

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).

Create-Blog-Modal-Pop-Up

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.

_Blog_saved.png

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