In Visual Studio, select File, New, Project from the main menu.

Choose the Windows Forms Application installed template. Click OK. The solution is created.

In the Solution Explorer, right click on your application and select Add, New Item.... From Visual Studio installed templates select ADO.NET Entity Data Model. Click Add.

Figure 20.18. Add Entity Data Model

You will now see the Entity Data Model Wizard. You will use the wizard to generate the Entity Data Model from the world example database. Select the icon Generate from database. Click Next.

Figure 20.19. Entity Data Model Wizard Screen 1

You can now select the connection you made earlier to the World database. If you have not already done so, you can create the new connection at this time by clicking on New Connection.... For further instructions on creating a connection to a database see Section 20.2.3.1, “Making a connection”.

Figure 20.20. Entity Data Model Wizard Screen 2

Make a note of the entity connection settings to be used in App.Config, as these will be used later to write the necessary control code.

Click Next.

The Entity Data Model Wizard connects to the database. You are then presented with a tree structure of the database. From this you can select the object you would like to include in your model. If you had created Views and Stored Routines these will be displayed along with any tables. In this example you just need to select the tables. Click Finish to create the model and exit the wizard.

Figure 20.21. Entity Data Model Wizard Screen 3

Visual Studio will generate the model and then display it.

Figure 20.22. Entity Data Model Diagram

From the Visual Studio main menu select Build, Build Solution, to ensure that everything compiles correctly so far.

From the Visual Studio main menu select Data, Add New Data Source.... You will be presented with the Data Source Configuration Wizard.

Figure 20.23. Entity Data Source Configuration Wizard Screen 1

Select the Object icon. Click Next.

You will now select the Object you wish to bind to. Expand the tree. In this tutorial you will select the city table. Once the city table has been selected click Next.

Figure 20.24. Entity Data Source Configuration Wizard Screen 2

The wizard will confirm that the city object is to be added. Click Finish.

Figure 20.25. Entity Data Source Configuration Wizard Screen 3

The city object will be display in the Data Sources panel. If the Data Sources panel is not displayed, select Data, Show Data Sources from the Visual Studio main menu. The docked panel will then be displayed.

Figure 20.26. Data Sources

In the Data Sources panel select the Data Source you just created and drag and drop it onto the Form Designer. By default the Data Source object will be added as a Data Grid View control. Note that the Data Grid View control is bound to the cityBindingSource and the Navigator control is bound to cityBindingNavigator.

Figure 20.27. Data Form Designer

Save and rebuild the solution before continuing.

Double click the form to access its code.

Add code to instatiate the Entity Data Model's EntityContainer object and retrieve data from the database to populate the control.

Figure 20.28. Adding Code to the Form

Save and rebuild the solution.

Run the solution. Ensure the grid is populated and you can navigate the database.

Figure 20.29. The Populated Grid Control

In the Form Designer click on the Save icon in the Form toolbar and ensure that its Enabled property is set to True.

Figure 20.30. Save Button Enabled

Double click the Save icon in the Form toolbar to display its code.

You now need to add code to ensure that data is saved to the database when the save button is click in the application.

Figure 20.31. Adding Save Code to the Form

Once the code has been added, save the solution and rebuild it. Run the application and verify that changes made in the grid are saved.

From the Visual Studio main menu select File, New, Web Site....

From the Visual Studio installed templates select ASP.NET Web Site. Click OK. You will be presented with the Source view of your web page by default.

Click the Design view tab situated underneath the Source view panel.

Figure 20.32. The Design Tab

In the Design view panel, enter some text to decorate the blank web page.

Click on Toolbox. From the list of controls select DropDownList. Drag and drop the control to a location beneath the text on your web page.

Figure 20.33. Drop Down List

From the DropDownList control's context menu, ensure that the Enable AutoPostBack check box is enabled. This will ensure the control's event handler is called when an item is selected. The user's choice will in turn be used to populate the GridView control.

Figure 20.34. Enable AutoPostBack

From the Toolbox select the GridView control.

Figure 20.35. Grid View Control

Drag and drop the Grid Vew control to a location just below the Drop Down List you already placed.

Figure 20.36. Placed Grid Vew Control

At this point it is recommended that you save your solution, and build the solution to ensure that there are no errors.

If you run the solution you will see that the text and drop down list are displayed, but the list is empty. Also, the grid view does not appear at all. Adding this functionality is described in the following sections.

In the Design view panel, double click on any blank area. This brings up the Page_Load method.

Modify the relevant section of code according to the following listing:

...
public partial class _Default : System.Web.UI.Page
{
    worldModel.worldEntities we;

    protected void Page_Load(object sender, EventArgs e)
    {
        we = new worldModel.worldEntities();

        if (!IsPostBack)
        {
            var countryQuery = from c in we.country
                               orderby c.Name
                               select new { c.Code, c.Name };
            DropDownList1.DataValueField = "Code";
            DropDownList1.DataTextField = "Name";
            DropDownList1.DataSource = countryQuery;
            DataBind();
        }
    }
...

Note that the list control only needs to be populated when the page first loads. The conditional code ensures that if the page is subsequently reloaded, the list control is not repopulated, which would cause the user selection to be lost.

Save the solution, build it and run it. You should see the list control has been populated. You can select an item, but as yet the grid view control does not apear.

In the Design view double click on the DropDownList control. This causes its SelectedIndexChanged code to be displayed. This method is called when a user selects an item in the list control and thus fires an AutoPostBack event.

Modify the relevant section of code accordingly to the following listing:

...
    protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        var cityQuery = from c in we.city
                        where c.CountryCode == DropDownList1.SelectedValue
                        orderby c.Name
                        select new { c.Name, c.Population, c.CountryCode };
        GridView1.DataSource = cityQuery;
        DataBind();
    }
...

The grid view control is populated from the result of the LINQ query on the entity data model.

As a check compare your code to that shown in the following screenshot:

Figure 20.37. Source Code

Save, build and run the solution. As you select a country you will see its cities are displayed in the grid view control.

Figure 20.38. The Working Web Site