Главный/Подробный с помощью выбираемого элемента управления GridView для главного представления и элемента управления DetailView для подробного представления (VB)

Скотт Митчелл

Скачать в формате PDF

В этом руководстве будет иметься GridView, строки которого включают имя и цену каждого продукта вместе с кнопкой "Выбрать". Нажатие кнопки "Выбрать" для определенного продукта приведет к отображению полных сведений в элементе управления DetailsView на той же странице.

Введение

В предыдущем руководстве мы узнали, как создать главный или подробный отчет с помощью двух веб-страниц: эталонной веб-страницы, из которой мы отображали список поставщиков, и веб-страницу "подробности", которая перечисляла эти продукты, предоставляемые выбранным поставщиком. Этот формат отчета с двумя страницами можно сжать на одну страницу. В этом руководстве будет иметься GridView, строки которого включают имя и цену каждого продукта вместе с кнопкой "Выбрать". Нажатие кнопки "Выбрать" для определенного продукта приведет к отображению полных сведений в элементе управления DetailsView на той же странице.

Рис. 1. Нажатие кнопки выбора отображает сведения о продукте (щелкните, чтобы просмотреть изображение полного размера)

Шаг 1. Создание элемента GridView с возможностью выбора

Помните, что в двухстраничном отчете главной/подробной информации каждая главная запись включала гиперссылку, которая при щелчке отправляла пользователя на страницу подробных сведений, передавая значение строки, по которой щелкнули, SupplierID в строке запроса. Такая гиперссылка была добавлена в каждую строку GridView с помощью HyperLinkField. Для отчета с одной страницей и подробными сведениями нам потребуется кнопка для каждой строки GridView, которая при щелчке отображает сведения. Элемент управления GridView можно настроить для включения кнопки "Выбрать" для каждой строки, которая вызывает постбэк и помечает эту строку как SelectedRowGridView.

Начните с добавления элемента управления GridView на DetailsBySelecting.aspx страницу в папке, присвойв свойству Filtering значение IDProductsGrid. Затем добавьте новый объект ObjectDataSource с именем AllProductsDataSource , который вызывает ProductsBLL метод класса GetProducts() .

Рис. 2. Создание объекта ObjectDataSource С именем AllProductsDataSource (щелкните, чтобы просмотреть изображение полного размера)

Рис. 3. Использование ProductsBLL класса (щелкните, чтобы просмотреть изображение полного размера)

Рис. 4. Настройка ObjectDataSource для вызова GetProducts() метода (щелкните, чтобы просмотреть изображение полного размера)

Измените поля GridView, удалив все поля, кроме ProductName и UnitPrice BoundFields. Кроме того, вы можете настроить эти BoundFields по мере необходимости, например, отформатировав UnitPrice BoundField как валюту и изменив HeaderText свойства BoundFields. Эти действия можно выполнить графически, щелкнув ссылку "Изменить столбцы" из смарт-тега GridView или вручную настроив декларативный синтаксис.

Рис. 5: Удалите все, кроме полей ProductName и UnitPrice (Щелкните, чтобы просмотреть изображение в полном размере)

Окончательная разметка для GridView выглядит следующим образом:

<asp:GridView ID="ProductsGrid" runat="server"
  AutoGenerateColumns="False" DataKeyNames="ProductID"
    DataSourceID="AllProductsDataSource" EnableViewState="False">
    <Columns>
        <asp:BoundField DataField="ProductName"
         HeaderText="Product" SortExpression="ProductName" />
        <asp:BoundField DataField="UnitPrice"
            DataFormatString="{0:c}" HeaderText="Unit Price"
            HtmlEncode="False" SortExpression="UnitPrice" />
    </Columns>
</asp:GridView>

Затем необходимо пометить GridView как доступный для выбора, который добавит кнопку "Выбрать" в каждую строку. Для этого просто установите флажок "Включить выделение" в смарт-теге GridView.

Рис. 6. Выбор строк GridView (щелкните, чтобы просмотреть изображение полного размера)

Проверка параметра "Включение выбора" добавляет CommandField в ProductsGrid GridView со свойством ShowSelectButton True. Это приводит к нажатию кнопки "Выбрать" для каждой строки GridView, как показано на рисунке 6. По умолчанию, кнопки выбора отображаются как LinkButtons, но вы можете использовать Buttons или ImageButtons вместо этого, используя свойство CommandField ButtonType.

<asp:GridView ID="ProductsGrid" runat="server"
  AutoGenerateColumns="False" DataKeyNames="ProductID"
    DataSourceID="AllProductsDataSource" EnableViewState="False">
    <Columns>
        <asp:CommandField ShowSelectButton="True" />
        <asp:BoundField DataField="ProductName"
          HeaderText="Product" SortExpression="ProductName" />
        <asp:BoundField DataField="UnitPrice"
          DataFormatString="{0:c}" HeaderText="Unit Price"
            HtmlEncode="False" SortExpression="UnitPrice" />
    </Columns>
</asp:GridView>

После нажатия кнопки "Выбрать" строки GridView происходит обратная связь и обновляется свойство GridView SelectedRow . SelectedRow Помимо свойства, GridView предоставляет свойства SelectedIndex, SelectedValue и SelectedDataKey. Свойство SelectedIndex возвращает индекс выбранной строки, а свойства SelectedValue и SelectedDataKey возвращают значения на основе свойства DataKeyNames GridView.

Свойство DataKeyNames используется для связывания одного или нескольких значений полей данных с каждой строкой и обычно используется для уникальной идентификации информации из базовых данных с каждой строкой GridView. Свойство SelectedValue возвращает значение первого DataKeyNames поля данных для выбранной строки, где SelectedDataKey свойство возвращает объект выбранной DataKey строки, который содержит все значения для указанных полей ключа данных для этой строки.

Свойство DataKeyNames автоматически устанавливается для уникально идентифицирующих полей данных при привязке источника данных к GridView, DetailsView или FormView через дизайнер. Хотя это свойство было задано для нас автоматически в предыдущих руководствах, примеры будут работать без указанного DataKeyNames свойства. Однако для выбора GridView в этом руководстве, а также для будущих руководств, в которых мы рассмотрим вставку, обновление и удаление, DataKeyNames свойство должно быть задано правильно. Убедитесь, что для свойства GridView DataKeyNames задано значение ProductID.

Давайте рассмотрим наш прогресс до сих пор через браузер. Обратите внимание, что GridView перечисляет названия и цены всех продуктов вместе с кнопкой "Select". Нажатие кнопки "Выбрать" приводит к постбэку (повторной отправке данных на сервер). На втором шаге мы увидим, как DetailsView отвечает на эту обратную передачу, отображая сведения о выбранном продукте.

Рис. 7. Каждая строка продукта содержит элемент Select LinkButton (щелкните, чтобы просмотреть изображение полного размера)

Выделение выбранной строки

ProductsGrid GridView имеет SelectedRowStyle свойство, которое можно использовать для диктовки визуального стиля выбранной строки. При правильном использовании это может улучшить пользовательский интерфейс, более четко показывая, какая строка GridView в настоящее время выбрана. Давайте в этом руководстве сделаем так, чтобы строка была выделена желтым фоном.

Как и в предыдущих руководствах, давайте стремимся сохранить параметры, связанные с эстетикой, определенные как классы CSS. Поэтому создайте новый класс CSS с Styles.css именем SelectedRowStyle.

.SelectedRowStyle
{
    background-color: Yellow;
}

Чтобы применить этот класс CSS к свойству SelectedRowStyle всех GridView в нашей серии учебников, измените скин GridView.skin в теме DataWebControls, чтобы включить настройки SelectedRowStyle, как показано ниже:

<asp:GridView runat="server" CssClass="DataWebControlStyle">
   <AlternatingRowStyle CssClass="AlternatingRowStyle" />
   <RowStyle CssClass="RowStyle" />
   <HeaderStyle CssClass="HeaderStyle" />
   <SelectedRowStyle CssClass="SelectedRowStyle" />
</asp:GridView>

С этим дополнением выбранная строка GridView теперь выделена желтым цветом фона.

Рис. 8. Настройка внешнего вида выбранной строки с помощью свойства GridView SelectedRowStyle (щелкните, чтобы просмотреть изображение полного размера)

Шаг 2. Отображение сведений о выбранном продукте в DetailsView

ProductsGrid После завершения GridView все, что остается, заключается в добавлении DetailsView, отображающего сведения о выбранном продукте. Добавьте элемент управления DetailsView над GridView и создайте объект ObjectDataSource с именем ProductDetailsDataSource. Поскольку мы хотим, чтобы этот DetailsView отображал конкретную информацию о выбранном продукте, настройте ProductDetailsDataSource для использования метода GetProductByProductID(productID) класса ProductsBLL.

Рис. 9. Вызов ProductsBLL метода класса GetProductByProductID(productID) (щелкните, чтобы просмотреть изображение полного размера)

Значение параметра productID, полученное из свойства SelectedValue элемента управления GridView. Как упоминалось ранее, свойство GridView SelectedValue возвращает первое значение ключа данных для выбранной строки. Поэтому необходимо задать для свойства DataKeyNames элемента GridView значение ProductID, чтобы функция SelectedValue возвращала значение ProductID выбранной строки.

Рис. 10. Задайте параметр свойству productID GridView SelectedValue (щелкните, чтобы просмотреть изображение полного размера)

После того как productDetailsDataSource ObjectDataSource будет правильно настроен и привязан к DetailsView, это руководство считается завершенным. При первом посещении страницы не выбрана строка, поэтому значение свойства GridView SelectedValue — Nothing. Так как нет продуктов со NULLProductID значением, никакие записи не возвращаются методом GetProductByProductID(productID) , что означает, что DetailsView не отображается (см. рис. 11). После нажатия кнопки "Выбрать" строки GridView происходит обратная связь и обновляется DetailsView. На этот раз свойство GridView SelectedValue возвращает ProductID выбранную строку, GetProductByProductID(productID) метод возвращает ProductsDataTable сведения об этом продукте, а DetailsView отображает эти сведения (см. рис. 12).

Рис. 11. При первом посещении отображается только Элемент GridView (щелкните, чтобы просмотреть изображение полного размера)

Рис. 12. При выборе строки отображаются сведения о продукте (щелкните, чтобы просмотреть изображение полного размера)

Итоги

В этом и предыдущих трех руководствах мы рассмотрели ряд методов отображения основных и подробных отчетов. В этом руководстве мы изучили использование выбранного GridView для размещения главных записей и DetailsView для отображения сведений о выбранной главной записи на той же странице. В предыдущих руководствах мы рассмотрели, как отображать отчеты master/details с помощью DropDownLists и отображать основные записи на одной веб-странице и подробные записи на другой.

В этом руководстве мы завершаем изучение основных и подробных отчетов. Начиная со следующего руководства мы начнем изучение настраиваемого форматирования с помощью GridView, DetailsView и FormView. Мы посмотрим, как настроить внешний вид этих элементов управления на основе данных, привязанных к ним, как суммировать данные в нижнем колонтитуле GridView и как использовать шаблоны для получения большей степени контроля над макетом.

Счастливое программирование!

Об авторе

Скотт Митчелл, автор семи книг ASP/ASP.NET и основатель 4GuysFromRolla.com, работает с технологиями Microsoft Web с 1998 года. Скотт работает независимым консультантом, тренером и писателем. Его последняя книга Sams обучает ASP.NET 2.0 за 24 часа. С ним можно связаться по адресу mitchell@4GuysFromRolla.com.

Особое спасибо кому

Эта серия учебников была проверена многими полезными рецензентами. Ведущий рецензент этого руководства — Хилтон Гизенау. Хотите просмотреть мои предстоящие статьи MSDN? Если да, напишите мне на mitchell@4GuysFromRolla.com.