فراخوانی تابع Javascript با كلیك روی HtmlActionLink در ASP.NET MVC
در این مقاله نحوه فراخوانی تابع جاوا اسكریپت هنگام كلیك كردن روی HtmlActionLink با ASP.Net MVC Razor توضیح خواهیم داد.
هنگامی كه روی ActionLink درون ردیف WebGrid كلیك می شود، یك تابع JavaScript اجرا میشود كه داده های ردیف WebGrid را گرفته و با استفاده از جعبه پیام هشدار JavaScript نمایش داده می دهد.
بانك اطلاعاتی
توجه! ما از پایگاه داده 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 با یك رویداد كلیك JavaScript مشخص شده است .
در داخل كنترل رویداد كلیك jQuery، مرجع جدول HTML تعیین شده و سپس با استفاده از این مرجع، داده ها از هر سلول fetched با استفاده از جعبه پیام هشدار JavaScript نمایش داده شده .
@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 { @onclick = "return GetSelectedRow(this);" })</text>)
))
<script type="text/javascript">
function GetSelectedRow(link) {
var row = link.parentNode.parentNode;
var message = "انتخاب ردیف:";
message += "\n\كد مشتری: " + row.getElementsByTagName("TD")[0].innerHTML;
message += "\nنام مشتری: " + row.getElementsByTagName("TD")[1].innerHTML;
message += "\nشهر: " + row.getElementsByTagName("TD")[2].innerHTML;
message += "\nكشور: " + row.getElementsByTagName("TD")[3].innerHTML;
alert(message);
return false;
}
</script>
</body>
</html>