按下 Escape 键取消 GridView 编辑

• 下载演示 - 19 KB

这是一个有趣的研究，其结果是一个技巧，可以在按下Escape键时取消 GridView 编辑模式。许多人在论坛上提出了这个问题，但至今仍未得到解答。让我们学习和探索。

有逻辑吗？

当然有，而且非常简单。当点击 GridView 默认的编辑按钮在特定行上时，它会为每个单元格显示一个 TextBox，以及一个 Update 和 取消 按钮。因此，我们只需要找到那个取消按钮并明确地触发它的Click事件，就完成了。

看起来很简单，但如何实现呢？

借助jQuery，它总是让开发人员的生活更轻松。
好的，让我们点击第一行上的编辑按钮。您可以看到一个 TextBox、更新和取消按钮出现在该行上。

参考生成的HTML（下图），我们可以看到取消按钮没有任何与它关联的 Identity (ID) 属性。

<a href="javascript:__doPostBack('gvTestEscapePress','Cancel$0')">Cancel</a>

所以，这里唯一的选择是找到文本为“取消”的按钮。

Using the Code

对于 GridView 编辑

我为编辑按钮添加了一个 CommandField。您也可以使用 AutoGenerateEditButton="true"。

<asp:GridView ID="gvTestEscapePress" 
              runat="server" 
              OnRowEditing="gvTestEscapePress_RowEditing"
              OnRowUpdating="gvTestEscapePress_RowUpdating" 
              OnRowCancelingEdit="gvTestEscapePress_RowCancelingEdit">
    <Columns>
        <asp:CommandField ShowEditButton="true" HeaderText="Edit" />
    </Columns>
</asp:GridView>

为了处理编辑、更新和取消事件，我们在 GridView 标记内声明了相应的事件（OnRowEditing、OnRowUpdating 和 OnRowCancelingEdit）。
现在，让我们在后台代码页中定义这些事件。

/// <summary>
/// This Event shows a particular Row in Editing Mode.
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void gvTestEscapePress_RowEditing(object sender, GridViewEditEventArgs e)
{
    // Set the New Edit Index.
    gvTestEscapePress.EditIndex = e.NewEditIndex;

    // Bind data to the GridView control.
    BindGrid();
}

/// <summary>
/// This Event Cancels the Row Editing on Cancel Button Click.
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void gvTestEscapePress_RowCancelingEdit(Object sender, 
                                                         GridViewCancelEditEventArgs e)
{
    // Reset the edit index.
    gvTestEscapePress.EditIndex = -1;

    // Bind data to the GridView control.
    BindGrid();
}

在这里我没有编写更新事件的代码，因为它在我们的讨论中并不重要。您可以通过下载 源代码 来查看该事件。

对于Escape键按下

我们将使用以下代码来检查 Event KeyCode。 如果是 27，它将指向 Escape 键。

<script type="text/javascript">
    $(document).keyup(function (e) {
        if (e.keyCode == 27) {
            // Here we will put the Cancel GridView Editing Logic.    
        }
    });
</script>

用于取消 GridView 编辑模式

1. 在这里，我们通过 .find('a') 在 GridView 内部搜索所有 anchor (a) 标签。
2. 然后为了只获得取消按钮，我们需要使用 .filter(function () { return $(this).text() === "Cancel" }) 通过 Text 进行过滤。
3. 现在，只需通过 .click() 点击按钮即可。 在此之前，我只是显示一条消息，并在 .fadeOut() 函数上，我正在点击该按钮。

<script type="text/javascript">
    $(document).keyup(function (e) {
        if (e.keyCode == 27) {
            // Find the Generated Cancel Button for the Row in Edit Mode.
            var cancelButton = $('#<%= gvTestEscapePress.ClientID %>')
                               .find('a')
                               .filter(function () { return $(this).text() === "Cancel" });

            // If Cancel Button is found, then show message and click the Cancel Button.
            if (cancelButton != null && cancelButton.length > 0) {
                $("#lblShowMessage")
                .html("You pressed Escape. Cancelling the GridView Edit...")
                .fadeOut(3000, function () {
                    buttonClick(cancelButton[0]);
                });
            }
        }
    });

    // This function fires the Button Click Event.
    function buttonClick(button) {
        button.click();
    }
</script>

您喜欢这篇文章吗？

欢迎评论。 如果您觉得有趣，请点赞并分享该博客。
CodeProject