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

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

В этом руководстве показано, как создать базу данных в WebMatrix и как отображать данные базы данных на странице при использовании веб-страницы ASP.NET (Razor).This tutorial shows you how to create a database in WebMatrix and how to display database data in a page when you use ASP.NET Web Pages (Razor). Предполагается, что вы выполнили цикл по ознакомлению с веб-страницы ASP.NET программированием.It assumes you have completed the series through Introduction to ASP.NET Web Pages Programming.

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

  • Использование средств WebMatrix для создания таблиц базы данных и базы данных.How to use WebMatrix tools to create a database and database tables.
  • Использование средств WebMatrix для добавления данных в базу данных.How to use WebMatrix tools to add data to a database.
  • Отображение данных из базы данных на странице.How to display data from the database on a page.
  • Инструкции по выполнению команд SQL в веб-страницы ASP.NET.How to run SQL commands in ASP.NET Web Pages.
  • Настройка вспомогательного метода WebGrid для изменения отображения данных и добавления разбиения на страницы и сортировки.How to customize the WebGrid helper to change the data display and to add paging and sorting.

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

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

Что вы создадитеWhat You'll Build

В предыдущем учебном курсе были представлены веб-страницы ASP.NET (файлы . cshtml ), основы синтаксис Razor и вспомогательные методы.In the previous tutorial, you were introduced to ASP.NET Web Pages (.cshtml files), to the basics of Razor syntax, and to helpers. В этом руководстве вы начнете создавать фактическое веб-приложение, которое будет использоваться для остальной части ряда.In this tutorial, you'll begin creating the actual web application that you'll use for the rest of the series. Приложение — это простое приложение для фильмов, которое позволяет просматривать, добавлять, изменять и удалять сведения о фильмах.The app is a simple movie application that lets you view, add, change, and delete information about movies.

После завершения работы с этим руководством вы сможете просмотреть список фильмов, который выглядит как на этой странице:When you're done with this tutorial, you'll be able to view a movie listing that looks like this page:

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

Но для начала необходимо создать базу данных.But to begin, you have to create a database.

Очень короткое введение в базы данныхA Very Brief Introduction to Databases

В этом учебнике будут предоставлены только самые короткие сведения о базах данных.This tutorial will provide only the briefest introduction to databases. Если у вас есть опыт работы с базами данных, этот короткий раздел можно пропустить.If you have database experience, you can skip this short section.

База данных содержит одну или несколько таблиц, содержащих сведения — например, таблицы для клиентов, заказов и поставщиков, а также для учащихся, преподавателей, занятий и оценки.A database contains one or more tables that contain information — for example, tables for customers, orders, and vendors, or for students, teachers, classes, and grades. Структурно таблица базы данных похожа на электронную таблицу.Structurally, a database table is like a spreadsheet. Представьте типичную адресную книгу.Imagine a typical address book. Для каждой записи в адресной книге (т. е. для каждого пользователя) имеется несколько элементов информации, таких как имя, фамилия, адрес, адрес электронной почты и номер телефона.For each entry in the address book (that is, for each person) you have several pieces of information such as first name, last name, address, email address, and phone number.

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

(Строки иногда называют записями, а столбцы иногда называют полями.)(Rows are sometimes referred to as records, and columns are sometimes referred to as fields.)

Для большинства таблиц базы данных таблица должна иметь столбец, содержащий уникальное значение, например номер клиента, номер счета и т. д.For most database tables, the table has to have a column that contains a unique value, like a customer number, account number, and so on. Это значение называется первичным ключомтаблицы и используется для обнаружения каждой строки в таблице.This value is known as the table's primary key, and you use it to identify each row in the table. В этом примере столбец ID является первичным ключом для адресной книги, показанной в предыдущем примере.In the example, the ID column is the primary key for the address book shown in the previous example.

Большая часть работы, выполняемой в веб-приложениях, состоит из чтения информации из базы данных и ее отображения на странице.Much of the work you do in web applications consists of reading information out of the database and displaying it on a page. Вы также часто собираете сведения от пользователей и добавляете их в базу данных или изменяете записи, уже имеющиеся в базе данных.You'll also often gather information from users and add it to a database, or you'll modify records that are already in the database. (Мы обсудим все эти операции в ходе этого набора руководств.)(We'll cover all of these operations in the course of this tutorial set.)

Работа базы данных может быть огромно сложной и может потребовать специального набора знаний.Database work can be enormously complex and can require specialized knowledge. Однако для этого руководства необходимо понимать только основные понятия, которые будут объяснены по мере того, как вы уходите.For this tutorial set, though, you have to understand only basic concepts, which will all be explained as you go.

Создание базы данныхCreating a Database

WebMatrix включает инструменты, упрощающие создание базы данных и создание таблиц в базе данных.WebMatrix includes tools that make it easy to create a database and to create tables in the database. (Структура базы данных называется схемойбазы данных.) В этом руководстве вы создадите базу данных, которая содержит только одну таблицу — фильмов.(The structure of a database is referred to as the database's schema.) For this tutorial set, you'll create a database that has only one table in it — Movies.

Откройте WebMatrix, если вы еще этого не сделали, и откройте сайт Вебпажесмовиес, созданный в предыдущем руководстве.Open WebMatrix if you haven't already done so, and open the WebPagesMovies site that you created in the previous tutorial.

В левой области щелкните рабочую область база данных .In the left pane, click the Database workspace.

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

Лента изменится для отображения задач, связанных с базой данных.The ribbon changes to show database-related tasks. На ленте щелкните Новая база данных.In the ribbon, click New Database.

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

WebMatrix создает базу данных SQL Server CE ( SDF -файл), имя которой совпадает с именем сайта — вебпажесмовиес. sdf.WebMatrix creates a SQL Server CE database (an .sdf file) that has the same name as your site — WebPagesMovies.sdf. (Это не будет сделано, но вы можете переименовать файл, если у него есть расширение SDF .)(You won't do this here, but you can rename the file to anything you like, as long as it has an .sdf extension.)

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

На ленте нажмите кнопку создать таблицу.In the ribbon, click New Table. WebMatrix открывает Конструктор таблиц на новой вкладке. (если параметр новая таблица недоступен, убедитесь, что новая база данных выбрана в древовидном представлении слева.)WebMatrix opens the table designer in a new tab. (If the New Table option isn't available, make sure that the new database is selected in the tree view on the left.)

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

В текстовом поле вверху (где водяной знак говорит "введите имя таблицы") введите "фильмы".In the text box at the top (where the watermark says "Enter table name"), enter "Movies".

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

Область под именем таблицы определяет отдельные столбцы.The pane underneath the table name is where you define individual columns. Для таблицы фильмов в этом руководстве вы создадите всего несколько столбцов: ID, Title, Жанри year.For the Movies table in this tutorial, you'll create only a few columns: ID, Title, Genre, and Year.

В поле имя введите "ID".In the Name box, enter "ID". Ввод значения здесь активирует все элементы управления для нового столбца.Entering a value here activates all the controls for the new column.

Перейдите к списку тип данных и выберите int. Это значение указывает, что столбец ИДЕНТИФИКАТОРов будет содержать целочисленные (числовые) данные.Tab to the Data Type list and choose int. This value specifies that the ID column will contain integer (number) data.

Note

Мы не будем называть его здесь (много), но для навигации по этой сетке можно использовать стандартные жесты клавиатуры Windows.We won't call it out any more here (much), but you can use standard Windows keyboard gestures to navigate in this grid. Например, можно выполнить переход между полями, просто начать ввод, чтобы выбрать элемент в списке и т. д.For example, you can tab between fields, you can just start typing in order to select an item in a list, and so on.

После поля значение по умолчанию (то есть оставьте его пустым).Tab past the Default Value box (that is, leave it blank). Установите флажок является первичным ключом и выберите его.Tab to the Is Primary Key check box and select it. Этот параметр указывает базе данных, что столбец идентификаторов будет содержать данные, идентифицирующие отдельные строки.This option tells the database that the ID column will contain the data that identifies individual rows. (Т. е. Каждая строка будет иметь уникальное значение в столбце ID, которое можно использовать для поиска этой строки.)(That is, each row will have a unique value in the ID column that you can use to find that row.)

Выберите параметр является идентификатором .Choose the Is Identity option. Этот параметр указывает базе данных, что она должна автоматически формировать следующий последовательный номер для каждой новой строки.This option tells the database that it should automatically generate the next sequential number for each new row. (Параметр является удостоверением работает только в том случае, если выбран параметр является первичным ключом .)(The Is Identity option works only if you've also selected the Is Primary Key option.)

Щелкните в следующей строке сетки или дважды нажмите клавишу TAB, чтобы завершить текущую строку.Click in the next grid row, or press Tab twice to finish the current row. Любой жест сохраняет текущую строку и запускает следующую.Either gesture saves the current row and starts the next one. Обратите внимание, что в столбце значение по умолчанию теперь указано значение NULL.Notice that the Default Value column now says Null. (Null является значением по умолчанию для значения по умолчанию, поэтому говорите.)(Null is the default value for the default value, so to speak.)

Завершив определение нового столбца идентификаторов , конструктор будет выглядеть, как показано на следующем рисунке:When you've finished defining the new ID column, the designer will look like this illustration:

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

Чтобы создать следующий столбец, щелкните поле в столбце имя .To create the next column, click in the box in the Name column. Введите "Title" для столбца, а затем выберите nvarchar в качестве значения типа данных .Enter "Title" for the column and then select nvarchar for the Data Type value. Часть "var" в nvarchar сообщает базе данных, что данные для этого столбца будут строкой, размер которой может отличаться от записи к записи.The "var" part of nvarchar tells the database that the data for this column will be a string whose size might vary from record to record. (Префикс "n" представляет "Национальный", что означает, что поле может содержать символьные данные для любого алфавита или системы письма, то есть поле содержит данные в Юникоде.)(The "n" prefix represents "national," which indicates that the field can hold character data for any alphabet or writing system — that is, the field holds Unicode data.)

При выборе nvarcharпоявляется другое поле, в котором можно ввести максимальную длину поля.When you choose nvarchar, another box appears where you can enter the maximum length for the field. Введите 50, предполагая, что ни одна из заголовков фильма, с которой вы будете работать в этом учебнике, будет длиннее 50 символов.Enter 50, on the assumption that no movie title that you'll work with in this tutorial will be longer than 50 characters.

Пропустить значение по умолчанию и снять флажок Разрешить значения NULL .Skip Default Value and clear the Allow Nulls option. Вы не хотите, чтобы база данных разпускала фильмы в базе данных, у которой нет заголовка.You don't want the database to allow any movies to be entered into the database that don't have a title.

Когда все будет готово и переходим к следующей строке, конструктор будет выглядеть следующим образом:When you're done and move to the next row, the designer looks like this illustration:

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

Повторите эти действия, чтобы создать столбец с именем "Жанр", за исключением длины, для которого необходимо установить значение всего 30.Repeat these steps to create a column named "Genre", except for the length, set it to just 30.

Создайте другой столбец с именем «year».Create another column named "Year." Для параметра Тип данных выберите nchar (не nvarchar) и задайте для параметра Длина значение 4.For the data type, choose nchar (not nvarchar) and set the length to 4. В год вы будете использовать 4-значное число, например "1995" или "2010", поэтому не требуется столбец с переменным размером.For the year, you're going to use a 4-digit number like "1995" or "2010", so you don't require a variable-sized column.

Вот как выглядит завершенный проект:Here's what the finished design looks like:

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

Нажмите клавиши CTRL + S или кнопку сохранить на панели быстрого доступа.Press Ctrl+S or click the Save button in the Quick Access toolbar. Закройте конструктор баз данных, закрыв вкладку.Close the database designer by closing the tab.

Добавление примеров данныхAdding Some Example Data

Далее в этой серии руководств вы создадите страницу, на которой можно ввести новые фильмы в форме.Later in this tutorial series you'll create a page where you can enter new movies in a form. Однако теперь можно добавить некоторые примеры данных, которые затем можно отобразить на странице.For now, however, you can add some example data that you can then display on a page.

Обратите внимание, что в рабочей области базы данных в WebMatrix есть дерево, в котором отображается SDF -файл, созданный ранее.In the Database workspace in WebMatrix, notice that there's a tree that shows you the .sdf file you created earlier. Откройте узел для нового SDF файла, а затем откройте узел таблицы .Open the node for your new .sdf file, and then open the Tables node.

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

Щелкните правой кнопкой мыши узел фильмы и выберите пункт данные.Right-click the Movies node and then choose Data. WebMatrix открывает сетку, в которой можно ввести данные для таблицы фильмов :WebMatrix opens a grid where you can enter data for the Movies table:

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

Щелкните столбец заголовок и введите «когда Гарри соответствует Светлана».Click the Title column and enter "When Harry Met Sally". Перейдите к столбцу Жанр (можно использовать клавишу TAB) и введите "Романтик комедия".Move to the Genre column (you can use the Tab key) and enter "Romantic Comedy". Перейдите к столбцу year и введите "1989":Move to the Year column and enter "1989":

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

Нажмите клавишу ВВОД, и WebMatrix сохранит новый фильм.Press Enter, and WebMatrix saves the new movie. Обратите внимание, что столбец идентификатор заполнен.Notice that the ID column has been filled in.

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

Введите другой фильм (например, "пропало" Ветер "," драма "," 1939 ").Enter another movie (for example, "Gone with the Wind", "Drama", "1939"). Столбец Идентификатор заполняется снова:The ID column is filled in again:

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

Введите третий фильм (например, "Ghostbusters", "комедия").Enter a third movie (for example, "Ghostbusters", "Comedy"). В качестве эксперимента оставьте столбец year пустым и нажмите клавишу ВВОД.As an experiment, leave the Year column blank and then press Enter. Поскольку параметр Разрешить значения NULL не выбран, в базе данных отображается сообщение об ошибке:Because you unselected the Allow Nulls option, the database shows an error:

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

Нажмите кнопку " ОК ", чтобы вернуться и исправить запись (год для "Ghostbusters" — 1984), а затем нажмите клавишу ВВОД.Click OK to go back and fix the entry (the year for "Ghostbusters" is 1984), and then press Enter.

Заполните несколько фильмов, пока не появится 8 или нет.Fill in several movies until you have 8 or so. (Ввод 8 упрощает работу с подкачкой.(Entering 8 makes it easier to work with paging later. Но если это слишком много, введите всего несколько.) Фактические данные не важны.But if that's too many, enter just a few for now.) The actual data doesn't matter.

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

Если вы указали все фильмы без ошибок, значения ИДЕНТИФИКАТОРов будут последовательными.If you entered all the movies without any errors, the ID values are sequential. При попытке сохранить неполную запись фильма номера ИДЕНТИФИКАТОРов могут не быть последовательными.If you tried to save an incomplete movie record, the ID numbers might not be sequential. Если да, то это нормально.If so, that's okay. Эти числа не имеют смысла, и единственное, что важно, — это уникальные в таблице фильмов .The numbers don't have any inherent meaning, and the only thing that's important is that they're unique in the Movies table.

Закройте вкладку, содержащую конструктор баз данных.Close the tab that contains the database designer.

Теперь можно включить отображение этих данных на веб-странице.Now you can turn to displaying this data on a web page.

Отображение данных на странице с помощью вспомогательной функции веб-сеткиDisplaying Data in a Page by Using the WebGrid Helper

Чтобы отобразить данные на странице, вы будете использовать вспомогательный метод WebGrid.To display data in a page, you're going to use the WebGrid helper. Этот вспомогательный метод создает отображение в сетке или таблице (строки и столбцы).This helper produces a display in a grid or table (rows and columns). Как вы увидите, вы сможете уточнить сетку с помощью форматирования и других функций.As you'll see, you'll be able refine the grid with formatting and other features.

Чтобы запустить сетку, необходимо написать несколько строк кода.To run the grid, you'll have to write a few lines of code. Эти несколько строк будут служить шаблоном практически для всего доступа к данным, выполняемых в этом учебнике.These few lines will serve as a kind of pattern for almost all of the data access that you do in this tutorial.

Note

У вас есть множество вариантов отображения данных на странице. WebGrid вспомогательное приложение — всего один.You actually have many options for displaying data on a page; the WebGrid helper is just one. Мы выбрали его для этого руководства, так как это самый простой способ отобразить данные и потому, что он достаточно гибок.We chose it for this tutorial because it's the easiest way to display data and because it's reasonably flexible. В следующем учебном курсе вы узнаете, как использовать более «ручную» способ работы с данными на странице, что обеспечивает более прямое управление отображением данных.In the next tutorial set, you'll see how to use a more "manual" way to work with data in the page, which gives you more direct control over how to display the data.

В левой области в WebMatrix щелкните рабочую область файлы .In the left pane in WebMatrix, click the Files workspace.

Новая созданная база данных находится в папке приложения_данных .The new database you created is in the App_Data folder. Если папка еще не существует, WebMatrix создал ее для новой базы данных.If the folder didn't already exist, WebMatrix created it for your new database. (Возможно, папка существовала, если ранее были установлены вспомогательные методы.)(The folder might have existed if you'd previously installed helpers.)

В древовидном представлении выберите корень веб-сайта.In the tree view, select the root of the website. Необходимо выбрать корень веб-сайта; в противном случае новый файл может быть добавлен в папку приложения_данных.You must select the root of the website; otherwise, the new file might be added to the App_Data folder.

На ленте нажмите кнопку создать.In the ribbon, click New. В поле выберите тип файла выберите CSHTML.In the Choose a File Type box, choose CSHTML.

В поле имя введите имя новой страницы "Movies. cshtml":In the Name box, name the new page "Movies.cshtml":

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

Нажмите кнопку ОК .Click the OK button. WebMatrix открывает новый файл с определенными скелетами элементов.WebMatrix opens a new file with some skeleton elements in it. Сначала вы напишете некоторый код для получения данных из базы данных.First you'll write some code to go get the data from the database. Затем вы добавите на страницу разметку для фактического вывода данных.Then you'll add markup to the page to actually display the data.

Написание кода запроса данныхWriting the Data Query Code

В верхней части страницы между @{ и } символами введите следующий код.At the top of the page, between the @{ and } characters, enter the following code. (Убедитесь, что этот код введен между открывающей и закрывающей фигурными скобками.)(Make sure that you enter this code between the opening and closing braces.)

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

Первая строка открывает созданную ранее базу данных, которая всегда является первым шагом перед выполнением чего-либо с базой данных.The first line opens the database that you created earlier, which is always the first step before doing something with the database. Вы указываете Database.Open имя метода для открытия базы данных.You tell the Database.Open method name of the database to open. Обратите внимание, что в имени не включен SDF.Notice that you don't include .sdf in the name. Метод Open предполагает, что ищется SDF -файл (то есть вебпажесмовиес. sdf), а SDF -файл находится в папке app_Data .The Open method assumes that it's looking for an .sdf file (that is, WebPagesMovies.sdf) and that the .sdf file is in the App_Data folder. (Ранее мы отмечали, что приложение_папки данных является зарезервированным. Этот сценарий является одним из мест, где ASP.NET делает предположения об этом имени.)(Earlier we noted that the App_Data folder is reserved; this scenario is one of the places where ASP.NET makes assumptions about that name.)

При открытии базы данных ссылка на нее помещается в переменную с именем db.When the database is opened, a reference to it is put into the variable named db. (Который может называться любым.) Переменная db — это то, как вы будете взаимодействовать с базой данных.(Which could be named anything.) The db variable is how you'll end up interacting with the database.

Вторая строка фактически извлекает данные базы данных с помощью метода Query.The second line actually fetches the database data by using the Query method. Обратите внимание, как работает этот код: dbая переменная содержит ссылку на открытую базу данных, и метод Query вызывается с помощью db переменной (db.Query).Notice how this code works: the db variable has a reference to the opened database, and you invoke the Query method by using the db variable (db.Query).

Сам запрос является инструкцией SQL Select.The query itself is a SQL Select statement. (Дополнительные сведения о SQL см. в описании ниже.) В инструкции Movies определяет таблицу для запроса.(For a little background about SQL, see the explanation later.) In the statement, Movies identifies the table to query. Символ * указывает, что запрос должен возвращать все столбцы из таблицы.The * character specifies that the query should return all the columns from the table. (Можно также вывести список столбцов по отдельности, разделяя их запятыми.)(You could also list columns individually, separated by commas.)

Результаты запроса, если таковые имеются, возвращаются и становятся доступными в переменной selectedData.The results of the query, if any, are returned and made available in the selectedData variable. Опять же, переменной можно присвоить любое имя.Again, the variable could be named anything.

Наконец, третья строка указывает ASP.NET, что вы хотите использовать экземпляр вспомогательного метода WebGrid.Finally, the third line tells ASP.NET that you want to use an instance of the WebGrid helper. Объект вспомогательнойфункции создается спомощью ключевого слова new и передайте ему результаты запроса через переменную selectedData.You create (instantiate) the helper object by using the new keyword and pass it the query results via the selectedData variable. Новый объект WebGrid, а также результаты запроса к базе данных становятся доступными в переменной grid.The new WebGrid object, along with the results of the database query, are made available in the grid variable. Это потребует, чтобы в момент реального времени отображались данные на странице.You'll need that result in a moment to actually display the data in the page.

На этом этапе база данных была открыта, вы получили нужные данные и подготовили вспомогательную функцию WebGrid к этим данным.At this stage, the database has been opened, you've gotten the data you want, and you've prepared the WebGrid helper with that data. Далее необходимо создать разметку на странице.Next is to create the markup in the page.

Tip

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

SQL — это язык, который используется в большинстве реляционных баз данных для управления данными в базе данных.SQL is a language that's used in most relational databases for managing data in a database. Она включает команды, позволяющие извлекать данные и обновлять их, а также позволять создавать, изменять и администрировать данные в таблицах базы данных.It includes commands that let you retrieve data and update it, and that let you create, modify, and manage data in database tables. SQL отличается от языка программирования (например C#,).SQL is different than a programming language (like C#). С помощью SQL вы указываете базе данных, что вам нужно, и это задача базы данных, чтобы выяснить, как получить данные или выполнить задачу.With SQL, you tell the database what you want, and it's the database's job to figure out how to get the data or perform the task. Ниже приведены примеры некоторых команд SQL и их действия.Here are examples of some SQL commands and what they do:

Select * From Movies

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

Первая инструкция Select получает все столбцы (заданные *) из таблицы Movies .The first Select statement gets all the columns (specified by *) from the Movies table.

Вторая инструкция Select извлекает столбцы ID, Name и Price из записей в таблице Product , значение столбца price которых больше 10.The second Select statement fetches the ID, Name, and Price columns from records in the Product table whose Price column value is more than 10. Команда возвращает результаты в алфавитном порядке на основе значений столбца Name.The command returns the results in alphabetical order based on the values of the Name column. Если ни одна из записей не соответствует критериям цены, команда возвращает пустой набор.If no records match the price criteria, the command returns an empty set.

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

Эта команда вставляет новую запись в таблицу Product , присвоив столбцу Name значение «круассан», столбец Description — «a ненадежных удовлетворения запросов» и цену 1,99.This command inserts a new record into the Product table, setting the Name column to "Croissant", the Description column to "A flaky delight", and the price to 1.99.

Обратите внимание, что при указании нечислового значения значение заключается в одинарные кавычки (не в двойные кавычки C#, как в).Notice that when you're specifying a non-numeric value, the value is enclosed in single quotation marks (not double quotation marks, as in C#). Эти кавычки следует использовать вокруг текста или значений дат, но не вокруг чисел.You use these quotation marks around text or date values, but not around numbers.

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

Эта команда удаляет записи в таблице Product , столбец даты окончания срока действия которых предшествует 1 января 2008.This command deletes records in the Product table whose expiration date column is earlier than January 1, 2008. (В команде предполагается, что таблица Product содержит такой столбец, конечно,.) Дата вводится в формате мм/дд/гггг, но она должна быть введена в формате, используемом для вашего языкового стандарта.(The command assumes that the Product table has such a column, of course.) The date is entered here in MM/DD/YYYY format, but it should be entered in the format that's used for your locale.

Команды Insert и Delete не возвращают результирующие наборы.The Insert and Delete commands don't return result sets. Вместо этого они возвращают число, которое показывает, сколько записей было затронуто командой.Instead, they return a number that tells you how many records were affected by the command.

Для некоторых из этих операций (например, для вставки и удаления записей) процесс, запрашивающий операцию, должен иметь соответствующие разрешения в базе данных.For some of these operations (like inserting and deleting records), the process that's requesting the operation has to have appropriate permissions in the database. Именно поэтому для рабочих баз данных часто приходится вводить имя пользователя и пароль при подключении к базе данных.That's why for production databases you often have to supply a user name and password when you connect to the database.

Существует десятка команд SQL, но все они следуют шаблону, как показано здесь.There are dozens of SQL commands, but they all follow a pattern like the commands you see here. Команды SQL можно использовать для создания таблиц базы данных, подсчета количества записей в таблице, вычисления цен и выполнения многих других операций.You can use SQL commands to create database tables, count the number of records in a table, calculate prices, and perform many more operations.

Добавление разметки для вывода данныхAdding Markup to Display the Data

В элементе <head> установите содержимое элемента <title> в значение "фильмы":Inside the <head> element, set contents of the <title> element to "Movies":

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

В элементе <body> страницы добавьте следующее:Inside the <body> element of the page, add the following:

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

Вот и все.That's it. Переменная grid — это значение, которое вы создали при создании объекта WebGrid в коде ранее.The grid variable is the value you created when you created the WebGrid object in code earlier.

В представлении дерева WebMatrix щелкните страницу правой кнопкой мыши и выберите запустить в браузере.In the WebMatrix tree view, right-click the page and select Launch in browser. Вы увидите нечто вроде этой страницы:You'll see something like this page:

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

Щелкните ссылку на заголовок столбца, чтобы выполнить сортировку по этому столбцу.Click a column heading link to sort by that column. Возможность сортировки по щелчку заголовка — это функция, встроенная в вспомогательную функцию " Сетка ".Being able to sort by clicking a heading is a feature that's built into the WebGrid helper.

Метод GetHtml, как предполагает его название, создает разметку, отображающую данные.The GetHtml method, as its name suggests, generates markup that displays the data. По умолчанию метод GetHtml создает HTML-элемент <table>.By default, the GetHtml method generates an HTML <table> element. (При необходимости можно проверить отрисовку, просмотрев источник страницы в браузере.)(If you want, you can verify the rendering by looking at the source of the page in the browser.)

Изменение вида сеткиModifying the Look of the Grid

Использование вспомогательного метода WebGrid, как вы только что сделали, очень просто, но полученный результат является простым.Using the WebGrid helper like you just did is easy, but the resulting display is plain. У вспомогательного модуля WebGrid есть все виды параметров, позволяющие управлять отображением данных.The WebGrid helper has all sorts of options that let you control how the data is displayed. В этом учебнике слишком много для изучения, но в этом разделе вы получите представление о некоторых из этих вариантов.There are far too many to explore in this tutorial, but this section will give you an idea of some of those options. В последующих руководствах этой серии будут рассмотрены некоторые дополнительные параметры.A few additional options will be covered in later tutorials in this series.

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

Для начала можно указать, что необходимо отображать только определенные столбцы.To start, you can specify that you want to display only certain columns. По умолчанию, как вы видели, в сетке показаны все четыре столбца из таблицы фильмов .By default, as you've seen, the grid shows all four of the columns from the Movies table.

В файле movies. cshtml замените только что добавленную разметку @grid.GetHtml() следующим:In the Movies.cshtml file, replace the @grid.GetHtml() markup that you just added with the following:

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

Чтобы сообщить вспомогательной функции о отображаемых столбцах, включите параметр columns для метода GetHtml и передайте коллекцию столбцов.To tell the helper which columns to display, you include a columns parameter for the GetHtml method and pass in a collection of columns. В коллекции укажите каждый столбец для включения.In the collection, you specify each column to include. Можно указать отдельный столбец для вывода, включив объект grid.Column и передав имя нужного столбца данных.You specify an individual column to display by including a grid.Column object, and pass in the name of the data column you want. (Эти столбцы должны включаться в результаты запроса SQL — WebGrid вспомогательный объект не может отображать столбцы, которые не были возвращены запросом.)(These columns must be included in the SQL query results — the WebGrid helper cannot display columns that were not returned by the query.)

Снова запустите страницу movies. cshtml в браузере, и на этот раз отобразится сообщение следующего вида (Обратите внимание, что столбец ID не отображается):Launch the Movies.cshtml page in the browser again, and this time you get a display like the following one (notice that no ID column is displayed):

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

Изменение вида сеткиChanging the Look of the Grid

Существует несколько дополнительных параметров для отображения столбцов, некоторые из которых будут рассмотрены в последующих руководствах в этом наборе.There are quite a few more options for displaying columns, some of which will be explored in later tutorials in this set. Сейчас в этом разделе будут представлены способы применения стиля сетки в целом.For now, this section will introduce you to ways in which you can style the grid as a whole.

В разделе <head> страницы непосредственно перед закрывающим тегом </head> добавьте следующий элемент <style>:Inside the <head> section of the page, just before the closing </head> tag, add the following <style> element:

<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и т. д.This CSS markup defines classes named grid, head, and so on. Эти определения стилей также можно разместить в отдельном CSS -файле и связать его со страницей.You could also put these style definitions in a separate .css file and link that to the page. (На самом деле это будет сделано далее в этом руководстве.) Но для упрощения работы с этим руководством они находятся на той же странице, где отображаются данные.(In fact, you'll do that later in this tutorial set.) But to make things easy for this tutorial, they're inside the same page that displays the data.

Теперь можно получить вспомогательный модуль WebGrid для использования этих классов стилей.Now you can get the WebGrid helper to use these style classes. У вспомогательного приложения есть ряд свойств (например, tableStyle) только для этой цели — для них назначается имя класса стиля CSS, а имя класса отображается как часть разметки, отображаемой вспомогательным приложением.The helper has a number of properties (for example, tableStyle) for just this purpose — you assign a CSS style class name to them, and that class name is rendered as part of the markup that's rendered by the helper.

Измените разметку grid.GetHtml, чтобы она теперь выглядела как следующий код:Change the grid.GetHtml markup so that it now looks like this code:

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

Новые возможности в том, что в метод GetHtml добавлены параметры tableStyle, headerStyleи alternatingRowStyle.What's new here is that you've added tableStyle, headerStyle, and alternatingRowStyle parameters to the GetHtml method. Для этих параметров были заданы имена стилей CSS, добавленных к моменту назад.These parameters have been set to the names of the CSS styles that you added a moment ago.

Запустите страницу, и на этот раз вы увидите сетку, которая выглядит гораздо менее простой, чем раньше.Run the page, and this time you see a grid that looks much less plain than before:

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

Чтобы увидеть, что создает метод GetHtml, можно взглянуть на источник страницы в браузере.To see what the GetHtml method generated, you can look at the source of the page in the browser. Здесь мы не будем подробно рассматриваться, но важно отметить, что при указании таких параметров, как tableStyle, в сетке создаются HTML-теги следующего вида:We won't go into detail here, but the important point is that by specifying parameters like tableStyle, you caused the grid to generate HTML tags like the following:

<table class="grid">

К тегу <table> был добавлен атрибут class, который ссылается на одно из добавленных ранее правил CSS.The <table> tag has had a class attribute added to it that references one of the CSS rules that you added earlier. Этот код показывает базовый шаблон, — различные параметры для метода GetHtml позволяют ссылаться на классы CSS, которые затем создаются методом вместе с разметкой.This code shows you the basic pattern — different parameters for the GetHtml method let you reference CSS classes that the method then generates along with the markup. То, что вы выполняете с классами CSS, является готовым к вам.What you do with the CSS classes is up to you.

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

В качестве последней задачи в этом руководстве вы добавите разбиение по страницам к сетке.As the last task for this tutorial, you'll add paging to the grid. Сейчас у вас нет проблем с отображением всех фильмов одновременно.Right now it's no problem to display all your movies at once. Но если вы добавили сотни фильмов, отображение страницы будет иметь большую длину.But if you added hundreds of movies, the page display would get long.

В коде страницы измените строку, которая создает объект WebGrid, на следующий код:In the page code, change the line that creates the WebGrid object to the following code:

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

Единственное отличие от ранее заключается в том, что добавлен параметр rowsPerPage, для которого задано значение 3.The only difference from before is that you've added a rowsPerPage parameter that's set to 3.

Запустите страницу.Run the page. В сетке отображаются три строки за раз, а также ссылки навигации, позволяющие пролистывать фильмы в базе данных:The grid displays 3 rows at a time, plus navigation links that let you page through the movies in your database:

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

ДалееComing Up Next

В следующем руководстве вы узнаете, как использовать Razor и C# код для получения вводимых пользователем данных в форме.In the next tutorial, you'll learn how to use Razor and C# code to get user input in a form. Вы добавите поле поиска на страницу фильмов, чтобы можно было найти фильмы по названию или жанру.You'll add a search box to the Movies page so that you can find movies by title or genre.

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

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

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