Представляем веб-страницы ASP.NET-отображение данных

от Tom фитзмаккен

В этом руководстве показано, как создать базу данных в WebMatrix и как отображать данные базы данных на странице при использовании веб-страницы ASP.NET (Razor). Предполагается, что вы выполнили цикл по ознакомлению с веб-страницы ASP.NET программированием.

Из этого руководства вы узнаете, как выполнять такие задачи:

  • Использование средств WebMatrix для создания таблиц базы данных и базы данных.
  • Использование средств WebMatrix для добавления данных в базу данных.
  • Отображение данных из базы данных на странице.
  • Инструкции по выполнению команд SQL в веб-страницы ASP.NET.
  • Настройка вспомогательного метода WebGrid для изменения отображения данных и добавления разбиения на страницы и сортировки.

Обсуждаемые функции и технологии:

  • Инструменты базы данных WebMatrix.
  • вспомогательный метод WebGrid.

Что вы создадите

В предыдущем учебном курсе были представлены веб-страницы ASP.NET (файлы . cshtml ), основы синтаксис Razor и вспомогательные методы. В этом руководстве вы начнете создавать фактическое веб-приложение, которое будет использоваться для остальной части ряда. Приложение — это простое приложение для фильмов, которое позволяет просматривать, добавлять, изменять и удалять сведения о фильмах.

После завершения работы с этим руководством вы сможете просмотреть список фильмов, который выглядит как на этой странице:

Отображение сетки, включающее параметры, для которых заданы имена классов CSS

Но для начала необходимо создать базу данных.

Очень короткое введение в базы данных

В этом учебнике будут предоставлены только самые короткие сведения о базах данных. Если у вас есть опыт работы с базами данных, этот короткий раздел можно пропустить.

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

Образец таблицы базы данных как простая сетка

(Строки иногда называют записями, а столбцы иногда называют полями.)

Для большинства таблиц базы данных таблица должна иметь столбец, содержащий уникальное значение, например номер клиента, номер счета и т. д. Это значение называется первичным ключомтаблицы и используется для обнаружения каждой строки в таблице. В этом примере столбец ID является первичным ключом для адресной книги, показанной в предыдущем примере.

Большая часть работы, выполняемой в веб-приложениях, состоит из чтения информации из базы данных и ее отображения на странице. Вы также часто собираете сведения от пользователей и добавляете их в базу данных или изменяете записи, уже имеющиеся в базе данных. (Мы обсудим все эти операции в ходе этого набора руководств.)

Работа базы данных может быть огромно сложной и может потребовать специального набора знаний. Однако для этого руководства необходимо понимать только основные понятия, которые будут объяснены по мере того, как вы уходите.

Создание базы данных

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

Откройте WebMatrix, если вы еще этого не сделали, и откройте сайт Вебпажесмовиес, созданный в предыдущем руководстве.

В левой области щелкните рабочую область база данных .

Вкладка рабочей области базы данных WebMatrix

Лента изменится для отображения задач, связанных с базой данных. На ленте щелкните Новая база данных.

Кнопка "создать базу данных" на ленте WebMatrix

WebMatrix создает базу данных SQL Server CE ( SDF -файл), имя которой совпадает с именем сайта — вебпажесмовиес. sdf. (Это не будет сделано, но вы можете переименовать файл, если у него есть расширение SDF .)

Создание таблицы

На ленте нажмите кнопку создать таблицу. WebMatrix открывает Конструктор таблиц на новой вкладке. (если параметр новая таблица недоступен, убедитесь, что новая база данных выбрана в древовидном представлении слева.)

Кнопка "создать таблицу" на ленте WebMatrix

В текстовом поле вверху (где водяной знак говорит "введите имя таблицы") введите "фильмы".

Ввод имени таблицы в конструкторе баз данных WebMatrix

Область под именем таблицы определяет отдельные столбцы. Для таблицы фильмов в этом руководстве вы создадите всего несколько столбцов: ID, Title, Жанри year.

В поле имя введите "ID". Ввод значения здесь активирует все элементы управления для нового столбца.

Перейдите к списку тип данных и выберите int. Это значение указывает, что столбец ИДЕНТИФИКАТОРов будет содержать целочисленные (числовые) данные.

Note

Мы не будем называть его здесь (много), но для навигации по этой сетке можно использовать стандартные жесты клавиатуры Windows. Например, можно выполнить переход между полями, просто начать ввод, чтобы выбрать элемент в списке и т. д.

После поля значение по умолчанию (то есть оставьте его пустым). Установите флажок является первичным ключом и выберите его. Этот параметр указывает базе данных, что столбец идентификаторов будет содержать данные, идентифицирующие отдельные строки. (Т. е. Каждая строка будет иметь уникальное значение в столбце ID, которое можно использовать для поиска этой строки.)

Выберите параметр является идентификатором . Этот параметр указывает базе данных, что она должна автоматически формировать следующий последовательный номер для каждой новой строки. (Параметр является удостоверением работает только в том случае, если выбран параметр является первичным ключом .)

Щелкните в следующей строке сетки или дважды нажмите клавишу TAB, чтобы завершить текущую строку. Любой жест сохраняет текущую строку и запускает следующую. Обратите внимание, что в столбце значение по умолчанию теперь указано значение NULL. (Null является значением по умолчанию для значения по умолчанию, поэтому говорите.)

Завершив определение нового столбца идентификаторов , конструктор будет выглядеть, как показано на следующем рисунке:

Конструктор баз данных WebMatrix после определения столбца ИДЕНТИФИКАТОРов для таблицы фильмов

Чтобы создать следующий столбец, щелкните поле в столбце имя . Введите "Title" для столбца, а затем выберите nvarchar в качестве значения типа данных . Часть "var" в nvarchar сообщает базе данных, что данные для этого столбца будут строкой, размер которой может отличаться от записи к записи. (Префикс "n" представляет "Национальный", что означает, что поле может содержать символьные данные для любого алфавита или системы письма, то есть поле содержит данные в Юникоде.)

При выборе nvarcharпоявляется другое поле, в котором можно ввести максимальную длину поля. Введите 50, предполагая, что ни одна из заголовков фильма, с которой вы будете работать в этом учебнике, будет длиннее 50 символов.

Пропустить значение по умолчанию и снять флажок Разрешить значения NULL . Вы не хотите, чтобы база данных разпускала фильмы в базе данных, у которой нет заголовка.

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

Конструктор баз данных WebMatrix после определения столбца Title для таблицы Movies

Повторите эти действия, чтобы создать столбец с именем "Жанр", за исключением длины, для которого необходимо установить значение всего 30.

Создайте другой столбец с именем «year». Для параметра Тип данных выберите nchar (не nvarchar) и задайте для параметра Длина значение 4. В год вы будете использовать 4-значное число, например "1995" или "2010", поэтому не требуется столбец с переменным размером.

Вот как выглядит завершенный проект:

Конструктор баз данных WebMatrix после определения всех полей для таблицы фильмов

Нажмите клавиши CTRL + S или кнопку сохранить на панели быстрого доступа. Закройте конструктор баз данных, закрыв вкладку.

Добавление примеров данных

Далее в этой серии руководств вы создадите страницу, на которой можно ввести новые фильмы в форме. Однако теперь можно добавить некоторые примеры данных, которые затем можно отобразить на странице.

Обратите внимание, что в рабочей области базы данных в WebMatrix есть дерево, в котором отображается SDF -файл, созданный ранее. Откройте узел для нового SDF файла, а затем откройте узел таблицы .

Рабочая область базы данных WebMatrix с деревом, открываемом в таблицу фильмов

Щелкните правой кнопкой мыши узел фильмы и выберите пункт данные. WebMatrix открывает сетку, в которой можно ввести данные для таблицы фильмов :

Сетка "запись базы данных" в WebMatrix (пусто)

Щелкните столбец заголовок и введите «когда Гарри соответствует Светлана». Перейдите к столбцу Жанр (можно использовать клавишу TAB) и введите "Романтик комедия". Перейдите к столбцу year и введите "1989":

Сетка записей базы данных в WebMatrix с одной записью

Нажмите клавишу ВВОД, и WebMatrix сохранит новый фильм. Обратите внимание, что столбец идентификатор заполнен.

Сетка записей базы данных в WebMatrix с одной записью и автоматически созданным ИДЕНТИФИКАТОРом

Введите другой фильм (например, "пропало" Ветер "," драма "," 1939 "). Столбец Идентификатор заполняется снова:

Сетка записей базы данных в WebMatrix с двумя записями и автоматически создаваемыми идентификаторами

Введите третий фильм (например, "Ghostbusters", "комедия"). В качестве эксперимента оставьте столбец year пустым и нажмите клавишу ВВОД. Поскольку параметр Разрешить значения NULL не выбран, в базе данных отображается сообщение об ошибке:

Если требуемое значение столбца оставлено пустым, отображается ошибка "недопустимые данные"

Нажмите кнопку " ОК ", чтобы вернуться и исправить запись (год для "Ghostbusters" — 1984), а затем нажмите клавишу ВВОД.

Заполните несколько фильмов, пока не появится 8 или нет. (Ввод 8 упрощает работу с подкачкой. Но если это слишком много, введите всего несколько.) Фактические данные не важны.

Сетка "запись базы данных" в WebMatrix с любыми записями

Если вы указали все фильмы без ошибок, значения ИДЕНТИФИКАТОРов будут последовательными. При попытке сохранить неполную запись фильма номера ИДЕНТИФИКАТОРов могут не быть последовательными. Если да, то это нормально. Эти числа не имеют смысла, и единственное, что важно, — это уникальные в таблице фильмов .

Закройте вкладку, содержащую конструктор баз данных.

Теперь можно включить отображение этих данных на веб-странице.

Отображение данных на странице с помощью вспомогательной функции веб-сетки

Чтобы отобразить данные на странице, вы будете использовать вспомогательный метод WebGrid. Этот вспомогательный метод создает отображение в сетке или таблице (строки и столбцы). Как вы увидите, вы сможете уточнить сетку с помощью форматирования и других функций.

Чтобы запустить сетку, необходимо написать несколько строк кода. Эти несколько строк будут служить шаблоном практически для всего доступа к данным, выполняемых в этом учебнике.

Note

У вас есть множество вариантов отображения данных на странице. WebGrid вспомогательное приложение — всего один. Мы выбрали его для этого руководства, так как это самый простой способ отобразить данные и потому, что он достаточно гибок. В следующем учебном курсе вы узнаете, как использовать более «ручную» способ работы с данными на странице, что обеспечивает более прямое управление отображением данных.

В левой области в WebMatrix щелкните рабочую область файлы .

Новая созданная база данных находится в папке приложения_данных . Если папка еще не существует, WebMatrix создал ее для новой базы данных. (Возможно, папка существовала, если ранее были установлены вспомогательные методы.)

В древовидном представлении выберите корень веб-сайта. Необходимо выбрать корень веб-сайта; в противном случае новый файл может быть добавлен в папку приложения_данных.

На ленте нажмите кнопку создать. В поле выберите тип файла выберите CSHTML.

В поле имя введите имя новой страницы "Movies. cshtml":

Диалоговое окно "Выбор типа файла", показывающее страницу "фильмы"

Нажмите кнопку ОК . WebMatrix открывает новый файл с определенными скелетами элементов. Сначала вы напишете некоторый код для получения данных из базы данных. Затем вы добавите на страницу разметку для фактического вывода данных.

Написание кода запроса данных

В верхней части страницы между @{ и } символами введите следующий код. (Убедитесь, что этот код введен между открывающей и закрывающей фигурными скобками.)

var db = Database.Open("WebPagesMovies");
var selectedData = db.Query("SELECT * FROM Movies");
var grid = new WebGrid(source: selectedData);

Первая строка открывает созданную ранее базу данных, которая всегда является первым шагом перед выполнением чего-либо с базой данных. Вы указываете Database.Open имя метода для открытия базы данных. Обратите внимание, что в имени не включен SDF. Метод Open предполагает, что ищется SDF -файл (то есть вебпажесмовиес. sdf), а SDF -файл находится в папке app_Data . (Ранее мы отмечали, что приложение_папки данных является зарезервированным. Этот сценарий является одним из мест, где ASP.NET делает предположения об этом имени.)

При открытии базы данных ссылка на нее помещается в переменную с именем db. (Который может называться любым.) Переменная db — это то, как вы будете взаимодействовать с базой данных.

Вторая строка фактически извлекает данные базы данных с помощью метода Query. Обратите внимание, как работает этот код: dbая переменная содержит ссылку на открытую базу данных, и метод Query вызывается с помощью db переменной (db.Query).

Сам запрос является инструкцией SQL Select. (Дополнительные сведения о SQL см. в описании ниже.) В инструкции Movies определяет таблицу для запроса. Символ * указывает, что запрос должен возвращать все столбцы из таблицы. (Можно также вывести список столбцов по отдельности, разделяя их запятыми.)

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

Наконец, третья строка указывает ASP.NET, что вы хотите использовать экземпляр вспомогательного метода WebGrid. Объект вспомогательнойфункции создается спомощью ключевого слова new и передайте ему результаты запроса через переменную selectedData. Новый объект WebGrid, а также результаты запроса к базе данных становятся доступными в переменной grid. Это потребует, чтобы в момент реального времени отображались данные на странице.

На этом этапе база данных была открыта, вы получили нужные данные и подготовили вспомогательную функцию WebGrid к этим данным. Далее необходимо создать разметку на странице.

Tip

Язык структурированных запросов (SQL)

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

Select * From Movies

SELECT ID, Name, Price FROM Product WHERE Price > 10.00 ORDER BY Name

Первая инструкция Select получает все столбцы (заданные *) из таблицы Movies .

Вторая инструкция Select извлекает столбцы ID, Name и Price из записей в таблице Product , значение столбца price которых больше 10. Команда возвращает результаты в алфавитном порядке на основе значений столбца Name. Если ни одна из записей не соответствует критериям цены, команда возвращает пустой набор.

INSERT INTO Product (Name, Description, Price) VALUES ('Croissant', 'A flaky delight', 1.99)

Эта команда вставляет новую запись в таблицу Product , присвоив столбцу Name значение «круассан», столбец Description — «a ненадежных удовлетворения запросов» и цену 1,99.

Обратите внимание, что при указании нечислового значения значение заключается в одинарные кавычки (не в двойные кавычки C#, как в). Эти кавычки следует использовать вокруг текста или значений дат, но не вокруг чисел.

DELETE FROM Product WHERE ExpirationDate < '01/01/2008'

Эта команда удаляет записи в таблице Product , столбец даты окончания срока действия которых предшествует 1 января 2008. (В команде предполагается, что таблица Product содержит такой столбец, конечно,.) Дата вводится в формате мм/дд/гггг, но она должна быть введена в формате, используемом для вашего языкового стандарта.

Команды Insert и Delete не возвращают результирующие наборы. Вместо этого они возвращают число, которое показывает, сколько записей было затронуто командой.

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

Существует десятка команд SQL, но все они следуют шаблону, как показано здесь. Команды SQL можно использовать для создания таблиц базы данных, подсчета количества записей в таблице, вычисления цен и выполнения многих других операций.

Добавление разметки для вывода данных

В элементе <head> установите содержимое элемента <title> в значение "фильмы":

<head>
    <meta charset="utf-8" />
    <title>Movies</title>
</head>

В элементе <body> страницы добавьте следующее:

<h1>Movies</h1>
<div>
    @grid.GetHtml()
</div>

Вот и все. Переменная grid — это значение, которое вы создали при создании объекта WebGrid в коде ранее.

В представлении дерева WebMatrix щелкните страницу правой кнопкой мыши и выберите запустить в браузере. Вы увидите нечто вроде этой страницы:

Выходные данные вспомогательного метода сетки по умолчанию из таблицы фильмов

Щелкните ссылку на заголовок столбца, чтобы выполнить сортировку по этому столбцу. Возможность сортировки по щелчку заголовка — это функция, встроенная в вспомогательную функцию " Сетка ".

Метод GetHtml, как предполагает его название, создает разметку, отображающую данные. По умолчанию метод GetHtml создает HTML-элемент <table>. (При необходимости можно проверить отрисовку, просмотрев источник страницы в браузере.)

Изменение вида сетки

Использование вспомогательного метода WebGrid, как вы только что сделали, очень просто, но полученный результат является простым. У вспомогательного модуля WebGrid есть все виды параметров, позволяющие управлять отображением данных. В этом учебнике слишком много для изучения, но в этом разделе вы получите представление о некоторых из этих вариантов. В последующих руководствах этой серии будут рассмотрены некоторые дополнительные параметры.

Указание отдельных отображаемых столбцов

Для начала можно указать, что необходимо отображать только определенные столбцы. По умолчанию, как вы видели, в сетке показаны все четыре столбца из таблицы фильмов .

В файле movies. cshtml замените только что добавленную разметку @grid.GetHtml() следующим:

@grid.GetHtml(
    columns: grid.Columns(
        grid.Column("Title"),
        grid.Column("Genre"),
        grid.Column("Year")
    )
)

Чтобы сообщить вспомогательной функции о отображаемых столбцах, включите параметр columns для метода GetHtml и передайте коллекцию столбцов. В коллекции укажите каждый столбец для включения. Можно указать отдельный столбец для вывода, включив объект grid.Column и передав имя нужного столбца данных. (Эти столбцы должны включаться в результаты запроса SQL — WebGrid вспомогательный объект не может отображать столбцы, которые не были возвращены запросом.)

Снова запустите страницу movies. cshtml в браузере, и на этот раз отобразится сообщение следующего вида (Обратите внимание, что столбец ID не отображается):

Отображение только выбранных столбцов в сетке

Изменение вида сетки

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

В разделе <head> страницы непосредственно перед закрывающим тегом </head> добавьте следующий элемент <style>:

<style type="text/css">
  .grid { margin: 4px; border-collapse: collapse; width: 600px; }
  .grid th, .grid td { border: 1px solid #C0C0C0; padding: 5px; }
  .head { background-color: #E8E8E8; font-weight: bold; color: #FFF; }
  .alt { background-color: #E8E8E8; color: #000; }
</style>

Эта разметка CSS определяет классы с именами grid, headи т. д. Эти определения стилей также можно разместить в отдельном CSS -файле и связать его со страницей. (На самом деле это будет сделано далее в этом руководстве.) Но для упрощения работы с этим руководством они находятся на той же странице, где отображаются данные.

Теперь можно получить вспомогательный модуль WebGrid для использования этих классов стилей. У вспомогательного приложения есть ряд свойств (например, tableStyle) только для этой цели — для них назначается имя класса стиля CSS, а имя класса отображается как часть разметки, отображаемой вспомогательным приложением.

Измените разметку grid.GetHtml, чтобы она теперь выглядела как следующий код:

@grid.GetHtml(
    tableStyle: "grid",
    headerStyle: "head",
    alternatingRowStyle: "alt",
    columns: grid.Columns(
        grid.Column("Title"),
        grid.Column("Genre"),
        grid.Column("Year")
    )
)

Новые возможности в том, что в метод GetHtml добавлены параметры tableStyle, headerStyleи alternatingRowStyle. Для этих параметров были заданы имена стилей CSS, добавленных к моменту назад.

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

Отображение сетки, включающее параметры, для которых заданы имена классов CSS

Чтобы увидеть, что создает метод GetHtml, можно взглянуть на источник страницы в браузере. Здесь мы не будем подробно рассматриваться, но важно отметить, что при указании таких параметров, как tableStyle, в сетке создаются HTML-теги следующего вида:

<table class="grid">

К тегу <table> был добавлен атрибут class, который ссылается на одно из добавленных ранее правил CSS. Этот код показывает базовый шаблон, — различные параметры для метода GetHtml позволяют ссылаться на классы CSS, которые затем создаются методом вместе с разметкой. То, что вы выполняете с классами CSS, является готовым к вам.

Добавление разбиения на страницы

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

В коде страницы измените строку, которая создает объект WebGrid, на следующий код:

var grid = new WebGrid(source: selectedData, rowsPerPage: 3);

Единственное отличие от ранее заключается в том, что добавлен параметр rowsPerPage, для которого задано значение 3.

Запустите страницу. В сетке отображаются три строки за раз, а также ссылки навигации, позволяющие пролистывать фильмы в базе данных:

Отображение сетки с разбиением на страницы

Далее

В следующем руководстве вы узнаете, как использовать Razor и C# код для получения вводимых пользователем данных в форме. Вы добавите поле поиска на страницу фильмов, чтобы можно было найти фильмы по названию или жанру.

Полный список для страницы фильмов

@{
    var db = Database.Open("WebPagesMovies");
    var selectedData = db.Query("SELECT * FROM Movies");
    var grid = new WebGrid(source: selectedData, rowsPerPage: 3);
}

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Movies</title>
        <style type="text/css">
          .grid { margin: 4px; border-collapse: collapse; width: 600px; }
          .grid th, .grid td { border: 1px solid #C0C0C0; padding: 5px; }
          .head { background-color: #E8E8E8; font-weight: bold; color: #FFF; }
          .alt { background-color: #E8E8E8; color: #000; }
        </style>
    </head>
    <body>
        <h1>Movies</h1>
        <div>
            @grid.GetHtml(
                tableStyle: "grid",
                headerStyle: "head",
                alternatingRowStyle: "alt",
                columns: grid.Columns(
                    grid.Column("Title"),
                    grid.Column("Genre"),
                    grid.Column("Year")
                )
            )
        </div>
    </body>
</html>

Дополнительные ресурсы