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.48. 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.49. 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.50. Enable AutoPostBack

From the Toolbox select the GridView control.

Figure 20.51. Grid View Control

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

Figure 20.52. 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.53. 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.54. The Working Web Site