كلیك روی Html.ActionLink با استفاده از تابع jQuery در ASP.Net MVC
در این مقاله توضیح میدهیم كه چگونه میتوان با استفاده از تابع jQuery در Html.ActionLink با ASP.Net MVC Razor كلیك كنید.
هنگامی كه روی ActionLink درون ردیف WebGrid كلیك می شود، یك تابع jQuery در اجرا میشود كه داده های ردیف WebGrid را گرفته و با استفاده از جعبه پیام هشدار جی كوئری نمایش داده می دهد.
بانك اطلاعاتی
توجه! ما از پایگاه داده Northwind مایكرو سافت استفاده میكنیم كه شما میتوانید از لینك زیر آن را دانلود كنید!
دانلود اسكریپت SQL
Model
ابتدا از طریق Entity Framework به جدول پایگاه داده متصل می شویم .
Controller
Controller متشكل از روش عمل زیر است.
عملیات GET
چارچوب Entity در حال حاضر پیكربندی شده و از این رو اكنون می توانیم Controller ایجاد كنیم و كد را برای بارگیری اطلاعات مشتریان از جدول Costumers پایگاه Northwind ایجاد كنیم .
در داخل روش Action Index، سوابق مشتری با استفاده از چارچوب Entity چیده شده و به View باز می گردد.
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
NorthwindEntities entities = new NorthwindEntities();
return View(entities.Customers.ToList());
}
}
View
درون View، در خط اول، مشتری به عنوان IEnumerable اعلام می شود كه مشخص می كند كه مدل به عنوان یك مجموعه در دسترس خواهد بود.
WebGrid با مجموعه ای از مدل IEnumerable از اشیاء كلاس مشتری Entity به عنوان منبع اولیه مشخص شده است.
WebGrid با استفاده از روش GetHtml با پارامترهای زیر ایجاد می شود.
HtmlAttributes - برای تنظیم ویژگی های HTML به جدول HTML ایجاد شده توسط WebGrid مانند شناسه، نام، كلاس و غیره استفاده می شود.
Columns - مشخص میكند كه چه ستون هایی كه در WebGrid نمایش داده شوند و همچنین اجازه می دهد تا متن خاص سربرگ را برای ستون تنظیم كنید.
آخرین ستون WebGrid شامل ActionLink است كه با استفاده از روش Html.ActionLink Helper ایجاد شده است.
ActionLink با یك رویداد كلیك jQuery مشخص شده است .
در داخل كنترل رویداد كلیك jQuery، مرجع جدول HTML تعیین شده و سپس با استفاده از این مرجع، داده ها از هر سلول fetched با استفاده از جعبه پیام هشدار جی كوئری نمایش داده شده .
@model IEnumerable<Customer>
@{
Layout = null;
WebGrid webGrid = new WebGrid(source: Model, canSort: false);
}
<!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;
}
.Grid
{
border: 1px solid #ccc;
border-collapse: collapse;
}
.Grid th
{
background-color: #F7F7F7;
font-weight: bold;
}
.Grid th, .Grid td
{
padding: 5px;
border: 1px solid #ccc;
}
.Grid, .Grid table td
{
border: 0px solid #ccc;
}
.Grid a, .Grid a:visited
{
color:blue;
}
</style>
</head>
<body>
@webGrid.GetHtml(
htmlAttributes: new { @id = "WebGrid", @class = "Grid" },
columns: webGrid.Columns(
webGrid.Column("CustomerID", "شماره مشتری"),
webGrid.Column("ContactName", "نام مشتری"),
webGrid.Column("City", "شهر"),
webGrid.Column("Country", "كشور"),
webGrid.Column(null, null, format: @<text>@Html.ActionLink("انتخاب", null, null, new { @class = "select" })</text>)
))
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$("body").on("click", ".select", function () {
var row = $(this).closest("tr");
var message = "انتخاب ردیف:";
message += "\n\nشماره مشتری: " + row.find("td").eq(0).html();
message += "\nنام مشتری: " + row.find("td").eq(1).html();
message += "\nشهر: " + row.find("td").eq(2).html();
message += "\nكشور: " + row.find("td").eq(3).html();
alert(message);
return false;
});
</script>
</body>
</html>