Render Partial View As Modal Popup Using AJAX Call with JSON

In this article I am going to show how we can render a partial view in a modal popup with AJAX call. Here in Partial View I will show the record from my database table using web grid.

Open Visual Studio, New, then click Project,





Below is my Data Table.



Data in my Data Table.



Now right click on Project Solution Explorer, Add, then click ADO.NET Entity Data Model.















Now time to add a new controller.







Add a View here.





Add the following code to your Index.cshtml,

@ {
    ViewBag.Title = "Render Partial View As Modal Popup Using AJAX call with JSON";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section scripts { < script > var ajaxCallURL = '/Employee/EmployeePartial';
    $(function()
      {
        $(".getAllEMP").click(function()
         {
            var $buttonClicked = $(this);
            var options = {
                "backdrop": "static",
                keyboard: true
            };
            $.ajax({
                type: "GET",
                url: ajaxCallURL,
                contentType: "application/json; charset=utf-8",
                datatype: "json",
                success: function(data)
                {
                    debugger;
                    $('#myModalContent').html(data);
                    $('#myModal').modal(options);
                    $('#myModal').modal('show');
                },
                error: function() {
                    alert("Content load failed.");
                }
            });
        });
        $("#closbtn").click(function()
        {
            debugger;
            $('#myModal').modal('hide');
        });
    }); < /script>
} < table style = "background-color:orange; width:100%; border:solid5pxgreen; padding:20px;" > < tr > < td align = "center"
style = "padding:20px;" > < ahref = "javascript:void(0);"
class = "getAllEMP"
style = "font-size:20pt;" > Get All Employee Information < /a> < /td> < /tr> < /table> < divid = 'myModal'
class = 'modal'
style = "text-align:right; " > < divclass = "modal-dialog"
style = "width:900px; height:400px; padding:10px;" > < divclass = "modal-content"
style = "overflow: auto; padding:10px; background-color:#d2f5f4;" > < button type = "button"
id = "closbtn" > x < /button> < divstyle = "height:10px;" > < /div> < div id = 'myModalContent'
style = "width:850px; height:400px; padding:10px;" > < /div> < /div> < /div> < /div>

Now add the following code to your EmployeeController,

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MVC_WebGrid_PartialView_ModalPopup.Controllers
{
    public class EmployeeController: Controller
    {
        CompanyDBEntities db = new CompanyDBEntities();
        // GET: Employee
        public ActionResult Index()
        {
            return View();
        }
        public ActionResultEmployeePartial()
        {
            List < Emp_Information > model = db.Emp_Information.ToList();
            return PartialView("_EmpPartial", model);
        }
    }
}

Now Add a partial view inside Views, then Employee Folder,



In _EmpPartial.cshtml write the following code: 

@model List < MVC_WebGrid_PartialView_ModalPopup.Emp_Information > @
  {
        //var grid = new WebGrid(Model, defaultSort: "Name", rowsPerPage: 10, ajaxUpdateContainerId: "gridContent");
        var grid = newWebGrid(source: Model, canPage: true, rowsPerPage: 10, ajaxUpdateContainerId: "gridContent");
        grid.Pager(WebGridPagerModes.All);
    } < styletype = "text/css" > .webgrid - table
    {
        font - family: "Trebuchet MS", Arial, Helvetica, sans - serif;
        font - size: 1.2e m;
        width: 100 % ;
        display: table;
        border - collapse: separate;
        border: solid1px# ff6a00;
        background - color: white;
    }.webgrid - tabletd, th
    {
        border: 1 pxsolid# ff6a00;
        padding: 3 px7px2px;
        text - align: left;
    }.webgrid - header {
        background - color: #ff6a00;
        color: #ffffff;
        padding - bottom: 4 px;
        padding - top: 5 px;
        text - align: left;
    }.webgrid - footer {}.webgrid - row - style
    {
        padding: 3 px7px2px;
    }.webgrid - alternating - row {
        background - color: #00ffff;
padding: 3px7px2px;
}
</style>
<div id= "gridContent" >
@grid.GetHtml
(
  tableStyle: "webgrid-table",
  headerStyle: "webgrid-header",
  footerStyle: "webgrid-footer",
  alternatingRowStyle: "webgrid-alternating-row",
  rowStyle: "webgrid-row-style",
 columns: grid.Columns
(
grid.Column
(
header: "No.",
format: @
< text >
< div >
@(item.WebGrid.Rows.IndexOf(item) + 1)
< /div></text >
),
grid.Column
(
columnName: "EMP_ID", header: "EMPLOYEE ID"
),
grid.Column
(header: "Name", format:
@ < text > < a href = "#" > @item.Name < /a></text > ),
grid.Column(columnName: "ManagerName", header: "ManagerName"),
grid.Column(columnName: "ProjectName", header: "ProjectName"),
grid.Column(columnName: "City", header: "City")))
< /div>

In Route.config set startup controller and action method like below:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;
namespace MVC_WebGrid_PartialView_ModalPopup
{

    public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
            routes.MapRoute(name: "Default", url: "{controller}/{action}/{id}", defaults: new
            {
                controller = "Employee",
                    action = "Index", id = UrlParameter.Optional
            });
        }
    }
}

Now run your Application:

Read more articles on AJAX:

• Store Local Storage Data Into Database Using Ajax
• Implementing AJAX In ASP.NET Using XMLHttpRequest Object