In this example
we explain that how to display details of the Grid View Row inside Modal Popup
in MVC using jQuery. Or how to display the details of the detail page in popup
when click on the master page record using jQuery in MVC.here we demonstrate
that how to implement the master detail concepts in MVC using jQuery to display
the child record in modal popup.
So how to
display the details page data or row in popup based on the click of the master
page record in MVC using jQuery. Here we use the partial view concept to
display the detail data in poup.so how to implement the master data will be
displayed in a grid view and the details data of the grid view will be
displayed in partial view inside jQuery Modal Popup.
Controller:
public class EmployeeController
: Controller
{
// GET: Home
public ActionResult Index()
{
NorthwindEntities
entities = new NorthwindEntities();
return
View(from Employee in
entities.Employees.Take(10)
select Employee);
}
[HttpPost]
public ActionResult Details(string
EmployeeId)
{
NorthwindEntities
entities = new NorthwindEntities();
return
PartialView("Details",
entities.Employees.Find(EmployeeId));
}
}
View:
@model
IEnumerable<Partial_View_MVC.Employee>
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>ASP.Net
MVC Master Detail example: Display details of Grid Row inside Popup using
jQuery</title>
</head>
<body>
<h4>Employees</h4>
<hr/>
<table cellpadding="0" cellspacing="0" id="EmployeeGrid">
<tr>
<th>EmployeeID</th>
<th>Contact Name</th>
<th>City</th>
<th>Country</th>
<th></th>
</tr>
@foreach (Employee Employee in Model)
{
<tr>
<td>@Employee.EmployeeID</td>
<td>@Employee.ContactName</td>
<td>@Employee.City</td>
<td>@Employee.Country</td>
<td><a class="details" href="javascript:;">View</a></td>
</tr>
}
</table>
<div id="dialog" style="display: none">
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js"
type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css"
rel="stylesheet" type="text/css"/>
<script type="text/javascript">
$(function
() {
$("#dialog").dialog({
autoOpen: false,
modal: true,
title: "View
Details"
});
$("#EmployeeGrid
.details").click(function () {
var
EmployeeId = $(this).closest("tr").find("td").eq(0).html();
$.ajax({
type: "POST",
url: "/Employee/Details",
data: '{EmployeeId: "' + EmployeeId + '" }',
contentType: "application/json; charset=utf-8",
dataType: "html",
success: function (response) {
$('#dialog').html(response);
$('#dialog').dialog('open');
},
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
alert(response.responseText);
}
});
});
});
</script>
</body>
</html>
Partial View:
@model
Partial_View_MVC.Employee
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top"><b>@Html.DisplayNameFor(model => model.Address):</b></td>
<td>
@Html.DisplayFor(model =>
model.Address)
<br/>
@Html.DisplayFor(model =>
model.City),
@Html.DisplayFor(model =>
model.PostalCode)
<br/>
@Html.DisplayFor(model =>
model.Country)
</td>
</tr>
</table>
0 comments:
Post a Comment