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 record from my data base table using web grid.

Open Visual Studio-> New -> Project

Image 1.

Image 2.

Below is my Data Table.

Image 3.

Data in my Data Table.

Image 4.

Now Right Click on Project Solution Explorer -> Add -> ADO.NET Entity Data Model.

Image 5.

Image 6.

Image 7.

Image 8.

Image 9.

Image 10.

Image 11.

Now time to add a new controller.

Image 12.

Image 13.

Image 14.

Add a View here.

Image 15.

Image 16.

Add below 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) {                       
                        $('#myModalContent').html(data);
                        $('#myModal').modal(options);
                        $('#myModal').modal('show');
                    },
                    error: function () {
                        alert("Content load failed.");
                    }
                });
            });
            $("#closbtn").click(function () {                
                $('#myModal').modal('hide');
            });
        });
    </script>
}
<table style="background-color:orange; width:100%; border:solid 5px green; padding:20px;">
  
    <tr>
        <td align="center" style="padding:20px;">
            <a href="javascript:void(0);" class="getAllEMP" style="font-size:20pt;">Get All Employee Inforamtion</a>
        </td>
    </tr>
</table>

<div id='myModal' class='modal' style="text-align:right; ">
    <div class="modal-dialog" style="width:900px; height:400px; padding:10px;">
        <div class="modal-content" style="overflow: auto; padding:10px; background-color:#d2f5f4;">
            <button type="button" id="closbtn">x</button>
            <div style="height:10px;"></div>
            <div id='myModalContent' style="width:850px; height:400px; padding:10px;"></div>
        </div>
    </div>
</div>
 

Now Add below code to your EmployeeController

Image 17.

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 ActionResult EmployeePartial()
        {
            List<Emp_Information> model = db.Emp_Information.ToList();
            return PartialView("_EmpPartial", model);
        }
    }
}

Now Add a partial view inside Views-> Employee Folder

Image 18.

In this _EmpPartial.cshtml do below code:

@model List<MVC_WebGrid_PartialView_ModalPopup.Emp_Information>
@{
    //var grid = new WebGrid(Model, defaultSort: "Name", rowsPerPage: 10, ajaxUpdateContainerId: "gridContent");
    var grid = new WebGrid(source: Model, canPage: true, rowsPerPage: 10, ajaxUpdateContainerId: "gridContent");
    grid.Pager(WebGridPagerModes.All);
}
<style type="text/css">
    .webgrid-table {
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size: 1.2em;
        width: 100%;
        display: table;
        border-collapse: separate;
        border: solid 1px #ff6a00;
        background-color: white;
    }
 
        .webgrid-table td, th {
            border: 1px solid #ff6a00;
            padding: 3px 7px 2px;
            text-align:left;
        }
 
    .webgrid-header {
        background-color: #ff6a00;
        color: #ffffff;
        padding-bottom: 4px;
        padding-top: 5px;
        text-align: left;
    }
 
    .webgrid-footer {
    }
 
    .webgrid-row-style {
        padding: 3px 7px 2px;
    }
 
    .webgrid-alternating-row {
        background-color: #00ffff;
        padding: 3px 7px 2px;
    }
</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:

Image 19.

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:

Image 20.

Image 21.