ASP.NET Web Pages基礎知識---使用WebGrid 幫助器
自己寫的 HTML
使用 Razor 程式碼顯示資料庫資料,所有的 HTML 標記都是手寫的:
例項
@{
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 align="right">@row.Price</td>
</tr>
}
</table>
</body>
</html>
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 align="right">@row.Price</td>
</tr>
}
</table>
</body>
</html>
使用 WebGrid 幫助器
WebGrid 幫助器提供了一種更簡單的顯示資料的方法。
WebGrid 幫助器:
- 自動建立一個 HTML 表格來顯示資料
- 支援不同的格式化選項
- 支援資料分頁顯示
- 支援通過點選列表標題進行排序
例項
@{
var db = Database.Open("SmallBakery") ;
var selectQueryString = "SELECT * FROM Product ORDER BY Id";
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>
var db = Database.Open("SmallBakery") ;
var selectQueryString = "SELECT * FROM Product ORDER BY Id";
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>
相關文章
- ASP.NET Web Pages – 幫助器簡介ASP.NETWeb
- ASP.NET Web Pages – Chart 幫助器簡介ASP.NETWeb
- ASP.NET 網頁- WebGrid 幫助器簡介ASP.NET網頁Web
- ASP.NET Web Pages基礎知識---Razor 例項:顯示圖片ASP.NETWeb
- ASP.NET Web Pages基礎知識---從文字檔案中讀取並顯示資料ASP.NETWeb
- ASP.NET Core基礎知識(十一)【Host之Web 主機】ASP.NETWeb
- Web測試基礎-Html基礎知識WebHTML
- ASP.NET Core 2.2 基礎知識(十三)【伺服器】ASP.NET伺服器
- Web前端基礎知識整理Web前端
- ASP.NET Core基礎知識(四)【路由】ASP.NET路由
- ASP.NET Core基礎知識(一)【概述】ASP.NET
- Python基礎(09):幫助Python
- ASP.NET Core 2.2 基礎知識(六)【Configuration】ASP.NET
- 【Web前端基礎知識】如何使用Canvas繪製圓形Web前端Canvas
- 伺服器基礎知識伺服器
- 處理器基礎知識
- ASP.NET Web Pages – 物件簡介ASP.NETWeb物件
- ASP.NET Core 2.2 基礎知識(七)【選項】ASP.NET
- CTF | Web安全 Part1:基礎知識Web
- WEB網路滲透的基礎知識Web
- 《Web 自動化》基礎知識腦圖Web
- ASP.NET 網頁- WebMail 幫助器簡介ASP.NET網頁WebAI
- 【ASP.NET Core】標記幫助器——抽象層ASP.NET抽象
- 一千行幫你學會mysql基礎知識MySql
- ASP.NET Core基礎知識(二)【應用啟動】ASP.NET
- ASP.NET Core 2.2 基礎知識(十)【中介軟體】ASP.NET
- Python基礎函式使用知識Python函式
- 基礎知識
- 【ASP.NET Core】標記幫助器——元素篩選ASP.NET
- 機器學習基礎知識1機器學習
- 【知識分享】 伺服器基礎知識【初學者必看】伺服器
- ASP.NET Web Pages – 資料夾簡介ASP.NETWeb
- ASP.NET Core 2.2 基礎知識(八)【日誌記錄】ASP.NET
- ASP.NET Core 2.2 基礎知識(九)【處理錯誤】ASP.NET
- ASP.NET Core基礎知識(十四)【發出 HTTP 請求】ASP.NETHTTP
- ASP.NET Core 基礎知識(十二)【Host之通用主機】ASP.NET
- HTML5學習之Web Storage基礎知識HTMLWeb
- 【爬蟲】第一章-Web基礎知識爬蟲Web