Учебный курс по WebMatrix, глава 9. Отображение данных
Это продолжение учебного курса по WebMatrix. Предыдущие части руководство можно найти здесь:
- Учебный курс по WebMatrix, глава 1. Начало работы с WebMatrix и веб-страницами ASP.NET
- Учебный курс по WebMatrix, глава 2. Использование кода веб-страниц ASP.NET
- Учебный курс по WebMatrix, глава 3. Более сложный пример на ASP.NET
- Учебный курс по WebMatrix, глава 4. Знакомство с синтаксисом Razor. Рекомендации по программированию
- Учебный курс по WebMatrix, глава 5. Знакомство с синтаксисом Razor, серверный код и ASP.NET
- Учебный курс по WebMatrix, глава 6. Знакомство с синтаксисом Razor. Обработка ошибок
- Учебный курс по WebMatrix, глава 7. Работа с формами
- Учебный курс по WebMatrix, глава 8. Работа с данными
В этой главе описывается метод доступа к данным в базе данных и отображения их с помощью веб-страниц 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. Просмотрите страницу в браузере. Чтобы сортировать данные по столбцу, щелкните заголовок этого столбца. Чтобы пролистать данные, щелкните номер страницы внизу:
Подключение к базе данных
Подключиться к базе данных можно двумя способами. Первый способ — использование пути к файлу базы данных. Для этого путь передается методу 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");
}
Благодарности
Благодарим Виталия Коробцева, руководителя инновационных проектов “ООО Валькирия”, за неоценимую помощь в подготовке этого руководства.