Разрешение сортировки и перелистывания

Элемент управления GridView можно легко настроить для сортировки (по ссылке на имя столбца] и перелистывания страниц (по номеру или гиперссылке на следующую/предыдущую страницу). Для этого нужно активизировать встроенный редактор элемента и отметить соответствующие пункты меню (рис. 23.26).

Когда вы откроете страницу снова, вы сможете отсортировать отображаемые данные с помощью щелчка на имени соответствующего столбца и листать данные с помощью ссылок на номера страниц (конечно, при условии, что для этого достаточно записей в таблице Inventory).

Рис. 23.26. Разрешение перелистывания и сортировки страниц

Разрешение редактирования на месте

Заключительным штрихом оформления этой страницы будет поддержка элементом управления GridView редактирования данных. Для этого откройте встроенный редактор для SqlDataSource и выберите Configure Data Source. Пропустите первые два окна этого мастера, а на шаге 3 щелкните на кнопке Advanced и отметьте первый вариант настройки (рис. 23.27).

Рис. 23.27. Автоматическое генерирование SQL-операторов

Если теперь рассмотреть HTML-определение элемента управления, то вы увидите, что для SqlDataSource определены DeleteCommand, InsertCommand и UpdateCommand (с помощью параметризованных запросов).

‹asp:SqlDataSource ID="CarsDataSource" runat="server" ConnectionString="Data Source=localhost;Initial Catalog=Cars;Integrated Security=True"  ProviderName="System.Data.SqlClient"SelectCommand="SELECT * FROM [Inventory]" DeleteCommand="DELETE FROM [Inventory] WHERE [CarID] = @original_CarID" InsertCommand="INSERT INTO [inventory] ([CarID], [Make], [Color], [PetName]) VALUES (@CarID, @Make, @Color, @PetName)" UpdateCommand="UPDATE [Inventory] SET [Make] = @Make, [Color] = @Color, [PetName]=@PetName WHERE [CarID]=@original_CarID"›

…

‹/asp:SqlDataSource›

Также будет присутствовать компонент SqlDataSource, который обеспечит дополнительную разметку, определяющую объекты параметров для параметризованных запросов.

‹DeleteParameters›

 ‹asp:Parameter Name="original_CarID" Type="Int32" /›

‹/DeleteParameters›

‹UpdateParameters›

 ‹asp:Parameter Name="Make" Type="String" /›

 ‹asp:Parameter Name="Color" Type="String" /›

 ‹asp:Parameter Name="PetName" Type="String" /›

 ‹asp:Parameter Name="original_CarID" Type="Int32" /›

‹/UpdateParameters›

‹InsertParameters›

 ‹asp:Parameter Name="CarID" Type="Int32" /›

 ‹asp:Parameter Name="Make" Type="String" /›

 ‹asp:Parameter Name="Color" Type="String" /›

 ‹asp:Parameter Name="PetName" Type="String" /›

‹/InsertParameters›

Заключительным шагом является разрешение поддержки редактирования и удаления данных с помощью встроенного редактора GridView (рис. 23.28).

Рис. 23.28. Разрешение поддержки редактирования и удаления данных

Достаточно очевидно, что при новом обращении к странице Inventorу.aspx вы сможете редактировать и удалять записи (рис. 23.29).

Рис. 23.29. Таблица всех таблиц

Создание страницы BuildCar

Последним нашим заданием в этом примере будет создание страницы BuildCar.aspx. Добавьте ее в свой проект (выбрав Web Site→Add Content Page из меню). Эта страница будет содержать Web-элемент управления Wizard ASP.NET 2.0, который обеспечит простой способ прохождения конечного пользователя через серию связанных шагов. Здесь соответствующие шаги будут имитировать выбор покупателем автомобили с нужными ему характеристиками.

Поместите в область содержимого информирующую надпись и элемент управления Wizard. Затем активизируйте встроенный редактор для Wizard и щелкните на ссылке Add/Remove WizardSteps (Добавить или удалить шаги мастера). Добавьте четыре шага, как показано на рис. 23.30.

После определения этих шагов вы увидите, что Wizard определяет области с пустым содержимым, куда вы можете перетащить элементы управления, необходимые для выбранного в настоящий момент шага.

Рис. 23.30. Конфигурация шагов Wizard

В нашем случае добавьте для шагов следующие элементы пользовательского интерфейса (не забудьте указать соответствующее значение ID для каждого элемента, используя окно свойств).

• Выберите модель: элемент управления TextBox

• Выберите цвет: элемент управления ListBox

• Укажите название: элемент управления TextBox

• Укажите дату доставки: элемент управления Calendar

Элемент управления ListBox является единственным элементом интерфейса Wizard, требующим дополнительной настройки. Выберите этот элемент в окне проектирования (убедившись, что перед этим вы выбрали ссылку Выберите цвет) и укажите для элемента набор цветов с помощью свойства Items в окне свойств. После этого в контексте определения Wizard вы обнаружите разметку, похожую на следующую.

‹asp:ListBox ID="ListBoxColors" runat="server" Width="237px"›

 ‹asp:ListItem›пурпурный‹/asp:ListItem›

 ‹asp:ListItem›зеленый‹/asp:ListItem›

 ‹asp:ListItem›красный‹/asp:ListItem›

 ‹asp:ListItem›желтый‹/asp:ListItem›

 ‹asp:ListItem›светло-зеленый‹/asp:ListItem›

 ‹asp:ListItem›черный‹/asp:ListItem›

 ‹asp:ListItem›лимонный‹/asp:ListItem›

‹/asp:ListBox›

После определения каждого из шагов вы можете обработать событие FinishButtonClick для автоматически генерируемой кнопки Finish (Готово). В серверном обработчике события получите параметры выделения от каждого элемента интерфейса и постройте строку описания, которая будет назначена свойству Text дополнительного типа Label с именем lblOrder.

protected void carWizard_FinishButtonClick(object sender, WizardNavigationEventArgs e) {

 // Получение значений.

 string order = string.Format("{0}, ваш {1} {2}, будет доставлен {3}.",

  txt.CarPetName.Text,

  ListBoxColors.SelectedValue,

  txtCarModel.Text,

  carCaLendar.SelectedDate.ToShortDateString());

 // Присваивание значения надписи.

 lblOrder.Text = order;

}

Итак, ваш узел AspNetCarSite готов. На рис. 23.31 показан элемент Wizard в действии.

Рис. 23.31. Wizard в действии

На этом завершается наш обзор Web-элементов управления. Не сомневайтесь. что имеется очень много других элементов, которые здесь охвачены не были, Однако теперь вы должны чувствовать себя довольно уверенно при использовании основных приемов данной модели программирования. А в завершение этой главы мы рассмотрим элементы управления, связанные с контролем вводимых данных.

Исходный код. Файлы AspNetCarsSite размещены в подкаталоге, соответствующем главе 23.