Render Partial View As Modal Popup Using AJAX Call with JSON

Rahul Kumar Saxena

10y257.1k20100Article

AJAX JSONAjax CallModal PopupRender Partial View

20 Comments

Join the conversation! Your thoughts help the community grow.

Rajesh Kumar4y ago
Nice video sir very helpful
Suraj Kumar4y ago
Good article with sample code attached. Taken help for m current project.
Rajesh Kumar8y ago
Nice article
Delpin Susai Raj10y ago
Nice
Subash10y ago
Nice
Vignesh Mani10y ago
Nice
Rahul Kumar Saxena10y ago
As Requested Will write with AngularJS soon
Rahul Kumar Saxena10y ago
Thanks 2 All
Rahul Kumar Saxena10y ago
Thanks Kuppurasu Nagaraj
Rahul Kumar Saxena10y ago
Thanks Mohammed Ibrahim
Rahul Kumar Saxena10y ago
Thanks Vivek Kumar
Rahul Kumar Saxena10y ago
Thanks Debasis Saha
Kuppurasu Nagaraj10y ago
Nice Sharing...
Mohammed Ibrahim10y ago
nice
Vivek Kumar10y ago
Nice article.
Debasis Saha10y ago
Good One..
Rahul Kumar Saxena10y ago
thanks gowtham
Rahul Kumar Saxena10y ago
Thanks Rahul I will try to write more
Gowtham Rajamanickam10y ago
nice article
Rahul Chavan10y ago
Nice article Rahul. Can you give more details on MVC_WebGrid_PartialView_ModalPopup

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,

new

project

Below is my Data Table.

table

Data in my Data Table.

data

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

add

add

add

add

add

add

add

Now time to add a new controller.

Add a View here.

view

view

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,

view

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:

config

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:

app