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


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" 


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
<!-- Modal -->
@using (Ajax.BeginForm("SaveBlog", "Home", new AjaxOptions() { HttpMethod = "POST",UpdateTargetId = "frmEmp"  }))

        <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>
                        <h4 class="modal-title" id="myModalLabel">Create New Blog</h4>
                    <div class="modal-body" id="frmEmp">
                    <div class="modal-footer">
                        <input type="submit" class="btn btn-primary" value="Submit" />

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, 

    @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

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

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

        public ActionResult SaveBlog(Blog model)
            if (ModelState.IsValid)
                // Save it in database
                //Return Success message
                ViewBag.Message = "Blog saved";
                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).


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.


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