使用带有详细信息 DetailView 的可选母版 GridView 来实现母版/详细信息查看 (C#)
本教程将有一个 GridView,其行包含每个产品的名称和价格以及“选择”按钮。 单击特定产品的“选择”按钮将导致其完整详细信息显示在同一页上的 DetailsView 控件中。
简介
在 上一教程中 ,我们了解了如何使用两个网页创建大纲/详细信息报表:“母版”网页,其中显示了供应商列表;以及列出所选供应商提供的这些产品的“详细信息”网页。 这两页报表格式可以压缩为一页。 本教程将有一个 GridView,其行包含每个产品的名称和价格以及“选择”按钮。 单击特定产品的“选择”按钮将导致其完整详细信息显示在同一页上的 DetailsView 控件中。
图 1:单击“选择”按钮显示产品的详细信息 (单击以查看全尺寸图像)
步骤 1:创建可选 GridView
回想一下,在两页母版/详细信息报表中,每个主记录都包含一个超链接,单击该超链接时,会将用户发送到详细信息页,并在 querystring 中传递单击的行 SupplierID
的值。 使用 HyperLinkField 将此类超链接添加到每个 GridView 行。 对于单页母版/详细信息报表,我们需要每个 GridView 行的按钮,单击该按钮时会显示详细信息。 GridView 控件可以配置为包含导致回发的每一行的“选择”按钮,并将该行标记为 GridView 的 SelectedRow。
首先,将 GridView 控件添加到 文件夹中的页面DetailsBySelecting.aspx
Filtering
,并将其 ID
属性设置为 ProductsGrid
。 接下来,添加一个名为 AllProductsDataSource
的新 ObjectDataSource,用于 ProductsBLL
调用类的 GetProducts()
方法。
图 2:创建名为 AllProductsDataSource
的 ObjectDataSource (单击以查看全尺寸图像)
图 3:使用 ProductsBLL
类 (单击查看全尺寸图像)
图 4:配置 ObjectDataSource 以调用 GetProducts()
方法 (单击以查看全尺寸图像)
编辑 GridView 的字段,删除除 和 UnitPrice
BoundFields 之外ProductName
的所有字段。 此外,可以根据需要随意自定义这些 BoundField,例如将 UnitPrice
BoundField 格式化为货币,以及更改 HeaderText
BoundFields 的属性。 可以通过单击 GridView 智能标记中的“编辑列”链接或手动配置声明性语法,以图形方式完成这些步骤。
图 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 的智能标记中的“启用选择”复选框。
图 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 还提供 SelectedIndex、 SelectedValue 和 SelectedDataKey 属性。 属性 SelectedIndex
返回所选行的索引,而 SelectedValue
和 SelectedDataKey
属性基于 GridView 的 DataKeyNames 属性返回值。
属性 DataKeyNames
用于将一个或多个数据字段值与每行相关联,并且通常用于将基础数据中的唯一标识信息与每个 GridView 行相关联。 属性 SelectedValue
返回所选行的第一个 DataKeyNames
数据字段的值,其中作为 SelectedDataKey
属性返回所选行的 DataKey
对象,该对象包含该行的指定数据键字段的所有值。
DataKeyNames
通过Designer将数据源绑定到 GridView、DetailsView 或 FormView 时,属性会自动设置为唯一标识的数据字段 () 。 虽然在前面的教程中已自动为我们设置了此属性,但示例在没有指定 属性的情况下 DataKeyNames
会起作用。 但是,对于本教程中的可选 GridView,以及我们将检查插入、更新和删除的将来教程, DataKeyNames
必须正确设置 属性。 请花点时间确保 GridView 的 DataKeyNames
属性设置为 ProductID
。
让我们通过浏览器查看到目前为止的进度。 请注意,GridView 列出了所有产品的名称和价格以及 Select LinkButton。 单击“选择”按钮会导致回发。 在步骤 2 中,我们将了解如何让 DetailsView 通过显示所选产品的详细信息来响应此回发。
图 7:每个产品行包含一个 Select LinkButton (单击以查看全尺寸图像)
突出显示所选行
ProductsGrid
GridView 具有属性SelectedRowStyle
,该属性可用于指示所选行的视觉样式。 正确使用,这可以通过更清楚地显示当前选择了 GridView 的哪一行来改善用户体验。 在本教程中,让我们用黄色背景突出显示所选行。
与前面的教程一样,让我们努力保留定义为 CSS 类的美学相关设置。 因此,请在 名为 SelectedRowStyle
的Styles.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 行现在以黄色背景色突出显示。
图 8:使用 GridView SelectedRowStyle
的属性自定义所选行的外观 (单击以查看全尺寸图像)
步骤 2:在 DetailsView 中显示所选产品的详细信息
ProductsGrid
GridView 完成后,剩下的就是添加一个 DetailsView,用于显示所选特定产品的相关信息。 在 GridView 上方添加 DetailsView 控件,并创建名为 ProductDetailsDataSource
的新 ObjectDataSource。 由于我们希望此 DetailsView 显示有关所选产品的特定信息,因此请将 配置为 ProductDetailsDataSource
使用 ProductsBLL
类的 GetProductByProductID(productID)
方法。
图 9:调用 ProductsBLL
类的方法 GetProductByProductID(productID)
(单击以查看全尺寸图像)
productID
具有从 GridView 控件SelectedValue
的 属性获取的参数值。 如前所述,GridView 的 SelectedValue
属性返回所选行的第一个数据键值。 因此,GridView 的 DataKeyNames
属性必须设置为 ProductID
,以便所选行的值 ProductID
由 SelectedValue
返回。
图 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 在同一页上显示有关所选主记录的详细信息。 在前面的教程中,我们了解了如何使用 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放置一行。
反馈
https://aka.ms/ContentUserFeedback。
即将推出:在整个 2024 年,我们将逐步取消以“GitHub 问题”作为内容的反馈机制,并将其替换为新的反馈系统。 有关详细信息,请参阅:提交和查看相关反馈