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


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

В этом разделе описано, как создать простое приложение 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

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

    Откроется диалоговое окно Создание проекта.

  2. В области Тип проекта выберите Visual Basic или Visual C#. Укажите тип Шаблон для элемента Веб-приложение ASP.NET, затем введите имя CourseManagerWeb.

  3. Нажмите кнопку ОК.

  4. Подтвердите создание решения и то, что оно содержит файлы Default.aspx и Web.config.

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

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

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

  1. Щелкните правой кнопкой мыши проект CourseManagerWeb в окне Обозреватель решений, укажите пункт Добавить и выберите пункт Новый элемент.

  2. Выберите в области Шаблоны пункт Модель ADO.NET EDM.

  3. В качестве имени модели введите School.edmx и нажмите кнопку Добавить.

    На экране появится стартовая страница мастера моделей EDM.

  4. В диалоговом окне Выбор содержимого модели выберите Создать из базы данных и нажмите кнопку Далее.

    Откроется диалоговое окно Выбор подключения к данным.

  5. Нажмите кнопку Создать соединение.

    Откроется диалоговое окно Свойства соединения.

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

    В диалоговом окне Выбор подключения к данным обновятся настройки подключения к базе данных.

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

    Откроется диалоговое окно Выбор объектов базы данных.

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

    Мастер выполняет следующие действия.

    • Добавляет ссылки на пространства имен System.Data.Entity, System.Runtime.Serialization и System.Security.

    • Формирует файл School.edmx, который определяет концептуальную модель, режим хранения и их сопоставление.

    • Создает файл с исходным кодом, содержащий классы, сформированные на основе концептуальной модели. Файл с исходным кодом можно просмотреть, раскрыв узел Default.aspx в окне Обозреватель решений.

    • Обновляет раздел строки соединения в файле Web.Config.

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

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

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

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

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

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

    Файл откроется в конструкторе веб-страниц.

  2. Удалите раздел по умолчанию div, который создается автоматически в новых веб-приложениях ASP.NET.

  3. Перетащите элемент управления DropDownList из области элементов в область конструктора и задайте следующие свойства.

    • Свойство ID со значением departmentList.

    • Свойство AutoPostBack со значением True.

  4. Разверните раздел Данные области элементов и перетащите на панель элемент управления EntityDataSource. Измените значение свойства ID на departmentDS.

  5. Перетащите веб-элемент управления GridView на панель и задайте для свойства ID значение courseGridView.

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

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

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

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

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

  2. В окне Конструктор веб-страниц выберите элемент управления departmentDS EntityDataSource, щелкните его смарт-тег, а затем выберите команду Настроить источник данных.

    Откроется мастер настройки источников данных.

  3. В диалоговом окне Настройка ObjectContext в раскрывающемся списке Именованное соединение выберите пункт SchoolEntities.

  4. Выберите в раскрывающемся списка Контейнер по умолчанию пункт SchoolEntities.

  5. Нажмите кнопку Далее.

  6. В диалоговом окне Настройка отбора данных выполните следующие действия.

    1. Выберите пункт Departments из раскрывающегося списка EntitySetName.

    2. Выберите пункт (Нет) из раскрывающегося списка EntityTypeFilter.

    3. Отметьте поля DepartmentID и Name в поле Select.

    4. Нажмите кнопку Готово, чтобы завершить настройку источника данных.

  7. Возвратитесь в окно конструктора веб-страницы.

  8. Выберите элемент управления departmentList DropDownList, щелкните его смарт-тег, а затем нажмите Выбор источника данных.

    Откроется диалоговое окно Выбор источника данных мастера настройки источников данных.

  9. В диалоговом окне Выбор источника данных выберите следующие значения.

    • Для элемента Выбор источника данных выберите DepartmentDS.

    • Для элемента Выбор поля данных для отображения в элементе DropDownList выберите Name.

    • Для элемента Выбор поля данных в качестве значения элемента DropDownList выберите DepartmentID.

    Bb896242.note(ru-ru,VS.100).gifПримечание
    Если в раскрывающихся списках нет доступных значений, нажмите Обновить схему.

  10. Нажмите кнопку ОК.

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

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

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

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

  1. В окне Обозреватель решений щелкните правой кнопкой мыши Default.aspx.vb или Default.aspx.cs, затем выберите команду Просмотреть код.

  2. Добавьте следующие инструкции using (C#) или Imports (Visual Basic), чтобы сослаться на модель, созданную из базы данных School, и пространство имен сущностей.

    Imports System.Data.Objects
    
    using System.Data.Objects;
    
  3. Добавьте свойство к классу _Default, представляющему контекст объекта.

    ' Create an ObjectContext based on SchoolEntity.
    Private schoolContext As SchoolEntities
    
    // Create an ObjectContext based on SchoolEntity.
    private SchoolEntities schoolContext;
    
  4. В существующую страницу загрузите обработчик события и добавьте следующий код инициализации свойства schoolContext.

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

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

  6. Вставьте в обработчик события 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.

  7. Добавьте обработчик события 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