Спонсор: Microsoft
Вы можете этот курс.
Опубликован: 15.06.2011 | Доступ: свободный | Студентов: 708 / 59 | Оценка: 4.25 / 4.00 | Длительность: 14:09:00
Специальности: Программист, Разработчик интернет-проектов
Теги:
Самостоятельная работа 5:
Web Matrix. Отображение данных: Grid
Использование стилей с Grid элементом
1.Создадим новый CSHTML файл WebGridTableFormat.cshtml:
2.Заменим начальный код страницы WebGridTableFormat.cshtml на:
@{
var db = Database.Open("SmallBakery");
var selectQueryString = "SELECT * FROM Product ORDER BY Id";
var data = db.Query(selectQueryString);
var grid = new WebGrid(source: data, defaultSort: "Name");
}
<!DOCTYPE html>
<html>
<head>
<title>Displaying Data Using the WebGrid Helper (Custom Table Formatting)</title>
<style type="text/css">
.grid { margin: 4px; border-collapse: collapse; width: 600px; }
.head { background-color: #E8E8E8; font-weight: bold; color: #FFF; }
.grid th, .grid td { border: 1px solid #C0C0C0; padding: 5px; }
.alt { background-color: #E8E8E8; color: #000; }
.product { width: 200px; font-weight:bold;}
</style>
</head>
<body>
<h1>Small Bakery Products</h1>
<div id="grid">
@grid.GetHtml(
tableStyle: "grid",
headerStyle: "head",
alternatingRowStyle: "alt",
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>В данном коде используются CSS классы ( grid, head, grid th, grid td, alt ) для задания стиля элементу Grid, и в методе grid.GetHtml , параметрам tableStyle, headerStyle, and alternatingRowStyle присваиваются эти классы.
3.Запустим веб-страницу. В браузере отобразиться таблица с применением стилей к элементу Grid:
