Знакомство с веб-страницами ASP.NET — отображение данных

Tom FitzMacken

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

Что вы узнаете:

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

Рассматриваются функции и технологии:

• Средства базы данных WebMatrix.
• WebGrid Помощник.

Что вы будете создавать

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

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

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

Краткое введение в базы данных

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В текстовом поле в верхней части (где подложка говорит "Введите имя таблицы"), введите "Фильмы".

Панель под именем таблицы — это место, где вы задаете параметры отдельных столбцов. В таблице "Фильмы " в этом руководстве вы создадите только несколько столбцов: идентификатор, название, жанр и год.

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

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

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

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

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

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

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

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

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

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

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

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

Вот как выглядит завершенная конструкция:

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

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

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

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

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

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

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

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

Введите третий фильм (например, "Охотники за привидениями", "Комедия"). В качестве эксперимента оставьте столбец Year пустым, а затем нажмите Enter. Так как вы не выбрали параметр Allow Nulls , база данных отображает ошибку:

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

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

Если вы ввели все фильмы без ошибок, значения идентификатора являются последовательными. Если вы попытались сохранить неполную запись фильма, номера ID могут оказаться не последовательными. Если да, это нормально. Цифры не имеют никакого смысла, и единственное, что важно, заключается в том, что они уникальны в таблице "Фильмы ".

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

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

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

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

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

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

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

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

На ленте нажмите кнопку "Создать". В поле "Выбор типа файла " выберите 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-файл (т. е. WebPagesMovies.sdf) и что SDF-файл находится в папке App_Data . (Ранее мы отметили, что папка 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 компонент с данными. Далее необходимо создать разметку на странице.

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

В элементе <head> задайте содержимое элемента <title> в «Movies».

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

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

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

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

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

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

Метод 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 в браузере, и на этот раз вы получите отображение, как показано ниже (обратите внимание, что столбец идентификатора не отображается):

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

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

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

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

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

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

<table class="grid">

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

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

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

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

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

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

Запустите страницу. Сетка отображает 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>

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

• Общие сведения о веб-программировании ASP.NET с помощью синтаксиса Razor