Учебники

Microsoft Expression Web – источник данных SQL

В Expression Web есть много инструментов для работы со статическими HTML-страницами, но также есть инструменты для создания более динамичных страниц. Динамические страницы часто извлекают данные или контент из источника данных. В этой главе мы узнаем, как создать источник данных SQL для использования на динамических страницах.

пример

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

Шаг 1 – Начните с создания нового пустого сайта.

Пустой сайт

Давайте назовем это SQLDataSource . Нажмите ОК.

Шаг 2 – Вы увидите, что выражение web создало для нас папку. Однако, поскольку мы решили создать пустой проект, у нас пока нет файлов.

Пустой проект

Expression Web не нужно использовать только для создания статических сайтов HTML; мы можем с легкостью создавать динамические сайты, используя страницы и элементы управления.

Шаг 3 – Expression Web также позволяет нам создавать много динамического контента без необходимости быть разработчиком. Итак, давайте добавим файл ASPX из меню « Файл» → «Новая страница» . Выберите ASPX в средней модели и нажмите OK.

Новые страницы

Шаг 4 – Здесь мы создадим элемент управления в нашей форме, который должен получить доступ к данным из базы данных для создания динамического веб-сайта.

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

SQL DataSource

Шаг 5. Перейдите на панель инструментов и перетащите DropDownList и поместите его внутри тега <form> в представлении кода, или вы также можете поместить его в раздел формы в представлении «Дизайн». Вы увидите, что код добавлен Expression Web.

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

Выпадающий список

Шаг 6 – Создайте новую папку в папке проекта, перейдя в пункт меню « Создать» → «Папка» .

Новая папка

Шаг 7 – Назовите эту папку App_Data .

Данные приложения

Шаг 8 – Нам нужно импортировать базу данных в наш проект, используя пункт меню Файл → Импорт → Файл… .

Импортировать файл

Шаг 9 – Откроется диалоговое окно « Импорт », как показано ниже. Нажмите на кнопку «Добавить файл…», которая откроет диалоговое окно «Открыть файл».

Диалог импорта

Шаг 10 – Перейдите к базе данных (* .mdf файл), которую вы хотите включить в веб-сайт, и нажмите «Открыть».

База данных

Шаг 11 – Откройте MyTestDatabase.mdf. Появится следующий диалог. Нажмите ОК.

MyTestDatabase

Шаг 12. Теперь вы видите, что файл базы данных добавлен в папку App_Data. Если у вас есть элемент управления, например выпадающий список, и Expression Web позволяет вам привязать к нему данные, тогда вы увидите маленькую стрелку в верхнем правом углу в представлении конструктора.

Папка App_Data

Шаг 13 – Это текущее контекстное меню, которое может позволить нам выполнить очень специфическую задачу для этого конкретного элемента управления, и одним из них является выбор источника данных. Итак, давайте нажмем « Выбрать источник данных», и откроется мастер настройки источника данных.

Выберите источник данных

Шаг 14 – В настоящее время у нас нет источника данных. Давайте выберем опцию New data source из меню.

Новый источник данных

Здесь мы импортируем базу данных SQL. Давайте выберем базу данных и нажмем ОК.

Шаг 15 – Теперь нам нужно указать строку подключения. Давайте нажмем кнопку «Новое соединение».

Новое соединение

Шаг 16 – Выберите файл базы данных Microsoft SQL Server и нажмите ОК.

Microsoft SQL Server

Шаг 17 – Нажмите кнопку Обзор, чтобы найти файл базы данных.

Найдите базу данных

Шаг 18 – Выберите файл базы данных и нажмите кнопку «Открыть» или дважды щелкните файл базы данных.

Файл базы данных

Шаг 19 – Чтобы проверить соединение, нажмите кнопку «Проверить соединение».

Тестовое соединение

Появится следующий экран. Нажмите кнопку ОК.

Экран монитора

Шаг 20 – Теперь мы настроим источник данных. Нажмите Далее на следующем экране.

Настроить источник данных

Проверьте флажок и нажмите Next снова.

Флажок

Шаг 21 – Здесь вы увидите все таблицы из вашей базы данных. Давайте выберем стол ученика .

Студенческий стол

Шаг 22 – И вы увидите все столбцы в списке. Выберите ID и Фамилия . Внизу вы можете увидеть, что он фактически создает запрос. Вы также можете использовать предложения Where или ORDER BY . Когда вы закончите с запросом, нажмите Далее.

Заказ по пунктам

Шаг 23 – Нажмите кнопку « Тестовый запрос» . Он отобразит результат запроса, как показано ниже.

Результат запроса

Шаг 24 – В следующем диалоговом окне источник данных выбран по умолчанию. «Выберите поле данных для отображения в DropDownList» – это поле, которое фактически будет отображаться. Давайте выберем LastName и выберите идентификатор из «Выберите поле данных для значения DropDownList» и нажмите «Ok».

Мастер настройки источника данных

Как вы можете видеть на следующем снимке экрана, DataSource добавляется в режиме конструктора.

Источник данных добавлен

Ниже приведен полный код файла ASPX, созданный Expression Web.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<%@ Page Language = "C#" %> 
<html dir = "ltr" xmlns = "http://www.w3.org/1999/xhtml">  
   <head runat = "server"> 
      <meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" /> 
      <title>Untitled 1</title> 
   </head>  

   <body>  
      <form id = "form1" runat = "server"> 
         <asp:DropDownList id = "listID" runat = "server" DataSourceID = "SqlDataSource1"  
            DataTextField = "LastName" DataValueField = "ID"> 
         </asp:DropDownList> 

         <asp:SqlDataSource ID = "SqlDataSource1" runat = "server"   
            ConnectionString = "<%$ ConnectionStrings:MyTestDatabaseConnectionString %>"  
               SelectCommand = "SELECT [ID], [LastName] FROM [Student]"> 
         </asp:SqlDataSource> 
      </form>  
   </body>  
</html>

Шаг 25 – Давайте сохраним веб-страницу, нажав Ctrl + S.

Сохранить веб-страницу

Назовите эту страницу SQLDatasource.aspx и нажмите Сохранить.

Шаг 26 – Давайте предварительно просмотрим эту страницу в браузере. Вы увидите выпадающий список, который содержит фамилию студентов из таблицы « Студенты» .