최신 웹 개발 튜토리얼
 

ASP.NET웹 페이지 - WebGrid 도우미


WebGrid - 많은 유용한 ASP.NET 웹 도우미 중 하나입니다.


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 style="text-align:right"> @row.Price </td> 
</tr> 
}
</table> 
</body> 
</html>
»실행 예

WebGrid 도우미를 사용하여

WebGrid 도우미를 사용하여 데이터를 표시하는 쉬운 방법입니다.

WebGrid 도우미 :

  • 자동으로 데이터를 표시하는 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>
»실행 예