Web应用程序DataGrid中的自定义按钮

• 下载源代码 - 9.41 Kb

引言

我想在我的DataGrid中添加按钮，但我不希望每一行都有一个写着“Edit”或“Update”的按钮。我希望每个按钮的文本值根据单元格内容而变化。使用数据填充按钮似乎比创建大量具有相同文本的按钮更直观，也不那么业余。当单元格中包含按钮时，为什么还要在某个单元格值旁边放一个“Edit”按钮呢？

在我搜索解决这个问题时，我找不到一个完整地解决这个问题的来源。我在各种地方找到了解决线索，但没有一个来源完全回答了这个问题。因此，我不得不去揣摩、尝试、搜索、祈祷、调试/排错，并最终成功。希望这篇文章能为您节省类似的搜索时间和麻烦。

背景

本文假设您

• 知道如何在Web应用中添加DataGrid。
• 知道如何创建DataSource并将其绑定到DataGrid。
• 知道当您捕获由按钮生成的事件时，您想做什么。
• Code Project关于DataGrid模板的文章... 谢谢Zachery。
• MSDN DataGrid概述.

使用代码

创建和连接按钮模板涉及四个步骤

• 创建按钮模板。
• 编辑按钮模板。
• 将按钮的点击事件处理程序引用添加到HTML中。
• 编写按钮点击事件处理程序。

我将假设您已经知道如何在Web窗体中添加DataGrid。首先，我们需要创建一个将用于容纳按钮的模板。

• 右键单击DataGrid并选择“Property Builder”。
• 选择“Columns”选项卡。
• 选择“Button”列并展开它。
• 选择“Edit Update Cancel”并将其添加到“Selected Columns List”中。
• 将Button类型更改为Pushbutton。
• 单击链接“Convert this Column into a Template Column”。
• 单击“OK”按钮。我们在这里完成了。

此时，我们已经创建了将在DataGrid第一列中创建按钮的基本模板。现在您的屏幕上应该会显示一个看起来像这样的DataGrid。

• 右键单击DataGrid并选择“Edit Template, Columns[0]”。
• 删除Update和Cancel按钮。本篇文章不需要它们。
• 右键单击DataGrid并选择“End Edit template”。
• 切换到HTML视图。

请注意，通过模板生成的HTML中有一个名为Button1的按钮。您需要编辑这一行来添加事件处理程序。输入按下此按钮时将调用的事件处理程序的名称。例如：OnClick="Button1_Click"。您的按钮模板的HTML应该类似于这样。

打开aspx.cs文件。您需要在CS文件中添加按钮事件处理代码。您创建的方法必须是public方法，并接受两个参数：object和System.EventArgs。为了继续上面的示例，事件处理程序的签名将是：

public void Button1_Click(object sender, System.EventArgs e)

您可以在此处添加任何您喜欢的代码。我相信您知道捕获此事件后想做什么。

尽管这超出了本文的范围，但您必须将DataGrid绑定到DataSource才能进入下一步。有关DataGrid的更多信息，请参阅上面提供的MSDN链接。

在显示网页之前，您需要调用一个方法来填充DataGrid按钮的文本。数据可以来自任何地方。在我的例子中，我选择了DataGrid的另一列。在下面的代码片段中，我遍历DataGrid，从第一个数据列检索文本，并将其复制到按钮的Text属性。一旦您知道窍门，就很容易了。

for (int i = 0; i < dg.Items.Count; i++)
{
    DataGridItem dgi = dg.Items[i];
    
    // cast datagriditem to a button
    Button b = (Button) dgi.FindControl("Button1");
    
    // set button properties
    b.Text = dg.Items[i].Cells[1].Text;
    b.Width = 170;
    
    //hide the data in the 2nd cell. no point in showing it twice
    dg.Items[i].Cells[1].Visible = false; 
}

虽然这并非在所有情况下都必要，但如果您要在事件处理程序中引用按钮，我建议您在事件处理程序中将sender对象强制转换为Button。

public void Button1_Click(object sender, System.EventArgs e)
{
    Button b = (Button) sender;
    
    // the rest of your code
}

就是这样。希望代码第一次就能编译并运行，您将看到一个类似这样的Web窗体。

关注点

• 尝试使用DataGrid的ShowHeader和ShowFooter属性来定制按钮的外观。
• 使用<DIV>来包含DataGrid，使其可以滚动。