Опубликован: 15.06.2011 | Доступ: свободный | Студентов: 701 / 55 | Оценка: 4.25 / 4.00 | Длительность: 14:09:00
Самостоятельная работа 5:

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.Запустим веб-страницу. В браузере отобразиться таблица с примененным к содержанию стилями: