Отчет "Основной/подробности" с помощью элемента управления GridView с возможностью выбора для основной информации и элемента управления DetailView для подробных сведений (C#)

Статья
07/16/2024

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

Введение

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

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

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

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

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

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

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

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

Измените поля GridView, удаляя все поля, UnitPrice кроме ProductName 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. По умолчанию кнопки select отображаются как LinkButtons, но вместо этого можно использовать кнопки или 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 LinkButton. Нажатие кнопки "Выбрать" приводит к обратной отправке. На шаге 2 мы посмотрим, как получить ответ DetailsView на эту обратную передачу, отображая сведения о выбранном продукте.

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

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

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

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

.SelectedRowStyle
{
    background-color: Yellow;
}

Чтобы применить этот класс CSS к свойству всех GridViews в серии учебников, измените GridView.skin кожу в DataWebControls теме, чтобы включить SelectedRowStyle параметры, как 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 ProductsBLL метод класса GetProductByProductID(productID) .

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

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

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

После правильной productDetailsDataSource настройки ObjectDataSource и привязки к DetailsView это руководство будет завершено. При первом посещении страницы не выбрана строка, поэтому свойство GridView SelectedValue возвращается null. Так как нет продуктов со NULL ProductID значением, никакие записи не возвращаются методом 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 года. Скотт работает независимым консультантом, тренером и писателем. Его последняя книга Сэмс Учит себя ASP.NET 2.0 в 24 часах. Он может быть достигнут в mitchell@4GuysFromRolla.com. или через его блог, который можно найти на http://ScottOnWriting.NET.

Особое спасибо

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

Назад Далее

Поделиться через