Опубликован: 15.06.2011 | Доступ: свободный | Студентов: 701 / 55 | Оценка: 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: