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.