ایجاد 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

Id Product Description Price
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

Id Name Description Price
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