وب گرید (WebPages WebGrid)
وب گرید ابزار جدول ساز آماده است. «وب گرید (WebGrid)» یعنی کم کردن کدنویسی جدول ها. مثل جدول نمره ها که خودکار صفحه بندی و مرتب سازی دارد.
نمایش دستی با Razor
گاهی خودت جدول HTML می سازی. سپس با «حلقه (Loop)» سطرها را می چینی. این روش کنترل کامل می دهد؛ اما طولانی می شود.
@{
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>
استفاده از هلپر 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>
گام های عملی
- اتصال به دیتابیس را آماده کن.
- کوئری را بنویس و داده بگیر.
- شیء WebGrid بساز و GetHtml را نمایش بده.
نکته: برای مرور مبانی از بخش پایگاه داده ها کمک بگیر. همچنین راهنمای هلپرها را ببین. برای تاکید سئو، صفحه وب گرید را نیز نشانه گذاری کن.
جمع بندی سریع
- وب گرید جدول را خودکار می سازد.
- مرتب سازی با کلیک روی ستون است.
- صفحه بندی آماده و سریع است.
- کد کمتر، سرعت بیشتر داری.