В главном меню Visual Studio выберите Файл, Новый, а затем Веб-сайт.

Из установленных шаблонов Visual Studio выберите Веб-сайт ASP.NET. Нажмите ОК. По умолчанию вы увидите исходный вид вашей веб-страницы.

Переключитесь на вкладку «Вид» под панелью «Исходный код».

В панели «Вид» введите текст для оформления пустой веб-страницы.

Нажмите на Панель инструментов. Из списка элементов управления выберите DropDownList. Перетащите элемент управления в место под текстом на вашей веб-странице.

В контекстном меню элемента управления DropDownList убедитесь, что установлен флажок Включить автоматическое обратное событие. Это гарантирует, что обработчик событий элемента управления вызывается при выборе элемента. Выбор пользователя, в свою очередь, будет использоваться для заполнения элемента управления GridView.

Из панели инструментов выберите элемент управления GridView. Перетащите элемент управления GridView в место под уже размещенным раскрывающимся списком.

На рисунке ниже показан пример декоративного текста и двух элементов управления на вкладке «Вид». Добавленный элемент управления GridView создал таблицу с тремя столбцами (Column0, Column1 и Column3), и строка abc отображается в каждой ячейке таблицы.

Рисунок 6.18 Размещенный элемент управления GridView

На этом этапе рекомендуется сохранить решение и выполнить сборку, чтобы убедиться в отсутствии ошибок.

Если вы запустите решение, вы увидите, что отображаются текст и раскрывающийся список, но список пуст. Также элемент управления 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();
    }
...

Элемент управления GridView заполняется результатом запроса LINQ к модели данных сущностей.

Сохраните, выполните сборку и запустите решение. При выборе страны вы увидите, что ее города отображаются в элементе управления GridView. На рисунке ниже показана выбранная Бельгия из раскрывающегося списка и таблица с тремя столбцами: Name, Population и CountryCode.

Рисунок 6.19 Рабочий веб-сайт