Пошаговое руководство: создание веб-приложения Course Manager

Статья
11/04/2008

В этом разделе описано, как создать простое приложение ASP.NET, использующее модель EDM. Приложение CourseManagerWeb во многом напоминает приложение Course Manager Windows Forms в разделе Краткое руководство для ADO.NET Entity Framework.

Предварительные требования

Для работы с этим пошаговым руководством потребуются следующие установленные продукты.

Microsoft Visual Studio 2008 с пакетом обновления 1 (SP1).
Образец базы данных School. Дополнительные сведения о создании этой небольшой базы данных см. в разделе Создание образца базы данных School (краткое руководство по Entity Framework).

В этом пошаговом руководстве предполагается, что вы имеете достаточный опыт работы с Visual Studio и платформой .NET Framework, а также опыт программирования на Visual C# или Visual Basic.

Создание решения

Это приложение основано на стандартном проекте веб-приложения ASP.NET.

Создание решения CourseManagerWeb в среде Visual Studio

В меню Файл среды Visual Studio последовательно выберите команды Создать и Проект.

Откроется диалоговое окно Создание проекта.
В области Тип проекта выберите Visual Basic или Visual C#. Укажите тип Шаблон для элемента Веб-приложение ASP.NET, затем введите имя CourseManagerWeb.
Нажмите ОК.
Подтвердите создание решения и то, что оно содержит файлы Default.aspx и Web.config.

Формирование модели EDM «School»

Это приложение отображает данные, привязывая средства управления ASP.NET к модели EDM.

Формирование модели EDM «School»

Щелкните правой кнопкой мыши проект CourseManagerWeb в окне Обозреватель решений, укажите пункт Добавить и выберите пункт Новый элемент.
Выберите в области Шаблоны пункт Модель ADO.NET EDM.
В качестве имени модели введите School.edmx и нажмите кнопку Добавить.

На экране появится стартовая страница мастера моделей EDM.
В диалоговом окне Выбор содержимого модели выберите Создать из базы данных и нажмите кнопку Далее.

Откроется диалоговое окно Выбор подключения к данным.
Нажмите кнопку Создать соединение.

Откроется диалоговое окно Свойства соединения.
Введите имя сервера, выберите метод проверки подлинности, в качестве имени базы данных введите School и нажмите кнопку ОК.

В диалоговом окне Выбор подключения к данным обновятся настройки подключения к базе данных.
Проверьте, что установлен флажок Сохранить параметры соединения сущности в Web.Config как: и задано значение SchoolEntities. Нажмите кнопку Далее.

Откроется диалоговое окно Выбор объектов базы данных.
Проверьте, что все таблицы выделены, а параметр Пространство имен модели имеет значение SchoolModel; затем нажмите кнопку Готово, чтобы завершить работу мастера.

Мастер выполняет следующие действия.
- Добавляет ссылки на пространства имен System.Data.Entity, System.Runtime.Serialization и System.Security.
- Создает файл School.edmx, который определяет модель EDM.
- Создает файл с исходным кодом, в котором содержатся классы, сформированные на основе модели EDM. Файл с исходным кодом можно просмотреть, раскрыв узел Default.aspx в окне Обозреватель решений.
- Обновляет раздел строки соединения в файле Web.Config.

Перед тем как перейти к следующему шагу, изучите файл School.edmx, открыв его в конструкторе моделей EDM ADO.NET (средство просмотра по умолчанию).

Примечание.
В проектах Visual Basic некоторые файлы могут не отображаться в окне Обозреватель решений. Чтобы просмотреть все файлы проекта, нажмите на панели задач среды Visual Studio кнопку Проект и выберите пункт Показать все файлы.

Создание пользовательского интерфейса

Пользовательский интерфейс для этого приложения содержит веб-элементы управления HTML и ASP.NET.

Создание веб-страницы CourseManager

В проекте CourseManagerWeb щелкните правой кнопкой мыши веб-страницу по умолчанию (Default.aspx) и выберите Конструктор представлений.

Файл откроется в конструкторе веб-страниц.
Удалите раздел по умолчанию div, который создается автоматически в новых веб-приложениях ASP.NET.
Перетащите элемент управления DropDownList из области элементов в область конструктора и задайте следующие свойства.
- Свойство ID со значением departmentList.
- Свойство AutoPostBack со значением True.
Разверните раздел Данные области элементов и перетащите на панель элемент управления EntityDataSource. Измените значение свойства ID на departmentDS.
Перетащите веб-элемент управления GridView на панель и задайте для свойства ID значение courseGridView.

На этом подготовка пользовательского интерфейса завершена.

Привязка элемента управления DropDownList

Далее привяжите элемент управления DropDownList к элементу управления EntityDataSource таким образом, чтобы элемент DropDownList отображал названия отделов.

Привязка элемента управления DropDownList

Нажмите клавиши Ctrl + F5, чтобы построить приложение. Это необходимо, чтобы сделать метаданные модели доступными для мастера настройки источников данных, который будет использоваться в следующем шаге.
В окне Конструктор веб-страниц выберите элемент управления departmentDSEntityDataSource, щелкните его смарт-тег, а затем выберите команду Настроить источник данных.

Откроется мастер настройки источников данных.
В диалоговом окне Настройка ObjectContext в раскрывающемся списке Именованное соединение выберите пункт SchoolEntities.
Выберите в раскрывающемся списка Контейнер по умолчанию пункт SchoolEntities.
Нажмите кнопку Далее.
В диалоговом окне Настройка отбора данных выполните следующие действия.
1. Выберите пункт Department из раскрывающегося списка EntitySetName.
2. Выберите пункт (Нет) из раскрывающегося списка EntityTypeFilter.
3. Отметьте поля DepartmentID и Name в поле Select.
4. Нажмите кнопку Готово, чтобы завершить настройку источника данных.
Возвратитесь в окно конструктора веб-страницы.
Выберите элемент управления departmentListDropDownList, щелкните его смарт-тег, а затем нажмите Выбор источника данных.

Откроется диалоговое окно Выбор источника данных мастера настройки источников данных.
В диалоговом окне Выбор источника данных выберите следующие значения.
- Для элемента Выбор источника данных выберите DepartmentDS.
- Для элемента Выбор поля данных для отображения в элементе DropDownList выберите Name.
- Для элемента Выбор поля данных в качестве значения элемента DropDownList выберите DepartmentID.
Примечание.

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

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

Теперь решение будет успешно построено. После запуска приложения элемент управления DropDownList заполнится названиями отделов. Если выбрать отдел, форма будет опубликована, но сведения о расписании занятий отображаться не будут.

Привязка элемента управления GridView

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

Привязка элемента управления GridView

В окне Обозреватель решений щелкните правой кнопкой мыши Default.aspx.vb или Default.aspx.cs, затем выберите команду Просмотреть код.
Добавьте следующие инструкции using (C#) или Imports (Visual Basic), чтобы сослаться на модель, созданную из базы данных School, и пространство имен сущностей.
```
Imports System.Data.Objects
```
```
using System.Data.Objects;
```

Добавьте свойство к классу _Default, представляющему контекст объекта.

' Create an ObjectContext based on SchoolEntity.
Private schoolContext As SchoolEntities

// Create an ObjectContext based on SchoolEntity.
private SchoolEntities schoolContext;

В существующую страницу загрузите обработчик события и добавьте следующий код инициализации свойства schoolContext.
```
 ' Initialize the ObjectContext.
schoolContext = New SchoolEntities()
```
```
// Initialize the data context.
schoolContext = new SchoolEntities();
```
Возвратитесь к представлению конструктора веб-страницы Default.aspx. Дважды щелкните элемент управления departmentListDropDownList.

В результате этого к файлу Default.aspx.vb или Default.aspx.cs будет добавлен обработчик события SelectedIndexChanged для элемента управления departmentList.

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

'Get the department ID.
Dim departmentID As Int32 = CType(departmentList.SelectedValue, Int32)

    ' Select course information based on department ID.
    Dim courseInfo = _
        From c In schoolContext.Course _
        Where c.Department.DepartmentID = departmentID _
        Select New With _
        { _
            .CourseID = c.CourseID, _
            .CourseName = c.Title, _
            .CourseCredits = c.Credits _
        }

    ' Bind the GridView control to the courseInfo collection.
    courseGridView.DataSource = courseInfo
    courseGridView.DataBind()

// Get the department ID.
Int32 departmentID = Convert.ToInt32(departmentList.SelectedValue);

// Select course information based on department ID.
var courseInfo = from c in schoolContext.Course
                where c.Department.DepartmentID == departmentID
                select new
                {
                    CourseID = c.CourseID,
                    CourseTitle = c.Title,
                    CourseCredits = c.Credits
                };

// Bind the GridView control to the courseInfo collection.
courseGridView.DataSource = courseInfo;
courseGridView.DataBind();

В этом коде используется запрос LINQ to Entities для получения сведений о курсе на основе предоставленного идентификатора DepartmentID. Запрос формирует коллекцию анонимных типов, содержащих идентификатор курса, название курса и отзывы о курсе. Эта коллекция затем привязывается к элементу управления GridView.

Добавьте обработчик события PreRenderComplete к классу _Default в файле Default.aspx.vb или Default.aspx.cs. Добавьте следующий код, чтобы инициализировать элемент управления GridView при первом отображении страницы.

Private Sub Page_PreRenderComplete(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreRenderComplete
    ' Force initial GridView update.
    departmentList_SelectedIndexChanged(Me, New EventArgs())
End Sub

protected void Page_PreRenderComplete(object sender, EventArgs e)
{
    // Force initial GridView update.
    departmentList_SelectedIndexChanged(this.Page, new EventArgs());
}

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

Листинг кода

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

Текст веб-страницы по умолчанию

<body>
  <form id="form1" runat="server">
    <asp:DropDownList ID="departmentList" runat="server" 
         AutoPostBack="True" DataSourceID="departmentDS" 
        DataTextField="Name" DataValueField="DepartmentID" 
        onselectedindexchanged="departmentList_SelectedIndexChanged"> 
    </asp:DropDownList>
    
    <asp:EntityDataSource ID="departmentDS" runat="server" 
       ConnectionString="name=SchoolEntities"
       DefaultContainerName="SchoolEntities" 
       EntitySetName="Department" Select="it.[DepartmentID], 
       it.[Name]">
    </asp:EntityDataSource>

    <asp:GridView ID="courseGridView" runat="server">
    </asp:GridView>

    <asp:Button ID="closePage" runat="server" Text="Close" 
       onclick="closePage_Click" />
  </form>
</body>

Файл с фоновым кодом

Imports System.Data.Objects
Partial Public Class _Default
    Inherits System.Web.UI.Page
    ' Create an ObjectContext based on SchoolEntity.
    Private schoolContext As SchoolEntities

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        ' Initialize the ObjectContext.
        schoolContext = New SchoolEntities()
    End Sub

    Protected Sub departmentList_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs) Handles departmentList.SelectedIndexChanged
    'Get the department ID.
    Dim departmentID As Int32 = CType(departmentList.SelectedValue, Int32)

        ' Select course information based on department ID.
        Dim courseInfo = _
            From c In schoolContext.Course _
            Where c.Department.DepartmentID = departmentID _
            Select New With _
            { _
                .CourseID = c.CourseID, _
                .CourseName = c.Title, _
                .CourseCredits = c.Credits _
            }

        ' Bind the GridView control to the courseInfo collection.
        courseGridView.DataSource = courseInfo
        courseGridView.DataBind()
    End Sub
    Private Sub Page_PreRenderComplete(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreRenderComplete
        ' Force initial GridView update.
        departmentList_SelectedIndexChanged(Me, New EventArgs())
    End Sub
End Class

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.Objects;
namespace CourseManagerWeb
{
    public partial class _Default : System.Web.UI.Page
    {
        // Create an ObjectContext based on SchoolEntity.
        private SchoolEntities schoolContext;

        protected void Page_PreRenderComplete(object sender, EventArgs e)
        {
            // Force initial GridView update.
            departmentList_SelectedIndexChanged(this.Page, new EventArgs());
        }

        protected void Page_Load(object sender, EventArgs e)
        {
            // Initialize the data context.
            schoolContext = new SchoolEntities();
        }

        protected void departmentList_SelectedIndexChanged(object sender, EventArgs e)
        {
            // Get the department ID.
            Int32 departmentID = Convert.ToInt32(departmentList.SelectedValue);
            
            // Select course information based on department ID.
            var courseInfo = from c in schoolContext.Course
                            where c.Department.DepartmentID == departmentID
                            select new
                            {
                                CourseID = c.CourseID,
                                CourseTitle = c.Title,
                                CourseCredits = c.Credits
                            };

            // Bind the GridView control to the courseInfo collection.
            courseGridView.DataSource = courseInfo;
            courseGridView.DataBind();
        }
    }
}

Следующие шаги

Приложение CourseManagerWeb успешно создано и выполнено. Дополнительные сведения о платформе Entity Framework см. в разделе ADO.NET Entity Framework, платформа.

См. также

Другие ресурсы

Краткое руководство (платформа Entity Framework)
Образцы (платформа Entity Framework)
Службы объектов (платформа Entity Framework)
Работа с данными сущностей

Поделиться через

Пошаговое руководство: создание веб-приложения Course Manager

Предварительные требования

Создание решения

Создание решения CourseManagerWeb в среде Visual Studio

Формирование модели EDM «School»

Формирование модели EDM «School»

Создание пользовательского интерфейса

Создание веб-страницы CourseManager

Привязка элемента управления DropDownList

Привязка элемента управления DropDownList

Привязка элемента управления GridView

Привязка элемента управления GridView

Листинг кода

Текст веб-страницы по умолчанию

Файл с фоновым кодом

Следующие шаги

См. также

Другие ресурсы

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