Web Matrix. Отображение данных: Grid

Разбить на страницы

Показывать лекцию целиком

Отображение данных с помощью Grid

1.Откроем проект, Практического занятия № 4– SmallBakery:

(рис 10.1)

2.Перейдем в рабочее пространство ( workspace ) "Файлы", и создадим новый CSHTML файл WebGridBasic.cshtml:

(рис 10.2)

3.Заменим начальный код страницы WebGridBasic.cshtml на:

@{ 
    var db = Database.Open("SmallBakery") ;
    var selectQueryString = "SELECT * FROM Product";
    var data = db.Query(selectQueryString);
    var grid = new WebGrid(data);
}
<!DOCTYPE html>
<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>

С помощью метода Database.Open открывается база данных SmallBakery и создается SQL запрос на выборку данных:

var db = Database.Open("SmallBakery") ;
var selectQueryString = "SELECT * FROM Product";

Переменной data присваивается результат выполненного SQL запроса. Далее с помощью WebGrid создается новая Grid-таблица на основе переменной data :

var data = db.Query(selectQueryString);
    var grid = new WebGrid(data);

Для отображения Grid-таблицы в HTML части кода прописывается строчка:

@grid.GetHtml()

4.Запустим веб-страницу. В браузере отобразиться таблица со списком продуктов из базы данных SmallBakery:

(рис 10.3)

Определение и форматирование столбцов

1.Создадим новый CSHTML файл WebGridColumnFormat.cshtml:

(рис 10.4)

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

(рис 10.5)

Использование стилей с Grid элементом

1.Создадим новый CSHTML файл WebGridTableFormat.cshtml:

(рис 10.6)

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:

(рис 10.7)

Разбиение данных на страницы

1.Создадим новый CSHTML файл WebGridPaging.cshtml:

(рис 10.8)

2.Заменим начальный код страницы WebGridPaging.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", 
                           rowsPerPage: 3);
}

<!DOCTYPE html>
<html>
    <head>
        <title>Displaying Data Using the WebGrid Helper (with Paging)</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>

Разбиение данных на страницы осуществляется с помощью параметра rowsPerPage , которому соответствует число строк на одной странице элемена Grid:

var grid = new WebGrid(source: data,
                           defaultSort: "name", 
                           rowsPerPage: 3);

В данном фрагменте число строк равно 3 .

2.Запустим веб-страницу. В браузере отобразится таблица разбитая на страницы:

(рис 10.9)

Страницы:

Отображение данных с помощью Grid

1.Откроем проект, Практического занятия № 4– SmallBakery:

(рис 10.1)

2.Перейдем в рабочее пространство ( workspace ) "Файлы", и создадим новый CSHTML файл WebGridBasic.cshtml:

(рис 10.2)

3.Заменим начальный код страницы WebGridBasic.cshtml на:

@{ 
    var db = Database.Open("SmallBakery") ;
    var selectQueryString = "SELECT * FROM Product";
    var data = db.Query(selectQueryString);
    var grid = new WebGrid(data);
}
<!DOCTYPE html>
<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>

С помощью метода Database.Open открывается база данных SmallBakery и создается SQL запрос на выборку данных:

var db = Database.Open("SmallBakery") ;
var selectQueryString = "SELECT * FROM Product";

var data = db.Query(selectQueryString);
    var grid = new WebGrid(data);

Для отображения Grid-таблицы в HTML части кода прописывается строчка:

@grid.GetHtml()

4.Запустим веб-страницу. В браузере отобразиться таблица со списком продуктов из базы данных SmallBakery:

(рис 10.3)

Определение и форматирование столбцов

1.Создадим новый CSHTML файл WebGridColumnFormat.cshtml:

(рис 10.4)

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>

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

(рис 10.5)

Использование стилей с Grid элементом

1.Создадим новый CSHTML файл WebGridTableFormat.cshtml:

(рис 10.6)

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>

3.Запустим веб-страницу. В браузере отобразиться таблица с применением стилей к элементу Grid:

(рис 10.7)

Разбиение данных на страницы

1.Создадим новый CSHTML файл WebGridPaging.cshtml:

(рис 10.8)

2.Заменим начальный код страницы WebGridPaging.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", 
                           rowsPerPage: 3);
}

<!DOCTYPE html>
<html>
    <head>
        <title>Displaying Data Using the WebGrid Helper (with Paging)</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>

var grid = new WebGrid(source: data,
                           defaultSort: "name", 
                           rowsPerPage: 3);

В данном фрагменте число строк равно 3 .

2.Запустим веб-страницу. В браузере отобразится таблица разбитая на страницы:

(рис 10.9)

Занятие пройдено

Предыдущее занятие Занятие пройдено Следующее занятие

Вернуться к учебному плану

Web Matrix. Отображение данных: Grid

Отображение данных с помощью Grid

Определение и форматирование столбцов

Использование стилей с Grid элементом

Разбиение данных на страницы

Отображение данных с помощью Grid

Определение и форматирование столбцов

Использование стилей с Grid элементом

Разбиение данных на страницы

Купить дополнительную попытку

Вы действительно хотите купить ещё одну попытку для прохождения тестирования?

Успешно!

Напишите нам, если у вас есть вопросы

Уважаемые пользователи ИНТУИТ!

Уважаемые пользователи ИНТУИТ!

Добро пожаловать на обновлённый сайт НОУ «ИНТУИТ»!