从 Visual Studio 主菜单中选择文件、 新建，然后选择网站。

从 Visual Studio 安装的模板中选择 ASP.NET 网站。单击 确定。默认情况下，您将看到网页的源代码视图。

单击位于源视图面板下方的设计视图选项卡。

在“设计”视图面板中，输入一些文本来装饰空白网页。

单击工具箱。从控件列表中，选择DropDownList。将控件拖放到网页文本下方的某个位置。

从DropDownList控件上下文菜单中，确保启用 Enable AutoPostBack复选框。这将确保在选择项目时调用控件的事件处理程序。用户的选择将依次用于填充GridView控件。

从工具箱中选择GridView 控件。将GridView控件拖放到您已放置的下拉列表正下方的位置。

下图显示了“设计”视图选项卡中装饰文本和两个控件的示例。添加的 GridView 控件生成了一个包含三列（Column0、 Column1和Column3）的网格以及网格每个单元格中的字符串abc。

图 4.18 放置的 GridView 控件

此时建议您保存您的解决方案，并构建解决方案以确保没有错误。

如果运行该解决方案，您将看到显示了文本和下拉列表，但列表是空的。此外，网格视图根本不会出现。添加此功能将在以下部分中介绍。

在“设计”视图面板中，双击任何空白区域。这提出了Page_Load方法。

根据以下清单示例修改相关代码段。

...
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.ToList();
            DataBind();
        }
    }
...

列表控件只需要在页面首次加载时填充。条件代码可确保如果随后重新加载页面，则不会重新填充列表控件，否则会导致用户选择丢失。

保存解决方案，构建并运行它。您应该看到列表控件已被填充。您可以选择一个项目，但 GridView 控件尚未出现。

在设计视图中，双击 DropDownList控件。此操作会导致SelectedIndexChanged显示其代码。当用户选择列表控件中的项目并因此生成 AutoPostBack 事件时调用此方法。

根据以下清单示例相应地修改代码的相关部分。

...
    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();
    }
...

网格视图控件是根据实体数据模型上的 LINQ 查询结果填充的。

保存、生成并运行解决方案。当您选择一个国家/地区时，您会看到它的城市显示在 GridView 控件中。下图显示了从列表框中选择的比利时和一个包含三列的表格：Name、 Population和 CountryCode。

图 4.19 工作网站