نمایش جزئیات Grid Row در داخل Popup با استفاده از JQuery در ASP.NET MVC
در این مقاله من با مثال توضیح خواهم داد که چگونه یک برنامه Master Detail در ASP.Net MVC ایجاد کنیم.
سوابق از پایگاه داده یعنی داده های اصلی در Grid نمایش داده می شود و جزئیات ردیف Grid در Partial View در داخل پنجره ی جی کوئری Modal Popup نمایش داده می شود.
بانك اطلاعاتی
توجه! ما از پایگاه داده Northwind مایكرو سافت استفاده میكنیم كه شما میتوانید از لینك زیر آن را دانلود كنید!
دانلود اسكریپت SQL
Model
ابتدا از طریق Entity Framework به جدول پایگاه داده متصل می شویم .
Controller
کنترل کننده متشکل از دو روش عمل است.
روش GET
در داخل این روش عمل، سوابق 10 مشتری برتر از جدول مشتریان Northwind Database گرفته شده و به View باز می گردد.
روش POST جی کوئری
در این روش ابتدا با استفاده از id دریافت شده اطلاعات مشتری را به view برای نمایش باز میگرداند.
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
NorthwindEntities entities = new NorthwindEntities();
return View(from customer in entities.Customers.Take(10)
select customer);
}
[HttpPost]
public ActionResult Details(string customerId)
{
NorthwindEntities entities = new NorthwindEntities();
return PartialView("Details", entities.Customers.Find(customerId));
}
}
View
درون View، در اولین خط اول، Entity مشتری به عنوان IEnumerable اعلام می شود که مشخص می کند که آن به صورت مجموعه در دسترس خواهد بود.
برای نمایش سوابق، یک جدول HTML استفاده می شود. یک حلقه بر روی مدل اجرا می شود که ردیف جدول HTML را با سوابق مشتری تولید می کند.
ستون آخر جدول HTML متشکل از یک Link Anchor است. Link Anchor HTML دارای یک رویداد jQuery Click است.
هنگامی که Link Anchor کلیک می شود، یک ارتباط جی کوئری AJAX به روش Action Controller ساخته می شود و جزئیات به عنوان HTML نمایش داده می شود که در نهایت با استفاده از پنجره Popup Dialog Modal نمایش داده می شود.
این کدهای مربوز به صفحه partil view میباشد.
@model Partial_View_MVC.Customer
<style type="text/css">
body {
font-family: Arial;
font-size: 10pt;
}
table, table td {
border: 0px solid #fff;
}
</style>
<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>
صفحه index.cshtml
@model IEnumerable<Partial_View_MVC.Customer>
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<style type="text/css">
body {
font-family: Arial;
font-size: 10pt;
}
table {
border: 1px solid #ccc;
border-collapse: collapse;
background-color: #fff;
}
table th {
background-color: #B8DBFD;
color: #333;
font-weight: bold;
}
table th, table td {
padding: 5px;
border: 1px solid #ccc;
}
table, table table td {
border: 0px solid #ccc;
}
</style>
</head>
<body>
<h4>Customers</h4>
<hr />
<table cellpadding="0" cellspacing="0" id="CustomerGrid">
<tr>
<th>CustomerID</th>
<th>Contact Name</th>
<th>City</th>
<th>Country</th>
<th></th>
</tr>
@foreach (Customer customer in Model)
{
<tr>
<td>@customer.CustomerID</td>
<td>@customer.ContactName</td>
<td>@customer.City</td>
<td>@customer.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"
});
$("#CustomerGrid .details").click(function () {
var customerId = $(this).closest("tr").find("td").eq(0).html();
$.ajax({
type: "POST",
url: "/Home/Details",
data: '{customerId: "' + customerId + '" }',
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>