Web Matrix. Отображение данных: Grid
Определение и форматирование столбцов
1.Создадим новый CSHTML файл WebGridColumnFormat.cshtml:
2.Заменим начальный код страницы WebGridColumnFormat.cshtml на:
@{
var db = Database.Open("SmallBakery") ;
var selectQueryString = "SELECT * FROM Product ORDER BY Id";
var data = db.Query(selectQueryString);
var grid = new WebGrid(data);
}
<!DOCTYPE html>
<html>
<head>
<title>Displaying Data Using the WebGrid Helper (Custom Formatting)</title>
<style type="text/css">
.product { width: 200px; font-weight:bold;}
</style>
</head>
<body>
<h1>Small Bakery Products</h1>
<div id="grid">
@grid.GetHtml(
columns: grid.Columns(
grid.Column("name", "Product", style: "product"),
grid.Column("Description", format:@<i>@item.description</i>),
grid.Column("Price", format:@<text>$@item.price</text>)
)
)
</div>
</body>
</html>Как и в предыдущем пункте практического занятия, в этом используется метод grid.GetHtml() для отображения Grid-таблицы, но только используется форматирование и определение колонок:
…
<style type="text/css">
.product { width: 200px; font-weight:bold;}
</style>
…
columns: grid.Columns(
grid.Column("name", "Product", style: "product"),
grid.Column("Description", format:@<i>@item.description</i>),
grid.Column("Price", format:@<text>$@item.price</text>)
)Форматирование и определение колонки "name" из базы данных, описывается в первой:
…
<style type="text/css">
.product { width: 200px; font-weight:bold;}
</style>
…
grid.Column("name", "Product", style: "product")Где "name" – это название столбца базы данных
"Product" – заголовок колонки (по умолчанию используется имя колонки таблицы базы данных)
style: "product" – использование CSS класса "product" (ширина: 200 пикселей, и жирный шрифт)
Колонкам "Description" и "Price" можно задать формат использую ключевое слово format :
grid.Column("Description", format:@<i>@item.description</i>),
grid.Column("Price", format:@<text>$@item.price</text>)Где первый параметр grid.Column заголовок столбца, второй параметр форматирование столбца.
3.Запустим веб-страницу. В браузере отобразиться таблица с примененным к содержанию стилями:
