通过

为 GridView 添加一列单选按钮

  • 项目

本文档是 Visual C# 教程 (切换到 Visual Basic 教程)

本教程将探讨如何向 GridView 控件添加一列单选按钮，为用户选择单行 GridView 提供更直观的方式。

« 前一篇教程  |  下一篇教程 »

Part 2

步骤4 ： 在单独页面上显示选定供应商的产品

在用户选定GridView 行之后 ， 我们需要显示选定供应商的产品。在某些情况下，我们可能希望在单独的页面上显示这些产品，而在另外的一些情况下，我们更希望在同一个页面上显示这些产品。我们首先探讨如何在单独页面上显示产品；在步骤 5 中，我们将了解向 RadioButtonField.aspx 添加 GridView 来显示选定供应商的产品。

目前 ， 页面上有两个Web 按钮 控件 – ListProducts 和 SendToProducts 。单击 SendToProducts Button 时 ， 我们希望将用户转到 ~/Filtering/ProductsForSupplierDetails.aspx 。此页面是在跨两页面的主/ 明细筛选 教程中创建的，用于显示其 SupplierID 通过名为 SupplierID 的 querystring 字段传递的供应商的产品。

要提供此功能 ， 需要为 SendToProducts Button 的 Click 事件创建一个 Event Handler 。在步骤 3 中 ， 我们添加了 SuppliersSelectedIndex 属性 ， 该属性返回选定单选按钮行的索引。相应的SupplierID 可从 GridView 的 DataKeys 集合进行检索 ， 并且可使用Response.Redirect("url") 将用户转到 ~/Filtering/ProductsForSupplierDetails.aspx?SupplierID=SupplierID 。

protected void SendToProducts_Click(object sender, EventArgs e)
{
    // Send the user to ~/Filtering/ProductsForSupplierDetails.aspx
    int supplierID = 
        Convert.ToInt32(Suppliers.DataKeys[SuppliersSelectedIndex].Value);
    Response.Redirect(
        "~/Filtering/ProductsForSupplierDetails.aspx?SupplierID=" 
        + supplierID);
    }
}

只要从GridView 选中一个单选按钮 ， 本代码即可顺利工作。起初 ， 如果GridView 没有选定任何单选按钮 ， 并且用户点击了 SendToProducts 按钮 ， 则SuppliersSelectedIndex 的值将为 -1 ， 这将引发抛出一个异常 ， 因为 -1 超出了 DataKeys 集合索引的范围。这并不是我们关心的问题 ， 但是 ， 如果您决定像步骤 3 中讨论的那样更新 RowCreated Event Handler ， 初始就会在GridView 中选定第一个单选按钮。

要使解决SuppliersSelectedIndex 的值为 -1 的问题， 请在 GridView 的上方向页面上添加一个 Web 标签 控件。将其 ID 属性设置为 ChooseSupplierMsg 、CssClass 属性设置为 Warning 、EnableViewState 和Visible 属性设置为 False 、Text 属性设置为 “Please choose a supplier from the grid” 。CSS 类在 Styles.css 中定义 ， 并以红色、斜体、粗体和大字体文本显示警告信息。通过将其 EnableViewState 和 Visible 属性设置为 False ，除非控件的 Visible 属性通过编码设置为 True ，否则将不会呈现 Label 。

图13 ： 在 GridView 上方添加一个 Web 标签 控件

接下来 ， 扩充 Click Event Handler ， 使之在SuppliersSelectedIndex 小于零的情况下显示ChooseSupplierMsg Label ， 否则将用户重定位到~/Filtering/ProductsForSupplierDetails.aspx?SupplierID=SupplierID。

protected void SendToProducts_Click(object sender, EventArgs e)
{
    // make sure one of the radio buttons has been selected
    if (SuppliersSelectedIndex < 0)
        ChooseSupplierMsg.Visible = true;
    else
    {
        // Send the user to ~/Filtering/ProductsForSupplierDetails.aspx
        int supplierID = 
            Convert.ToInt32(Suppliers.DataKeys[SuppliersSelectedIndex].Value);
        Response.Redirect(
            "~/Filtering/ProductsForSupplierDetails.aspx?SupplierID=" 
            + supplierID);
    }
}

在浏览器中访问该页面，并在从GridView 选择供应商之前单击 SendToProducts 按钮。如图 14 所示 ， 这将显示 ChooseSupplierMsg label 。接下来，选择一个供应商，并单击 SendToProducts 按钮。这将快速链接到列出选定供应商提供的产品的页面。图 15 显示了选定 Bigfoot Breweries 供应商时的 ProductsForSupplierDetails.aspx 页面。

图14 ： 在未选定供应商的情况下显示 ChooseSupplierMsg Label

图15 ：ProductsForSupplierDetails.aspx 页面上显示了选定供应商的产品

步骤5 ：在同一页面上显示选定供应商的产品

在步骤4 中 ， 我们了解了如何将用户转到其它 web 页 ， 从而显示选定供应商的产品。或者，也可以在同一页面上显示选定供应商的产品可。为了说明这一点，我们将向 RadioButtonField.aspx 页面添加另外一个 GridView ，从而显示选定供应商的产品。

由于我们希望GridView 上的产品在选定供应商时显示 ， 因此 ， 需要在 Suppliers GridView 的下方添加一个 Panel Web 控件 ， 将其ID 设置为 ProductsBySupplierPanel 、Visible 属性设置为 False 。在 Panel 内 ， 添加文本 “Products for the Selected Supplier” ， 其后面为名为ProductsBySupplier 的 GridView 。从 GridView 的智能标记 ， 选择将其绑定到一个名为ProductsBySupplierDataSource 的新ObjectDataSource 。

图16 ： 将 ProductsBySupplier GridView 绑定到一个新的 ObjectDataSource

接下来 ， 将ObjectDataSource 配置为使用 ProductsBLL 类。由于我们仅希望检索选定供应商提供的产品 ， 请指定ObjectDataSource 应调用GetProductsBySupplierID(supplierID) 方法来检索数据。在 UPDATE 、 INSERT 和 DELETE 选项卡中将下拉列表中选择为 “(None)” 。

 

图17 ： 将 ObjectDataSource 配置为使用GetProductsBySupplierID(supplierID) 方法

图18 ： 在 UPDATE 、INSERT 和 DELETE 选项卡中将下拉列表设置为 “(None)”

在配置完SELECT 、UPDATE 、INSERT 和 DELETE 选项卡之后 ， 单击 Next 。由于 GetProductsBySupplierID(supplierID) 方法需要输入参数 ，Create Data Source 向导将提示我们指定参数值的来源。

此处 ， 我们有几个选项来指定参数值的来源。我们可以使用默认的Parameter 对象 ， 并且在 ObjectDataSource 的 Selecting Event Handler 中通过编码将 SuppliersSelectedIndex 属性值分配给Parameter 的 DefaultValue 属性。请参阅通过编码设定 ObjectDataSource 参数值 教程， 复习通过编码向 ObjectDataSource 参数分配参数值的内容。

或者 ， 我们可以使用ControlParameter ， 请参阅Suppliers GridView 的 SelectedValue 属性 （ 见图 19 ） 。GridView 的 SelectedValue 属性返回对应于 SelectedIndex 属性 的 DataKey 值。为了保证此选项能够正常工作 ， 我们需要在单击 ListProducts 按钮时将 GridView 的 SelectedIndex 属性通过编码设置为选定行。作为附带的好处 ， 通过设置 SelectedIndex ， 选定记录将呈现为 DataWebControls Theme 中 定义的 SelectedRowStyle （ 黄色背景 ） 。

图19 ： 使用 ControlParameter 指定 GridView 的 SelectedValue 作为参数源

完成向导之后 ，Visual Studio 将自动为产品的数据字段添加字段。删除ProductName 、CategoryName 和 UnitPrice BoundField 之外的所有 BoundField ， 将HeaderText 属性设置为 “Product” 、“Category” 和 “Price” 。配置 UnitPrice BoundField ， 保证其值以货币形式出现。作出这些更改后 ，Panel 、GridView 和 ObjectDataSource 的声明标记应类似如下 ：

<asp:Panel runat="server" ID="ProductsBySupplierPanel" Visible="False">
    <h3>
        Products for the Selected Supplier</h3>
    <p>
        <asp:GridView ID="ProductsBySupplier" runat="server" 
            AutoGenerateColumns="False" DataKeyNames="ProductID"
            DataSourceID="ProductsBySupplierDataSource" EnableViewState="False">
            <Columns>
                <asp:BoundField DataField="ProductName" HeaderText="Product" 
                    SortExpression="ProductName" />
                <asp:BoundField DataField="CategoryName" HeaderText="Category" 
                    ReadOnly="True" SortExpression="CategoryName" />
                <asp:BoundField DataField="UnitPrice" DataFormatString="{0:c}" 
                    HeaderText="Price" HtmlEncode="False" 
                    SortExpression="UnitPrice" />
            </Columns>
        </asp:GridView>
        <asp:ObjectDataSource ID="ProductsBySupplierDataSource" runat="server" 
            OldValuesParameterFormatString="original_{0}"
            SelectMethod="GetProductsBySupplierID" TypeName="ProductsBLL">
            <SelectParameters>
                <asp:ControlParameter ControlID="Suppliers" Name="supplierID" 
                    PropertyName="SelectedValue" Type="Int32" />
            </SelectParameters>
        </asp:ObjectDataSource>
    </p>
</asp:Panel>

要完成此练习 ， 我们需要在单击ListProducts 时 ， 将 GridView 的 SelectedIndex 属性设置为SelectedSuppliersIndex ， 将ProductsBySupplierPanel Pane 的Visible 属性设置为 True 。要达到这个目的 ， 请为 ListProducts Web 按钮 控件的Click 事件创建一个 Event Handler ， 并添加下列代码 ：

<input id="ctl00_MainContent_Suppliers_ctl02_RowSelector" 
    name="ctl00$MainContent$Suppliers$ctl02$SuppliersGroup" 
    type="radio" value="RowSelector" />
<input id="ctl00_MainContent_Suppliers_ctl03_RowSelector" 
    name="ctl00$MainContent$Suppliers$ctl03$SuppliersGroup" 
    type="radio" value="RowSelector" />
<input id="ctl00_MainContent_Suppliers_ctl04_RowSelector" 
    name="ctl00$MainContent$Suppliers$ctl04$SuppliersGroup" 
    type="radio" value="RowSelector" />
<input id="ctl00_MainContent_Suppliers_ctl05_RowSelector" 
    name="ctl00$MainContent$Suppliers$ctl05$SuppliersGroup" 
    type="radio" value="RowSelector" />

如果未从GridView 选定供应商 ， 页面上将显示 ChooseSupplierMsg Label ， 而ProductsBySupplierPanel Panel 将隐藏。否则 ， 如果已经选定供应商 ， 则页面上将显示 ProductsBySupplierPanel ， 并且更新 GridView 的SelectedIndex 属性。

图20 显示了选定 Bigfoot Breweries 供应商 ， 并且单击“Show Products on Page” 按钮之后的结果。

图20 ： 在同一页面上列出了 Bigfoot Breweries 提供的产品

小结

正如在使用具有 Details DetailView 功能的可选主GridView 的主/明细报表 教程中讨论的一样 ， 可使用其ShowSelectButton 属性设置为 true 的 CommandField 从 GridView 选择记录。但是， CommandField 的按钮既可作为正常的按钮和链接显示，也可作为图像显示。另一个选行用户界面是在每个 GridView 行中提供一个单选按钮或一个复选框。在本教程中，我们探讨了如何添加一列单选按钮。

遗憾的是 ， 添加一列单选按钮并非人们期望的那样直接或简单。单击按钮时并没有任何可添加的内置RadioButtonField ， 并且在TemplateField 中使用RadioButton Web 控件会引入一系列问题。最后 ， 要想提供这样的界面 ， 我们必须创建一个定制 DataControlField 类 ， 或者在 RowCreated 事件期间向TemplateField 插入适当的 HTML 代码。

我们已经探讨了如何添加一列单选按钮，下面我们将把注意力集中到添加一列复选框上面。通过一列复选框，用户可以选择一个或者多个 GridView 行，然后对所有选定行完成某些操作（例如，从基于 web 的邮件客户端选择一系列邮件，然后选择删除所有选定的邮件）。在下个教程中，我们将探讨如何添加复选框列。

快乐编程！





上一页 | 1 | 2 | 下一页

下一篇教程