سبد خرید (0)

آموزش ASP.NET-مفهوم WebGrid

WebGrid - یکی از مفید ترین Helper های ASP.NET می باشد.


 ایجاد HTML  توسط خودتان

در بیاموزهای قبلی، ملاحظه فرمودید که چگونه می توان با استفاده از کد Razor، اطلاعات پایگاه داده را نمایش داد، و کدهای HTML را ایجاد کرد.

Database مثال

@{
var db = Database.Open("SmallBakery"); 
var selectQueryString = "SELECT * FROM Product ORDER BY Name"; 
}

<html> 
<body> 
<h1>Small Bakery Products</h1> 
<table> 
<tr>
<th>Id</th> 
<th>Product</th> 
<th>Description</th> 
<th>Price</th> 
</tr>
@foreach(var row in db.Query(selectQueryString))
{

<tr> 
<td>@row.Id</td> 
<td>@row.Name</td> 
<td>@row.Description</td> 
<td style="text-align:right">@row.Price</td> 
</tr> 
}
</table> 
</body> 
</html>

خروجی کد بالا:

Small Bakery Products

IdProductDescriptionPrice
1 Bread Baked fresh every day 2.99
2 Strawberry Cake Made with organic strawberries 9.99
3 Apple Pie Second only to your mom's pie 12.99
4 Pecan Pie If you like pecans, this is for you 10.99
5 Lemon Pie Made with the best lemons in the world 11.99
6 Cupcakes Your kids will love these 9.99

 استفاده از  WebGrid Helper

با استفاده از WebGrid Helper نمایش اطلاعات کاری بسیار ساده است.

WebGrid helper:

  • به طور اتوماتیک جدول HTML ی را برای نمایش اطلاعات تنظیم می کند.
  • گزینه های مختلفی را برای فرمت دهی پشتیبانی می کند.
  • صفحه بندی اطلاعات را پشتیبانی می کند.
  • مرتب سازی هر ستون را با کلیک روی نام آن ستون پشتیبانی می کند.

WebGrid مثال

@{ 
var db = Database.Open("SmallBakery") ; 
var selectQueryString = "SELECT * FROM Product ORDER BY Name"; 
var data = db.Query(selectQueryString); 
var grid = new WebGrid(data); 
}

<html> 
<head> 
<title>Displaying Data Using the WebGrid Helper</title> 
</head> 
<body> 
<h1>Small Bakery Products</h1> 
<div id="grid"> 
@grid.GetHtml()
</div> 
</body> 
</html>

خروجی کد بالا:

Small Bakery Products

IdNameDescriptionPrice
1 Bread Baked fresh every day 2,99
5 Cupcakes Your kids will love these 7,99
4 Lemon Pie Made with the best lemons in the world 11,99
3 Pecan Pie If you like pecans, this is for you 12,99
2 Strawberry Cake Made from organic strawberries 9,99