آموزش ASP.Net به زبان ساده > آموزش مدل صفحات وب WP
درس چهاردهم : کار با کمک دهنده ترسیم جداول اطلاعاتی WebGrid در ASP.Net Web Pages
مقدمه :
در درس های قبل اقدام به ایجاد یک پایگاه داده به نام UniverCity و یک جدول به نام
Students درون آن نمودیم . سپس اطلاعات فرضی چندین دانشجو را در جدول وارد کردیم .
در درس قبلی همانطور که دیدید برای نمایش اطلاعات منبع داده ای خود ( اطلاعات دانشجویان
) به صورت یک جدول ، پس از اتصال به پایگاه داده ، به صورت دستی و با استفاده از یک
حلقه foreach و تگ های <table> ، <tr> و <td> ، جدولی را برای نمایش
اطلاعات ایجاد کردیم . به صورت کد زیر :
|
کد
|
@{
var db = Database.Open("UniverCity");
var selectQueryString = "SELECT * FROM Students
ORDER BY Name";
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"
/>
<title>نمایش اطلاعات
دانشجویان</title>
</head>
<body>
<h1 style="text-align:
center"> اطلاعات دانشجویان</h1>
<table border="1">
<tr>
<th> Id </th>
<th> نام </th>
<th> نام خانوادگی </th>
<th> رشته تحصیلی </th>
</tr>
@foreach (var row in db.Query(selectQueryString))
{
<tr>
<td> @row.Id </td>
<td> @row.Name </td>
<td> @row.Family </td>
<td align="right"> @row.Major </td>
</tr>
}
</table>
</body>
</html>
|
|
کد
|
|
Id
|
نام
|
نام خانوادگی
|
رشته تحصیلی
|
|
4
|
Ahmad
|
Karimi
|
SoftWare
|
|
1
|
Ali
|
Hosini
|
HardWare
|
|
2
|
Sahar
|
Bagheri
|
SoftWare
|
|
3
|
Shahab
|
Sharif
|
HardWare
|
|
کار فوق کمی زمانبر بوده و نیاز به کدنویسی حلقه و آشنایی کامل با تگ های HTML دارد . اما در ASP.Net Razor
راه ساده تری برای نمایش جدول وار اطلاعات وجود داشته و آن استفاده از کمک دهنده رسم
جدول یا WebGrid Helper است .
برای استفاده از این کمک دهنده ، کافی است به منبع داده ای خود متصل شده و سپس اطلاعات
مورد نظر را انتخاب نموده و درون یک متغیر بریزید . سپس در مکانی که می خواهید اطلاعات
به صورت جدول نمایش داده شوند ، کد فراخوان جدول را قرار می دهیم . برای درک بهتر به
مثال زیر دقت نمایید :
|
کد
|
@{
var db = Database.Open("UniverCity")
;
var selectQueryString = "SELECT * FROM
Students ORDER BY Name";
var data = db.Query(selectQueryString);
var grid = new WebGrid(data);
}
<html>
<head>
<title> WebGrid نمایش اطلاعات جدول بانک اطلاعاتی
به وسیله کمک دهنده</title>
</head>
<body>
<h2> جدول اطلاعات دانشجویان</h2>
<div id="grid">
@grid.GetHtml( )
</div>
</body>
</html>
|
|
کد
|
جدول اطلاعات دانشجویان
|
Id |
Name |
Family |
Major |
|
4 |
Ahmad |
Karimi |
SoftWare |
|
1 |
Ali |
Hosini |
HardWare |
|
2 |
Sahar |
Bagheri |
SoftWare |
|
3 |
Shahab |
Sharif |
HardWare |
|
تشریح نکات مثال :
- در بخش اول ، کد اتصال به منبع داده و دریافت اطلاعات از آن قرار داده
شده است . ابتدا به پایگاه داده متصل شده و سپس توسط یک دستور SQL اطلاعات مورد نظر
خود را از آن دریافت کرده و در متغیر selectQueryString
ریخته ایم . سپس به وسیله دستور ( )db.Query اطلاعات متغیر selectQueryString
را به صورت یک آرایه در متغیر data قرار داده ایم . سپس توسط دستور ( )WebGrid ،یک
جدول جدید را ساخته و برای نمایش در صفحه ، درون متغیر grid ریخته ایم .
- در بخش دوم کد ، توسط متد فراخوان کمک دهنده WebGrid ، در مکانی که
می خواستیم جدول را نمایش دهیم ، کد ( )grid.GetHtml@
را قرار داده ایم .
- برنامه به صورت اتوماتیک یک جدول ساخته و اطلاعات متغیر grid را نمایش می دهد .
برخلاف حالت قبلی ، که جدول را به صورت دستی تعیین کرده بودیم و جدولی ساده نمایش
داده می شد ، جدول تولید شده توسط کمک دهنده WebGrid دارای هدرها یا سر ستون های
قابل کلیک هستند . با کلیک بر روی این سر ستون ها می توانید ، اطلاعات هر ستون را
به صورت صعودی یا نزولی مرتب نمایید .
راجع این مطلب
سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...
>>>>> ورود به انجمن تخصصی
نطر خودتان درباره این صفحه را با ما در میان گذاشته و در صورت تمایل از Developer1
حمایت نمایید :