Пошаговое руководство. Создание веб-приложения Course Manager (средства работы с моделью EDM)

Статья
04/19/2011

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

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

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

Microsoft Visual Studio 2010.
Образец базы данных School. Дополнительные сведения о создании этой небольшой базы данных см. в разделе Creating the School Sample Database.

В этом пошаговом руководстве предполагается, что вы имеете достаточный опыт работы с 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.

Создание файла School.edmx

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

Создание файла School.edmx

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

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

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

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

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

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

Мастер выполняет следующие действия.
- Добавляет ссылки на пространства имен System.Data.Entity, System.Runtime.Serialization и System.Security.
- Формирует файл School.edmx, который определяет концептуальную модель, режим хранения и их сопоставление.
- Создает файл с исходным кодом, содержащий классы, сформированные на основе концептуальной модели. Файл с исходным кодом можно просмотреть, раскрыв узел 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, чтобы построить приложение. Это необходимо, чтобы сделать метаданные модели доступными для мастера настройки источников данных, который будет использоваться в следующем шаге.
В окне Конструктор веб-страниц выберите элемент управления departmentDS EntityDataSource, щелкните его смарт-тег, а затем выберите команду Настроить источник данных.

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

Откроется диалоговое окно Выбор источника данных мастера настройки источников данных.
В диалоговом окне Выбор источника данных выберите следующие значения.
- Для элемента Выбор источника данных выберите 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. Дважды щелкните элемент управления departmentList DropDownList.

В результате этого к файлу 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.Courses _
    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.Courses
                 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" 
                      Height="19px" Width="161px">
    </asp:DropDownList>
    <asp:EntityDataSource ID="departmentDS" runat="server" 
        ConnectionString="name=SchoolEntities" 
        DefaultContainerName="SchoolEntities" 
        EnableFlattening="False" EntitySetName="Departments" 
        Select="it.[DepartmentID], it.[Name]">
    </asp:EntityDataSource>
    <asp:GridView ID="courseGridView" runat="server">
    </asp:GridView>
    </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.Courses _
            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.Courses
                             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.

См. также

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

Quickstart
Samples (Entity Framework)
Querying an Entity Data Model

Пошаговое руководство. Создание веб-приложения Course Manager (средства работы с моделью EDM)

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

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

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

Создание файла School.edmx

Создание файла School.edmx

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

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

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

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

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

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

Листинг кода

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

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

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

См. также

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

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