使用带有详细信息 DetailView 的可选母版 GridView 来实现母版/详细信息查看 (C#)

作者 :Scott Mitchell

下载 PDF

本教程将有一个 GridView,其行包含每个产品的名称和价格以及“选择”按钮。 单击特定产品的“选择”按钮将导致其完整详细信息显示在同一页上的 DetailsView 控件中。

简介

上一教程中 ,我们了解了如何使用两个网页创建大纲/详细信息报表:“母版”网页,其中显示了供应商列表;以及列出所选供应商提供的这些产品的“详细信息”网页。 这两页报表格式可以压缩为一页。 本教程将有一个 GridView,其行包含每个产品的名称和价格以及“选择”按钮。 单击特定产品的“选择”按钮将导致其完整详细信息显示在同一页上的 DetailsView 控件中。

单击“选择”按钮显示产品的详细信息

图 1:单击“选择”按钮显示产品的详细信息 (单击以查看全尺寸图像)

步骤 1:创建可选 GridView

回想一下,在两页母版/详细信息报表中,每个主记录都包含一个超链接,单击该超链接时,会将用户发送到详细信息页,并在 querystring 中传递单击的行 SupplierID 的值。 使用 HyperLinkField 将此类超链接添加到每个 GridView 行。 对于单页母版/详细信息报表,我们需要每个 GridView 行的按钮,单击该按钮时会显示详细信息。 GridView 控件可以配置为包含导致回发的每一行的“选择”按钮,并将该行标记为 GridView 的 SelectedRow

首先,将 GridView 控件添加到 文件夹中的页面DetailsBySelecting.aspxFiltering,并将其 ID 属性设置为 ProductsGrid。 接下来,添加一个名为 AllProductsDataSource 的新 ObjectDataSource,用于 ProductsBLL 调用类的 GetProducts() 方法。

创建名为 AllProductsDataSource 的 ObjectDataSource

图 2:创建名为 AllProductsDataSource 的 ObjectDataSource (单击以查看全尺寸图像)

使用 ProductsBLL 类

图 3:使用 ProductsBLL 类 (单击查看全尺寸图像)

配置 ObjectDataSource 以调用 GetProducts () 方法

图 4:配置 ObjectDataSource 以调用 GetProducts() 方法 (单击以查看全尺寸图像)

编辑 GridView 的字段,删除除 和 UnitPrice BoundFields 之外ProductName的所有字段。 此外,可以根据需要随意自定义这些 BoundField,例如将 UnitPrice BoundField 格式化为货币,以及更改 HeaderText BoundFields 的属性。 可以通过单击 GridView 智能标记中的“编辑列”链接或手动配置声明性语法,以图形方式完成这些步骤。

删除除 ProductName 和 UnitPrice 边界字段之外的所有

图 5:删除除 和 UnitPrice BoundFields 之外ProductName的所有 (单击以查看全尺寸图像)

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 的智能标记中的“启用选择”复选框。

使 GridView 的行可选择

图 6:使 GridView 的行可选择 (单击以查看全尺寸图像)

选中“启用选择”选项会将 CommandField 添加到 ProductsGrid GridView,其 ShowSelectButton 属性设置为 True。 这会导致 GridView 的每一行出现“选择”按钮,如图 6 所示。 默认情况下,“选择”按钮呈现为 LinkButtons,但你可以通过 CommandField 的 ButtonType 属性改用 Buttons 或 ImageButtons。

<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 还提供 SelectedIndexSelectedValueSelectedDataKey 属性。 属性 SelectedIndex 返回所选行的索引,而 SelectedValueSelectedDataKey 属性基于 GridView 的 DataKeyNames 属性返回值。

属性 DataKeyNames 用于将一个或多个数据字段值与每行相关联,并且通常用于将基础数据中的唯一标识信息与每个 GridView 行相关联。 属性 SelectedValue 返回所选行的第一个 DataKeyNames 数据字段的值,其中作为 SelectedDataKey 属性返回所选行的 DataKey 对象,该对象包含该行的指定数据键字段的所有值。

DataKeyNames通过Designer将数据源绑定到 GridView、DetailsView 或 FormView 时,属性会自动设置为唯一标识的数据字段 () 。 虽然在前面的教程中已自动为我们设置了此属性,但示例在没有指定 属性的情况下 DataKeyNames 会起作用。 但是,对于本教程中的可选 GridView,以及我们将检查插入、更新和删除的将来教程, DataKeyNames 必须正确设置 属性。 请花点时间确保 GridView 的 DataKeyNames 属性设置为 ProductID

让我们通过浏览器查看到目前为止的进度。 请注意,GridView 列出了所有产品的名称和价格以及 Select LinkButton。 单击“选择”按钮会导致回发。 在步骤 2 中,我们将了解如何让 DetailsView 通过显示所选产品的详细信息来响应此回发。

每个产品行包含一个 Select LinkButton

图 7:每个产品行包含一个 Select LinkButton (单击以查看全尺寸图像)

突出显示所选行

ProductsGrid GridView 具有属性SelectedRowStyle,该属性可用于指示所选行的视觉样式。 正确使用,这可以通过更清楚地显示当前选择了 GridView 的哪一行来改善用户体验。 在本教程中,让我们用黄色背景突出显示所选行。

与前面的教程一样,让我们努力保留定义为 CSS 类的美学相关设置。 因此,请在 名为 SelectedRowStyleStyles.css中创建新的 CSS 类。

.SelectedRowStyle
{
    background-color: Yellow;
}

若要将此 CSS 类应用于 SelectedRowStyle 我们的教程系列 中所有 GridViews 的 属性,请编辑 GridView.skin 主题中的 DataWebControls Skin 以包含 SelectedRowStyle 设置,如下所示:

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

添加此项后,所选 GridView 行现在以黄色背景色突出显示。

使用 GridView 的 SelectedRowStyle 属性自定义所选行的外观

图 8:使用 GridView SelectedRowStyle 的属性自定义所选行的外观 (单击以查看全尺寸图像)

步骤 2:在 DetailsView 中显示所选产品的详细信息

ProductsGrid GridView 完成后,剩下的就是添加一个 DetailsView,用于显示所选特定产品的相关信息。 在 GridView 上方添加 DetailsView 控件,并创建名为 ProductDetailsDataSource的新 ObjectDataSource。 由于我们希望此 DetailsView 显示有关所选产品的特定信息,因此请将 配置为 ProductDetailsDataSource 使用 ProductsBLL 类的 GetProductByProductID(productID) 方法。

调用 ProductsBLL 类的 GetProductByProductID (productID) 方法

图 9:调用 ProductsBLL 类的方法 GetProductByProductID(productID) (单击以查看全尺寸图像)

productID具有从 GridView 控件SelectedValue的 属性获取的参数值。 如前所述,GridView 的 SelectedValue 属性返回所选行的第一个数据键值。 因此,GridView 的 DataKeyNames 属性必须设置为 ProductID,以便所选行的值 ProductIDSelectedValue返回。

将 productID 参数设置为 GridView 的 SelectedValue 属性

图 10:将 productID 参数设置为 GridView 的属性 SelectedValue (单击以查看全尺寸图像)

productDetailsDataSource正确配置 ObjectDataSource 并绑定到 DetailsView 后,本教程就完成了! 首次访问页面时,不会选择任何行,因此 GridView 的 SelectedValue 属性返回 null。 由于没有具有 NULLProductID 值的产品,该方法不会返回 GetProductByProductID(productID) 任何记录,这意味着不显示 DetailsView (见图 11) 。 单击 GridView 行的“选择”按钮后,将进行回发,并刷新 DetailsView。 这一次,GridView 的 SelectedValue 属性返回 ProductID 所选行的 , GetProductByProductID(productID) 该方法返回一个 ProductsDataTable ,其中包含有关该特定产品的信息,DetailsView 显示这些详细信息 (见图 12) 。

首次访问时,仅显示 GridView

图 11:首次访问时,仅显示 GridView (单击以查看全尺寸图像)

选择行后,将显示产品的详细信息

图 12:选择行后,将显示产品的详细信息 (单击以查看全尺寸图像)

总结

在此教程和前面的三个教程中,我们了解了许多用于显示大纲/详细信息报表的技术。 在本教程中,我们检查了如何使用可选的 GridView 来容纳主记录,并使用 DetailsView 在同一页上显示有关所选主记录的详细信息。 在前面的教程中,我们了解了如何使用 DropDownLists 显示大纲/详细信息报表,以及如何在一个网页上显示主控记录,在另一个网页上显示详细信息记录。

本教程结束了对大纲/详细信息报表的检查。 从下一教程开始,我们将开始探索使用 GridView、DetailsView 和 FormView 的自定义格式设置。 我们将了解如何根据绑定到这些控件的数据自定义这些控件的外观,如何在 GridView 的页脚中汇总数据,以及如何使用模板获取对布局的更大程度的控制。

编程愉快!

关于作者

Scott Mitchell 是七本 ASP/ASP.NET 书籍的作者, 4GuysFromRolla.com 的创始人,自 1998 年以来一直从事 Microsoft Web 技术工作。 Scott 担任独立顾问、培训师和作家。 他的最新书是 山姆斯在24小时内 ASP.NET 2.0自学。 可以在 上联系 mitchell@4GuysFromRolla.com他, 也可以通过他的博客联系到他,该博客可在 http://ScottOnWriting.NET中找到。

特别感谢

本教程系列由许多有用的审阅者审阅。 本教程的首席审阅者是希尔顿·吉森诺。 有兴趣查看我即将发布的 MSDN 文章? 如果是,请在 处mitchell@4GuysFromRolla.com放置一行。