Учебный курс по WebMatrix, глава 9. Отображение данных

  • Article

Это продолжение учебного курса по WebMatrix. Предыдущие части руководство можно найти здесь:

В этой главе описывается метод доступа к данным в базе данных и отображения их с помощью веб-страниц ASP.NET.

Отображение данных вспомогательным объектом WebGrid

До настоящего момента отображение данных на странице выполнялось вручную. Однако существует и более легкий способ — применение вспомогательного объекта WebGrid. Он служит для отображения HTML-таблиц с данными и поддерживает параметры форматирования, создание способа перелистывания данных и сортировку данных простым щелчком заголовка столбца.

1. Создайте новый CSHTML-файл на веб-сайте с именем ListProducts_WebGrid.cshtml и замените существующую разметку следующим кодом:

@{

    var db = Database.Open("SmallBakery");

    var selectQueryString = "SELECT * FROM Products ORDER BY Id";

    var data = db.Query(selectQueryString);

    var grid = new WebGrid(data, defaultSort: "Name", rowsPerPage: 5);

}

<!DOCTYPE html>

<html>

    <head>

        <title>Отображение данныхвWebGrid</title>

        <style type="text/css">

             h1 {font-size: 14px;}

            .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; }

        </style>

    </head>

    <body>

    <h1>Продукция малой булочной-пекарни</h1>

    @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>)

        )

    )

</html>

Как обычно, сначала следует открыть файл базы данных SmallBakery.sdf и создать инструкцию SQL Select:

"SELECT * FROM Products ORDER BY Id";

Для применения вспомогательного объекта WebGrid необходимо выполнить следующие действия:

    var data = db.Query(selectQueryString);

    var grid = newWebGrid(data, defaultSort: "Name", rowsPerPage: 5);

Эта операция создает новый объект WebGrid и назначает его переменной сетки. В ходе создания объекта WebGrid сначала выполняется инструкция SQL (посредством db.Query), а результаты затем передаются в объект WebGrid. При создании объекта WebGrid можно указать такие параметры, как порядок сортировки по умолчанию (в данном случае — по столбцу Name) и число элементов, отображаемых на каждой "странице" сетки.

Для визуализации данных вспомогательным объектом WebGrid можно применить следующую кодовую инструкцию в текстовой области страницы:

@grid.GetHtml()

(Для сетки используется та же переменная, что и при создании объекта WebGrid.)

Результаты запроса отображаются в сетке. При желании можно отобразить только отдельные столбцы:

@grid.GetHtml(

columns: grid.Columns(

     grid.Column("Name"),

            grid.Column("Description"),

     grid.Column("Price")

))

Как уже упоминалось, во вспомогательном объекте WebGrid можно задать множество параметров. Приведенный выше полностью пример демонстрирует, как задается форматирование (стили CSS) для сетки в целом, а также стиль для отдельных столбцов и текста заголовков столбцов:

@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>)

    )

2. Просмотрите страницу в браузере. Чтобы сортировать данные по столбцу, щелкните заголовок этого столбца. Чтобы пролистать данные, щелкните номер страницы внизу:

clip_image002

Подключение к базе данных

Подключиться к базе данных можно двумя способами. Первый способ — использование пути к файлу базы данных. Для этого путь передается методу Database.Open, как показано в следующем примере.

var db = Database.Open("Bakery");

Как правило, SDF-файл находится в папке App_Data веб-сайта. В силу ряда особенностей эта папка специально предназначена для хранения данных. Например, предоставленные ей надлежащие разрешения позволяют веб-сайту выполнять чтение и запись данных, а в качестве меры безопасности WebMatrix запрещает доступ к файлам из этой папки.

Кроме того, можно явно задать полный путь, как показано в следующем примере.

var db = Database.Open(

@"Data Source=C:\SmallBakery\App_Data\SmallBakery.sdf");

Однако это решение менее гибко, поскольку в случае перемещения сайта путь в прежней кодовой инструкции станет неверным.

Другой способ — применение строки подключения, которая содержит информацию о том, как подключиться к базе данных. Она может содержать путь к файлу или имя базы данных SQL Server на локальном или удаленном сервере наряду с именем пользователя и паролем для входа на этот сервер (если данные хранятся в версии SQL Server под централизованным управлением, то информация для подключения к базе данных всегда задается с помощью строки подключения).

В WebMatrix строки подключения хранятся в XML-файле с именем Web.config. Как подразумевает само имя, файл Web.config в корневом каталоге веб-сайта служит для хранения информации о нестандартной конфигурации сайта, включая все строки подключения, которые могут потребоваться. Пример строки подключения из файла Web.config может выглядеть следующим образом.

<connectionStrings>

<add name="SmallBakeryConnectionString"

connectionString="Data Source=|DataDirectory|\SmallBakery.sdf"/>

</connectionStrings>

В данном примере для указания на SDF-файл в строке подключения используется путь, однако она может указывать и на сервер.

Для подключения к базе данных посредством строки подключения в коде применяется метод Database.OpenConnectionString, которому передается имя предполагаемой к использованию строки. Следующий пример демонстрирует способ подключения к базе данных SmallBakery.sdf с помощью строки подключения, фигурировавшей в приведенном выше примере.

@{

var db = Database.OpenConnectionString("SmallBakeryConnectionString");

}

Благодарности

Благодарим Виталия Коробцева, руководителя инновационных проектов “ООО Валькирия”, за неоценимую помощь в подготовке этого руководства.