支持行单击、双击事件的GridView和DataList控件（译）

支持行单击、双击事件的GridView和DataList控件（译）

        让GridView 和 DataList 控件响应鼠标单击、双击事件。并且，使用 ClientScript.RegisterForEventValidation 来注册相关事件避免禁用事件验证。

介绍

        网上有不少关于实现GridView行单击、双击事件的代码。但是我还没见过可以同时处理这两个事件和解决ASP.NET 2.0中事件验证错误的代码。

        在这里，我将描述如何在GridView，DataList 和ListBox控件中处理单击、 双击。我还将展示如何处理事件验证而无需禁用它。

背景

        在开发新的ASP.NET 应用程序以替换旧的 Windows 应用程序时，我被要求保持和原来差不多的用户体验。原来的程序可以让用户选择某行，并在该行的工具栏上执行一个操作。通过双击某行用户可以打开一个有该行详细信息的窗口。这类功能可以很容易的通过在GridView的每行添加两个按钮来实现，但我不希望这样。

GridView中的单击和双击

创建一个包含默认页的web应用程序。然后，在页面的Page指令中添加EnableEventValidation ="false"。稍后我们会将其删除。添加 GridView 并绑定一些数据。添加两个使用 GridView 编辑列选项的asp: ButtonField 控件。给这两个ButtonField的CommandName分别命名为SingleClick、DoubleClick 。（选择按钮也可以用于 SingleClick 事件但我已经决定两个都用 asp: ButtonField）。

<Columns>
    <asp:ButtonField Text="SingleClick" CommandName="SingleClick" />
    <asp:ButtonField Text="DoubleClick" CommandName="DoubleClick" />
</Columns>

        创建一个RowCommand事件并且用 switch 来分别捕获单击、双击事件。

      在本例中，代码将返回被触发的事件。SingleClick 命令还将修改GridView的SelectedIndex。

protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
    GridView _gridView = (GridView)sender;

    // Get the selected index and the command name
    int _selectedIndex = int.Parse(e.CommandArgument.ToString());
    string _commandName = e.CommandName;

    switch (_commandName)
    {
        case ("SingleClick"):
            _gridView.SelectedIndex = _selectedIndex;
            this.Message.Text += "Single clicked GridView row at index "
            + _selectedIndex.ToString() + "<br />";
        break;
        case ("DoubleClick"):
            this.Message.Text += "Double clicked GridView row at index "
            + _selectedIndex.ToString() + "<br />";
        break;
    }
}

 

     创建一个RowDataBound 事件去修改绑定的每一行。现在，我们需要得到 SingleClick 按钮用于回发的客户端脚本并将其分配到整行。

if (e.Row.RowType == DataControlRowType.DataRow)
{
    // Get the LinkButton control in the first cell
    LinkButton _singleClickButton = (LinkButton)e.Row.Cells[].Controls[];
    // Get the javascript which is assigned to this LinkButton
    string _jsSingle =
    ClientScript.GetPostBackClientHyperlink(_singleClickButton, "");
    // Add this javascript to the onclick Attribute of the row
    e.Row.Attributes["onclick"] = _jsSingle;
}

        当然我们也可以这样设置双击按钮，只是这样两个事件将不能同时工作。

if (e.Row.RowType == DataControlRowType.DataRow)
{
    // Get the LinkButton control in the second cell
    LinkButton _doubleClickButton = (LinkButton)e.Row.Cells[].Controls[];
    // Get the javascript which is assigned to this LinkButton
    string _jsDouble =
    ClientScript.GetPostBackClientHyperlink(_doubleClickButton, "");
    // Add this JavaScript to the ondblclick Attribute of the row
    e.Row.Attributes["ondblclick"] = _jsDouble;
}

如果我们同时实现了上面两个事件，在功能上只会响应单击事件。这是因为当用户双击时，他的第一次点击被识别为单击然后页面在双击事件响应前就回传了。JavaScript的setTimeOut方法可以用来给单击事件设置一个延迟，从而给用户一个机会去完成双击操作。通过查看页面源码，我们可以发现OnClick事件在tr标签内：

onclick="javascript:__doPostBack('GridView1$ctl02$ctl00','')"

添加一个setTimeout方法，并为其设置300毫秒延迟：

onclick="javascript:setTimeout("__doPostBack('GridView1$ctl02$ctl00','')",300)"

于是完整的RowDataBound代码如下：

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        // Get the LinkButton control in the first cell
        LinkButton _singleClickButton = (LinkButton)e.Row.Cells[].Controls[];
        // Get the javascript which is assigned to this LinkButton
        string _jsSingle =
        ClientScript.GetPostBackClientHyperlink(_singleClickButton, "");
        // To prevent the first click from posting back immediately
        // (therefore giving the user a chance to double click)
    // pause the postbackfor 300 milliseconds by
        // wrapping the postback command in a setTimeout
        _jsSingle = _jsSingle.Insert(, "setTimeout(\"");
        _jsSingle += "\", 300)";
        // Add this javascript to the onclick Attribute of the row
        e.Row.Attributes["onclick"] = _jsSingle;

        // Get the LinkButton control in the second cell
        LinkButton _doubleClickButton = (LinkButton)e.Row.Cells[].Controls[];
        // Get the javascript which is assigned to this LinkButton
        string _jsDouble =
        ClientScript.GetPostBackClientHyperlink(_doubleClickButton, "");
        // Add this javascript to the ondblclick Attribute of the row
        e.Row.Attributes["ondblclick"] = _jsDouble;
    }
}

这两个按钮也无需再显示，设置其Visible="false"：

<Columns>
    <asp:ButtonField Text="SingleClick" CommandName="SingleClick" Visible="false" />
    <asp:ButtonField Text="DoubleClick" CommandName="DoubleClick" Visible="false" />
</Columns>

现在RowCommand代码就能正确捕获和处理行单击和双击了。

注册用于验证的回发、回调数据

一切工作正常，但请记住，我们一开始在页面指令中添加了 EnableEventValidation ="flase"。这并不是最安全的选项，所以我们应该将其删除。但这将导致行单击或双击时触发"回发、回调参数无效"错误。错误提示告诉我们可以通过ClientScriptManager.RegisterForEventValidation来注册用于验证的回发、回调数据。（至于EventValidation 的目的已在别的文章里写得很详尽了本文不予赘述）。

        ClientScriptManager.RegisterForEventValidation 可以通过重写 Render 方法调用。这里的窍门是注册GridView 中每一行的两个按钮的UniqueID 。行的 UniqueID 通过 GridViewRow.UniqueID获取。第一个按钮的 UniqueID 可以通过在行的UniqueID后面加"$ctl00"得到，第二个按钮加"$ctl01"。

        重写的 Render 方法如下所示 ︰

protected override void Render(HtmlTextWriter writer)
{
    foreach (GridViewRow r in GridView1.Rows)
    {
        if (r.RowType == DataControlRowType.DataRow)
        {
            Page.ClientScript.RegisterForEventValidation
                    (r.UniqueID + "$ctl00");
            Page.ClientScript.RegisterForEventValidation
                    (r.UniqueID + "$ctl01");
        }
    }
    base.Render(writer);
}

至此，我们将不会再遇到"Invalid postback or callback argument" 错误。

其它控件

在源代码中，我还演示了如何在DataList和ListBox中实现此功能。代码基本相同所以我就不贴在这里了。

DataList中实现行单击、双击

        在DataList 中，ItemTemplate的内容都被包裹在asp:Panel中，随便那两个控件分配onclick和ondblclick事件。

ListBox中实现行单击、双击

在ListBox中，它本身是没有Row或Item事件的，但onclick 和ondblclick 属性可以添加到控件中去。在SelectedIndexChanged事件处理程序中，通过Request.Form["__EventArgument"] 获取命令名。

结论

通过查看由 ASP.NET 生成的 javascript 代码，我们可以扩展 GridView 和 DataList 控件的功能。为了保护你的应用程序安全，您应该尽量避免使用 EnableEventValidation ="false"。一旦你理解了 EventValidation 的工作原理，你可以通过 ClientScript.RegisterForEventValidation 来确保您的代码按预期方式工作。

源码下载地址

https://yunpan.cn/cYTKyZFjQuS2c  访问密码 036e  （不嫌麻烦的话，最好前往原文地址下载）

---

Clickable and Double Clickable Rows with GridView and DataList Controls (ASP.NET 2.0)

Handle single and double clicks with both the GridView and DataList Controls. Also, use ClientScript.RegisterForEventValidation to register the events and avoid disabling event validation.

Introduction

There are several online sources describing how to make a GridView row clickable anywhere on the row. There are also a few which describe how to make a row double-clickable. I haven't come across any which handle both events or deal with event validation errors in ASP.NET 2.0.

Here I will describe how to handle single and double clicks with the GridView, DataList and ListBox controls. I will also show how to deal with event validation without disabling it.

Background

While developing an ASP.NET application to replace an old Windows application, I was asked to keep the user experience relatively close to the original. The original application let a user select a row and perform an action on that row from a toolbar. By double clicking on a row the user could open another form with a details view of that row. This type of functionality could easily be achieved with two separate buttons on each row of a GridView but I needed something better than that.

Single and Double Clicking with a GridView

Create an new web application with a default page. For now, add EnableEventValidation="false" to the page directive. We will remove it later. Add a GridView and bind some data to it. Add two asp:ButtonField controls using the edit columns option on the GridView. Give these button fields command names of SingleClick and DoubleClick. (A select button could also be used for the SingleClick event but I've decided to use asp:ButtonField for both.)

<Columns>
    <asp:ButtonField Text="SingleClick" CommandName="SingleClick" />
    <asp:ButtonField Text="DoubleClick" CommandName="DoubleClick" />
</Columns>

Create a RowCommand event for the GridView with a switch block to capture the separate events. 
For the demo, this code will write out a history of the events fired. The SingleClick command will also set the SelectedIndex of the row.

protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
    GridView _gridView = (GridView)sender;

    // Get the selected index and the command name
    int _selectedIndex = int.Parse(e.CommandArgument.ToString());
    string _commandName = e.CommandName;

    switch (_commandName)
    {
        case ("SingleClick"):
            _gridView.SelectedIndex = _selectedIndex;
            this.Message.Text += "Single clicked GridView row at index "
            + _selectedIndex.ToString() + "<br />";
        break;
        case ("DoubleClick"):
            this.Message.Text += "Double clicked GridView row at index "
            + _selectedIndex.ToString() + "<br />";
        break;
    }
}

create a RowDataBound event to modify each row as it is bound. Now we need to take the client script which is used by the SingleClick button for postback and assign it to the entire row.

if (e.Row.RowType == DataControlRowType.DataRow)
{
    // Get the LinkButton control in the first cell
    LinkButton _singleClickButton = (LinkButton)e.Row.Cells[].Controls[];
    // Get the javascript which is assigned to this LinkButton
    string _jsSingle =
    ClientScript.GetPostBackClientHyperlink(_singleClickButton, "");
    // Add this javascript to the onclick Attribute of the row
    e.Row.Attributes["onclick"] = _jsSingle;
}

We can also do the same for the DoubleClick button, however both of these will not work together.

if (e.Row.RowType == DataControlRowType.DataRow)
{
    // Get the LinkButton control in the second cell
    LinkButton _doubleClickButton = (LinkButton)e.Row.Cells[].Controls[];
    // Get the javascript which is assigned to this LinkButton
    string _jsDouble =
    ClientScript.GetPostBackClientHyperlink(_doubleClickButton, "");
    // Add this JavaScript to the ondblclick Attribute of the row
    e.Row.Attributes["ondblclick"] = _jsDouble;
}

If we implement both these events together we will only get the functionality of the single click.

This is because when the user starts a double click, the first click is taken as a single click and the page is posted back before the second click can happen.

The JavaScript setTimeout method can be used to set a timeout on the first click, therefore giving the user a chance to complete a double click.

Looking at the source of the page, we can see the onclick event on the <tr> tags:

onclick="javascript:__doPostBack('GridView1$ctl02$ctl00','')"

Add a setTimeout method and give it a timeout of 300 milliseconds:

onclick="javascript:setTimeout("__doPostBack('GridView1$ctl02$ctl00','')", 300)"

So the entire RowDataBound code looks like:

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        // Get the LinkButton control in the first cell
        LinkButton _singleClickButton = (LinkButton)e.Row.Cells[].Controls[];
        // Get the javascript which is assigned to this LinkButton
        string _jsSingle =
        ClientScript.GetPostBackClientHyperlink(_singleClickButton, "");
        // To prevent the first click from posting back immediately
        // (therefore giving the user a chance to double click)
    // pause the postbackfor 300 milliseconds by
        // wrapping the postback command in a setTimeout
        _jsSingle = _jsSingle.Insert(, "setTimeout(\"");
        _jsSingle += "\", 300)";
        // Add this javascript to the onclick Attribute of the row
        e.Row.Attributes["onclick"] = _jsSingle;
        // Get the LinkButton control in the second cell
        LinkButton _doubleClickButton = (LinkButton)e.Row.Cells[].Controls[];
        // Get the javascript which is assigned to this LinkButton
        string _jsDouble =
        ClientScript.GetPostBackClientHyperlink(_doubleClickButton, "");
        // Add this javascript to the ondblclick Attribute of the row
        e.Row.Attributes["ondblclick"] = _jsDouble;
    }
}

The buttons no longer need to be visible so hide them by adding Visible="false":

<Columns>
    <asp:ButtonField Text="SingleClick" CommandName="SingleClick" Visible="false" />
    <asp:ButtonField Text="DoubleClick" CommandName="DoubleClick" Visible="false" />
</Columns>

We can now single click and double click on a row and the appropriate action will be captured in the RowCommand code.

Register the postback or callback data for validation

Everything is working fine, but remember that we added EnableEventValidation="false" to the page directive. This is not the most secure option so we should remove it. This will cause an "Invalid postback or callback argument" error when a row is clicked or double clicked. The error tells us to use the ClientScriptManager.RegisterForEventValidation method in order to register the postback or callback data for validation. (The purpose of EventValidation is well documented elsewhere and beyond the scope of this article.)

The ClientScriptManager.RegisterForEventValidation can be called by overriding the Render method. The trick here is to register the unique id of both the buttons for each row of the GridView. The UniqueID of the row is returned by GridViewRow.UniqueID. The UniqueID of the first button can be generated by appending "$ctl00" to the row's UniqueID and for the second button append "$ctl01".

The overridden Render method is as follows:

protected override void Render(HtmlTextWriter writer)
{
    foreach (GridViewRow r in GridView1.Rows)
    {
        if (r.RowType == DataControlRowType.DataRow)
        {
            Page.ClientScript.RegisterForEventValidation
                    (r.UniqueID + "$ctl00");
            Page.ClientScript.RegisterForEventValidation
                    (r.UniqueID + "$ctl01");
        }
    }
    base.Render(writer);
}

Now we will not get any "Invalid postback or callback argument" errors.

Other Controls

In the source code, I also demonstrate how to achieve this functionality with a DataList and ListBox controls. The code is quite similar so I won't show it here.

Single and Double Clicking with a DataList

With the DataList, the contents of the ItemTemplate are wrapped in an asp:Panel, giving something to assign the onclick and ondblclick events to.

Single and Double Clicking with a ListBox

With the ListBox, there are no Row or Item events but the onclick and ondblclick attributes can be added to the control.

In the SelectedIndexChanged event handler, Request.Form["__EventArgument"] will return the command name.

Conclusion

By looking closely at the JavaScript which is written out by ASP.NET we can extend the functionality of the GridView and DataList controls. To keep your applications secure, you should not use EnableEventValidation="false" if at all possible. Once you understand how EventValidation works, you can use ClientScript.RegisterForEventValidation to ensure your code works as intended.

History

• v1.0 - 23rd Sep 2006
• v1.1 - 25th Sep 2006
• v1.2 - 12th Nov 2006 
  Addition of a ListBox control to the demo
• v1.3 - 20th Dec 2006
  VB.NET version of demo added to download

 

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

来源： http://www.codeproject.com/Articles/15677/Clickable-and-Double-Clickable-Rows-with-GridView

 

来自为知笔记(Wiz)