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

по Скотт Митчеллby Scott Mitchell

Скачивание примера приложения или Загрузка PDF-файлаDownload Sample App or Download PDF

В этом учебнике есть элемент управления GridView, чьи строки содержат имя и цену каждого продукта вместе с кнопкой выбора.This tutorial will have a GridView whose rows include the name and price of each product along with a Select button. Нажатие кнопки выбрать для конкретного продукта приведет к тому, что все его полные сведения будут отображаться в элементе управления DetailsView на той же странице.Clicking the Select button for a particular product will cause its full details to be displayed in a DetailsView control on the same page.

ВведениеIntroduction

В предыдущем учебном курсе было показано, как создать отчет «основной/подробности» с помощью двух веб-страниц: «главной» веб-страницы, из которой был отображен список поставщиков. и веб-страницу "сведения", в которой перечислены продукты, предоставляемые выбранным поставщиком.In the previous tutorial we saw how to create a master/detail report using two web pages: a "master" web page, from which we displayed the list of suppliers; and a "details" web page that listed those products provided by the selected supplier. Этот формат отчета с двумя страницами можно сжать на одну страницу.This two page report format can be condensed into one page. В этом учебнике есть элемент управления GridView, чьи строки содержат имя и цену каждого продукта вместе с кнопкой выбора.This tutorial will have a GridView whose rows include the name and price of each product along with a Select button. Нажатие кнопки выбрать для конкретного продукта приведет к тому, что все его полные сведения будут отображаться в элементе управления DetailsView на той же странице.Clicking the Select button for a particular product will cause its full details to be displayed in a DetailsView control on the same page.

нажатии кнопки выбрать отображает сведения о продукте.Clicking the Select Button Displays the Product's Details

Рис. 1. нажатие кнопки "выбрать" отображает сведения о продукте (щелкните, чтобы просмотреть изображение с полным размером)Figure 1: Clicking the Select Button Displays the Product's Details (Click to view full-size image)

Шаг 1. Создание выбираемого элемента управления GridViewStep 1: Creating a Selectable GridView

Вспомним, что в двух-страничном отчете «основной/подробности» каждая Главная запись включала гиперссылку, которая при щелчке отправляет пользователю на страницу сведений, передавая SupplierID значение нажатой строки в строке запроса.Recall that in the two-page master/detail report that each master record included a hyperlink that, when clicked, sent the user to the details page passing the clicked row's SupplierID value in the querystring. Такая гиперссылка была добавлена в каждую строку GridView с помощью HyperLinkField.Such a hyperlink was added to each GridView row using a HyperLinkField. Для одностраничного отчета «основной/подробности» требуется кнопка для каждой строки GridView, при нажатии которой отображаются подробные сведения.For the single page master/details report, we will need a Button for each GridView row that, when clicked, shows the details. Элемент управления GridView можно настроить для включения кнопки выбора для каждой строки, которая вызывает обратную передачу, и помечает эту строку как СелектедровGridView.The GridView control can be configured to include a Select button for each row that causes a postback and marks that row as the GridView's SelectedRow.

Для начала добавьте элемент управления GridView на страницу DetailsBySelecting.aspx в папке Filtering, установив для свойства ID значение ProductsGrid.Start by adding a GridView control to the DetailsBySelecting.aspx page in the Filtering folder, setting its ID property to ProductsGrid. Затем добавьте новый элемент управления ObjectDataSource с именем AllProductsDataSource, который вызывает метод GetProducts() класса ProductsBLL.Next, add a new ObjectDataSource named AllProductsDataSource that invokes the ProductsBLL class's GetProducts() method.

создать элемент управления ObjectDataSource с именем АллпродуктсдатасаурцеCreate an ObjectDataSource Named AllProductsDataSource

Рис. 2. Создание элемента управления ObjectDataSource с именем AllProductsDataSource (щелкните, чтобы просмотреть изображение с полным размером)Figure 2: Create an ObjectDataSource Named AllProductsDataSource (Click to view full-size image)

использования класса ProductsBLLUse the ProductsBLL Class

Рис. 3. использование класса ProductsBLL (щелкните, чтобы просмотреть изображение с полным размером)Figure 3: Use the ProductsBLL Class (Click to view full-size image)

настроить ObjectDataSource для вызова метода Products ()Configure the ObjectDataSource to Invoke the GetProducts() Method

Рис. 4. Настройка ObjectDataSource для вызова метода GetProducts() (щелкните, чтобы просмотреть изображение с полным размером)Figure 4: Configure the ObjectDataSource to Invoke the GetProducts() Method (Click to view full-size image)

Измените поля GridView, удалив все, кроме ProductName и UnitPrice BoundFields.Edit the GridView's fields removing all but the ProductName and UnitPrice BoundFields. Кроме того, вы можете настроить эти BoundFields по мере необходимости, например форматирование UnitPrice BoundField в виде валюты и изменение свойств HeaderText BoundFields.Also, feel free to customize these BoundFields as needed, such as formatting the UnitPrice BoundField as a currency and changing the HeaderText properties of the BoundFields. Эти действия можно выполнить графически, щелкнув ссылку Edit Columns (изменить столбцы) в смарт-теге GridView или настроив декларативный синтаксис вручную.These steps can be accomplished graphically, by clicking the Edit Columns link from the GridView's smart tag, or by manually configuring the declarative syntax.

удалить все BoundFields, кроме ProductName и UnitPriceRemove All But the ProductName and UnitPrice BoundFields

Рис. 5. удаление всех ProductName и UnitPrice BoundFields (щелкните, чтобы просмотреть изображение с полным размером)Figure 5: Remove All But the ProductName and UnitPrice BoundFields (Click to view full-size image)

Последняя разметка для GridView:The final markup for the GridView is:

<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 как выбираемое, что приведет к добавлению кнопки выбрать в каждую строку.Next, we need to mark the GridView as selectable, which will add a Select button to each row. Чтобы сделать это, просто установите флажок Включить выбор в смарт-теге GridView.To accomplish this, simply check the Enable Selection checkbox in the GridView's smart tag.

сделать строки GridView выбираемымиMake the GridView's Rows Selectable

Рис. 6. обеспечение выбора строк GridView (щелкните, чтобы просмотреть изображение с полным размером)Figure 6: Make the GridView's Rows Selectable (Click to view full-size image)

При проверке параметра "Включение выбора" в ProductsGrid GridView добавляется элемент CommandField со свойством ShowSelectButton, установленным в значение true.Checking the Enabling Selection option adds a CommandField to the ProductsGrid GridView with its ShowSelectButton property set to True. Это приводит к нажатию кнопки SELECT для каждой строки GridView, как показано на рис. 6.This results in a Select button for each row of the GridView, as Figure 6 illustrates. По умолчанию кнопки выбора отображаются как LinkButton, но вместо этого можно использовать кнопки или Имажебуттонс в свойстве ButtonType CommandField.By default, the Select buttons are rendered as LinkButtons, but you can use Buttons or ImageButtons instead through the CommandField's ButtonType property.

<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 происходит обратная передача, и свойство SelectedRow GridView обновляется.When a GridView row's Select button is clicked a postback ensues and the GridView's SelectedRow property is updated. В дополнение к свойству SelectedRow GridView предоставляет свойства SelectedIndex, SelectedValueи селектеддатакэй .In addition to the SelectedRow property, the GridView provides the SelectedIndex, SelectedValue, and SelectedDataKey properties. Свойство SelectedIndex возвращает индекс выбранной строки, тогда как свойства SelectedValue и SelectedDataKey возвращают значения, основанные на свойстве DataKeyNamesэлемента GridView.The SelectedIndex property returns the index of the selected row, whereas the SelectedValue and SelectedDataKey properties return values based upon the GridView's DataKeyNames property.

Свойство DataKeyNames используется для связывания одного или нескольких значений полей данных с каждой строкой и обычно используется для уникальной идентификации сведений из базовых данных в каждой строке GridView.The DataKeyNames property is used to associate one or more data field values with each row and is commonly used to attribute uniquely identifying information from the underlying data with each GridView row. Свойство SelectedValue возвращает значение первого DataKeyNames поля данных для выбранной строки, где, как свойство SelectedDataKey возвращает объект DataKey выбранной строки, который содержит все значения для указанных полей ключа данных для этой строки.The SelectedValue property returns the value of the first DataKeyNames data field for the selected row where as the SelectedDataKey property returns the selected row's DataKey object, which contains all of the values for the specified data key fields for that row.

При привязке источника данных к GridView, DetailsView или FormView в конструкторе свойству DataKeyNames автоматически присваивается однозначно идентифицирующее поле данных.The DataKeyNames property is automatically set to the uniquely-identifying data field(s) when you bind a data source to a GridView, DetailsView, or FormView through the Designer. Хотя это свойство было задано автоматически в предыдущих учебных курсах, примеры работали бы без указанного свойства DataKeyNames.While this property has been set for us automatically in the preceding tutorials, the examples would have worked without the DataKeyNames property specified. Однако для элемента управления GridView в этом учебнике, а также для будущих руководств, в которых мы будем изучать вставку, обновление и удаление, необходимо правильно задать свойство DataKeyNames.However, for the selectable GridView in this tutorial, as well as for future tutorials in which we'll be examining inserting, updating, and deleting, the DataKeyNames property must be set properly. Подождите, что свойство DataKeyNames GridView имеет значение ProductID.Take a moment to ensure that your GridView's DataKeyNames property is set to ProductID.

Давайте проверим наш ход работы через браузер.Let's view our progress thus far through a browser. Обратите внимание, что в элементе управления GridView указаны имя и цена для всех продуктов, а также выбрана LinkButton.Note that the GridView lists the name and price for all of the products along with a Select LinkButton. Нажатие кнопки выбрать приводит к выполнению обратной передачи.Clicking the Select button causes a postback. На этапе 2 мы посмотрим, как элемент DetailsView будет отвечать на эту обратную передачу, отображая сведения о выбранном продукте.In Step 2 we'll see how to have a DetailsView respond to this postback by displaying the details for the selected product.

каждая строка продукта содержит SELECT LinkButtonEach Product Row Contains a Select LinkButton

Рис. 7. Каждая строка продукта содержит команду LinkButton (щелкните, чтобы просмотреть изображение с полным размером).Figure 7: Each Product Row Contains a Select LinkButton (Click to view full-size image)

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

ProductsGrid GridView имеет свойство SelectedRowStyle, которое можно использовать для диктовки визуального стиля для выбранной строки.The ProductsGrid GridView has a SelectedRowStyle property that can be used to dictate the visual style for the selected row. Это может повысить эффективность работы пользователя. Это позволяет более точно показать, какая строка GridView выбрана в данный момент.Used properly, this can improve the user's experience by more clearly showing which row of the GridView is currently selected. В этом руководстве мы добавим выделенную строку желтым фоном.For this tutorial, let's have the selected row be highlighted with a yellow background.

Как и в предыдущих учебных курсах, мы стремимся к тому, чтобы параметры, связанные с Aesthetic, определялись как классы CSS.As with our earlier tutorials, let's strive to keep the aesthetic-related settings defined as CSS classes. Поэтому создайте новый класс CSS в Styles.css с именем SelectedRowStyle.Therefore, create a new CSS class in Styles.css named SelectedRowStyle.

.SelectedRowStyle
{
    background-color: Yellow;
}

Чтобы применить этот класс CSS к свойству SelectedRowStyle всех элементов управления GridView в серии руководств, измените обложку GridView.skin в теме DataWebControls, чтобы включить параметры SelectedRowStyle, как показано ниже.To apply this CSS class to the SelectedRowStyle property of all GridViews in our tutorial series, edit the GridView.skin Skin in the DataWebControls Theme to include the SelectedRowStyle settings as shown below:

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

С этим добавлением выбранная строка GridView теперь выделяется желтым цветом фона.With this addition, the selected GridView row is now highlighted with a yellow background color.

настроить внешний вид выбранной строки с помощью свойства Селектедровстиле GridViewCustomize the Selected Row's Appearance Using the GridView's SelectedRowStyle Property

Рис. 8. Настройка внешнего вида выбранной строки с помощью свойства SelectedRowStyle GridView (щелкните, чтобы просмотреть изображение с полным размером)Figure 8: Customize the Selected Row's Appearance Using the GridView's SelectedRowStyle Property (Click to view full-size image)

Шаг 2. Отображение сведений о выбранном продукте в элементе DetailsViewStep 2: Displaying the Selected Product's Details in a DetailsView

По завершении ProductsGrid GridView остается только добавить DetailsView, отображающий сведения о конкретном выбранном продукте.With the ProductsGrid GridView complete, all that remains is to add a DetailsView that displays information about the particular product selected. Добавьте элемент управления DetailsView над элементом GridView и создайте новый объект ObjectDataSource с именем ProductDetailsDataSource.Add a DetailsView control above the GridView and create a new ObjectDataSource named ProductDetailsDataSource. Так как мы хотим, чтобы эта DetailsView отображала определенную информацию о выбранном продукте, настройте ProductDetailsDataSource для использования метода GetProductByProductID(productID) класса ProductsBLL.Since we want this DetailsView to display particular information about the selected product, configure the ProductDetailsDataSource to use the ProductsBLL class's GetProductByProductID(productID) method.

вызвать метод Жетпродуктбипродуктид (productID) класса ProductsBLLInvoke the ProductsBLL Class's GetProductByProductID(productID) Method

Рис. 9. вызов метода GetProductByProductID(productID) класса ProductsBLL (щелкните, чтобы просмотреть изображение с полным размером)Figure 9: Invoke the ProductsBLL Class's GetProductByProductID(productID) Method (Click to view full-size image)

Получите значение productID параметра, полученное из свойства SelectedValue элемента управления GridView.Have the productID parameter's value obtained from the GridView control's SelectedValue property. Как мы обсуждали ранее, свойство SelectedValue GridView возвращает первое значение ключа данных для выбранной строки.As we discussed earlier, the GridView's SelectedValue property returns the first data key value for the selected row. Поэтому крайне важно, чтобы свойство DataKeyNames GridView было установлено в значение ProductID, чтобы возвращаемое значение ProductID строки возвращалось SelectedValue.Therefore, it's imperative that the GridView's DataKeyNames property is set to ProductID, so that the selected row's ProductID value is returned by SelectedValue.

задать параметр productID для свойства SelectedValue GridViewSet the productID Parameter to the GridView's SelectedValue Property

Рис. 10. установка параметра productID для свойства SelectedValue GridView (щелкните, чтобы просмотреть изображение с полным размером)Figure 10: Set the productID Parameter to the GridView's SelectedValue Property (Click to view full-size image)

После того как productDetailsDataSource ObjectDataSource правильно настроен и привязан к элементу DetailsView, этот учебник завершен.Once the productDetailsDataSource ObjectDataSource has been configured correctly and bound to the DetailsView, this tutorial is complete! При первом посещении страницы не выбрана ни одна строка, поэтому свойство SelectedValue GridView возвращает null.When the page is first visited no row is selected, so the GridView's SelectedValue property returns null. Поскольку нет продуктов со значением NULL ProductID, метод GetProductByProductID(productID) не возвращает никаких записей, что означает, что элемент DetailsView не отображается (см. рис. 11).Since there are no products with a NULL ProductID value, no records are returned by the GetProductByProductID(productID) method, meaning that the DetailsView isn't displayed (see Figure 11). При нажатии кнопки выбора строки GridView происходит обратная передача и обновляется элемент DetailsView.Upon clicking a GridView row's Select button, a postback ensues and the DetailsView is refreshed. В этот раз SelectedValue свойство GridView возвращает ProductID выбранной строки, метод GetProductByProductID(productID) возвращает ProductsDataTable со сведениями об этом конкретном продукте, а DetailsView показывает эти сведения (см. рис. 12).This time the GridView's SelectedValue property returns the ProductID of the selected row, the GetProductByProductID(productID) method returns a ProductsDataTable with information about that particular product, and the DetailsView shows these details (see Figure 12).

при первом посещении отображается только GridViewWhen First Visited, Only the GridView is Displayed

Рис. 11. при первом посещении отображается только GridView (щелкните, чтобы просмотреть изображение с полным размером)Figure 11: When First Visited, Only the GridView is Displayed (Click to view full-size image)

после выбора строки отображаются сведения о продуктеUpon Selecting a Row, the Product's Details are Displayed

Рис. 12. при выборе строки отображаются сведения о продукте (щелкните, чтобы просмотреть изображение с полным размером).Figure 12: Upon Selecting a Row, the Product's Details are Displayed (Click to view full-size image)

СводкаSummary

В этом и предыдущих трех руководствах мы видели ряд методов отображения отчетов «основной/подробности».In this and the preceding three tutorials we've seen a number of techniques for displaying master/detail reports. В этом учебнике мы рассмотрели использование выбранного элемента управления GridView для размещения основных записей и DetailsView, чтобы отобразить сведения о выбранной главной записи на той же странице.In this tutorial we examined using a selectable GridView to house the master records and a DetailsView to display details about the selected master record on the same page. В предыдущих руководствах мы рассмотрели, как отображать отчеты "основной/подробности" с помощью элементов управления DropDownList и отображать главные записи на одной веб-странице и в подробных записях на другом.In the earlier tutorials we looked at how to display master/details reports using DropDownLists and displaying master records on one web page and detail records on another.

Этот учебник завершает изучение отчетов «основной/подробности».This tutorial concludes our examination of master/detail reports. Начиная с следующего учебника мы начнем исследование настраиваемого форматирования с помощью GridView, DetailsView и FormView.Starting with the next tutorial we'll begin our exploration of customized formatting with the GridView, DetailsView, and FormView. Мы посмотрим, как настроить внешний вид этих элементов управления на основе привязанных к ним данных, как суммировать данные в нижнем колонтитуле GridView и как использовать шаблоны для получения более высокого уровня контроля над макетом.We'll see how to customize the appearance of these controls based on the data bound to them, how to summarize data in the GridView's footer, and how to use templates to obtain a greater degree of control over the layout.

Поздравляем с программированием!Happy Programming!

Об автореAbout the Author

Скотт Митчелл, автор семи книг по ASP/ASP. NET и основатель 4GuysFromRolla.com, работал с веб-технологиями Майкрософт с 1998.Scott Mitchell, author of seven ASP/ASP.NET books and founder of 4GuysFromRolla.com, has been working with Microsoft Web technologies since 1998. Скотт работает как независимый консультант, преподаватель и модуль записи.Scott works as an independent consultant, trainer, and writer. Его последняя книга — Sams обучать себя ASP.NET 2,0 за 24 часа.His latest book is Sams Teach Yourself ASP.NET 2.0 in 24 Hours. Он доступен по адресу mitchell@4GuysFromRolla.com.He can be reached at mitchell@4GuysFromRolla.com. или через его блог, который можно найти по адресу http://ScottOnWriting.NET.or via his blog, which can be found at http://ScottOnWriting.NET.

Специальная благодарностьSpecial Thanks To

Эта серия руководств была рассмотрена многими полезными рецензентами.This tutorial series was reviewed by many helpful reviewers. Специалист по интересу для этого руководства был Хилтон Гизнау.Lead reviewer for this tutorial was Hilton Giesenow. Хотите ознакомиться с моими будущими статьями MSDN?Interested in reviewing my upcoming MSDN articles? Если это так, расположите строку в mitchell@4GuysFromRolla.com.If so, drop me a line at mitchell@4GuysFromRolla.com.