Walkthrough: Creating the Course Manager Web Application

[This topic is pre-release documentation and is subject to change in future releases. Blank topics are included as placeholders.]

This topic describes how to create a basic ASP.NET application that uses the Entity Framework. The application, CourseManagerWeb, closely resembles the Course Manager Windows Forms application in the Quickstart for the ADO.NET Entity Framework.

To complete this walkthrough, you must have the following installed:

This walkthrough assumes that you have basic competency with Visual Studio, the .NET Framework, and programming in either Visual C# or Visual Basic.

This application is based on a standard ASP.NET Web Application project.

To create the CourseManagerWeb solution in Visual Studio

  1. From the File menu in Visual Studio, select New, and then click Project.

    The New Project dialog box is displayed.

  2. In the Project Type pane, select either Visual Basic or Visual C#. Specify a Template type of ASP.NET Web Application, and type the name CourseManagerWeb.

  3. Click OK.

  4. Confirm that the solution has been generated and that it contains the Default.aspx and Web.config files.

This application displays data by binding ASP.NET controls to an Entity Framework conceptual model.

To generate the School .edmx file

  1. Right-click the CourseManagerWeb project in the Solution Explorer, point to Add, and then click New Item.

  2. Select ADO.NET Entity Data Model in the Templates pane.

  3. Type School.edmx for the model name and then click Add.

    The opening page of the Entity Data Model Wizard appears.

  4. In the Choose Model Contents dialog box, select Generate from database and then click Next.

    The Choose Your Data Connection dialog box appears.

  5. Click the New Connection button.

    The Connection Properties dialog box is displayed.

  6. Enter your server name, select the authentication method, type School for the database name, and then click OK.

    The Choose Your Data Connections dialog box is updated with the database connection settings.

  7. Ensure that Save entity connection settings in Web.Config as: is checked and the value is set to SchoolEntities. Click Next.

    The Choose Your Database Objects dialog box is displayed.

  8. Ensure that all tables are selected and that the value of Model namespace is SchoolModel, and then click Finish to complete the wizard.

    The wizard does the following:

    • Adds references to the System.Data.Entity, System.Runtime.Serialization, and System.Security namespaces.

    • Generates School.edmx, the file that defines the conceptual model, the storage model, and the mapping between the two.

    • Creates a source code file that contains the classes that were generated based on the conceptual model. To view the source code file, expand the Default.aspx node in the Solution Explorer.

    • Updates the connection string section of the Web.Config file.

Before going on to the next step, examine the School.edmx file by opening it in the ADO.NET Entity Data Model Designer (the default viewer).

For Visual Basic projects, some files might not be visible in the Solution Explorer. To see all the project files, click Project in the Visual Studio task bar and select Show All Files.

The UI for this application contains HTML and ASP.NET Web controls.

To create the CourseManager Web page

  1. In the CourseManagerWeb project, right-click the default Web page (Default.aspx) and select View Designer.

    The file opens in the Web Page Designer.

  2. Delete the default div section that is automatically generated in new ASP.NET Web applications.

  3. From the Toolbox, drag a DropDownList control to the design surface and set the following properties:

    • ID to departmentList

    • AutoPostBack to True

  4. Expand the Data section of the Toolbox and drag an EntityDataSource control to the panel. Change its ID property to departmentDS.

  5. Drag a GridView Web control to the panel and set its ID property to courseGridView.

The UI is now complete.

Next, you bind the DropDownList control to the EntityDataSource control so that the DropDownList will display department names.

To bind the DropDownList control

  1. Press Ctrl + F5 to build the application. This is required to make the model metadata available to the Configure Data Source Wizard, which you will use in the next step.

  2. In the Web Page Designer window, select the departmentDS EntityDataSource control, click its smart tag, and select the Configure Data Source command.

    The Configure Data Source Wizard starts.

  3. In the Configure ObjectContext dialog box, select SchoolEntities from the Named Connection drop-down list.

  4. Select SchoolEntities from the Default Container drop-down list.

  5. Click Next.

  6. In the Configure Data Selection dialog box, do the following:

    1. Select Departments from the EntitySetName drop-down list.

    2. Select (None) from the EntityTypeFilter drop-down list.

    3. Check the DepartmentID and Name fields in the Select box.

    4. Click Finish to finish configuring the data source.

  7. Return to the Design View of the Web page.

  8. Select the departmentList DropDownList control, click on the smart tag, and then click Choose Data Source.

    The Choose a Data Source dialog box of the Data Source Configuration Wizard appears.

  9. In the Choose a Data Source dialog box, make the following selections:

    • For Select Data Source, select departmentDS.

    • For Select a data field to display in the DropDownList, select Name.

    • For Select a data field for the value of the DropDownList, select DepartmentID.

    If no values are available in the drop-down lists, click Refresh Schema.

  10. Click OK.

The solution will now build successfully. When the application is run, the DropDownList control is populated with the names of departments. When you select a department, the form will post, but class schedule information will not yet be displayed.

Next, add code so that the GridView control displays all courses offered in the selected department. To do this, you create strongly-typed queries against the common language runtime (CLR) objects that represent entities and associations in the School model.

  1. In the Solution Explorer, right-click Default.aspx.vb or Default.aspx.cs and select View Code.

  2. Add the following using (C#) or Imports (Visual Basic) statements to reference the model that you created from the School database and the entity namespace.

  3. Add a property to the _Default class that represents the object context.

  4. Inside the existing page load event handler, add the following code to initialize the schoolContext property.

  5. Return to the Design View of the Default.aspx Web page. Double-click the departmentList DropDownList control.

    This adds a SelectedIndexChanged event handler for the departmentList control to the Default.aspx.vb or Default.aspx.cs file.

  6. Paste the following code into the SelectedIndexChanged event handler:

    This code uses a LINQ to Entities query to get the course information based on the provided DepartmentID. The query generates a collection of anonymous types that contains the course ID, course title, and course credits. This collection is then bound to the GridView control.

  7. Add a PreRenderComplete event handler to the _Default class in the Default.aspx.vb or Default.aspx.cs file. Add the following code to initialize the GridView control when the page is first displayed.

The application will now build successfully and is fully functional. Selecting a different department form the drop-down list causes the form to be posted and the GridView control to be updated with corresponding course information.

This section lists the final versions of the code for the body of the default Web page and for the code-behind file of the CourseManagerWeb solution.

Body of Default Web Page

Code-Behind File

You have successfully created and run the CourseManagerWeb application. For more information about the Entity Framework, see ADO.NET Entity Framework.