Gridview Edit update Delete by on row click Asp.net答案

【问题标题】：Gridview Edit update Delete by on row click Asp.netGridview Edit update Delete by on row click Asp.net
【发布时间】：2014-07-12 00:37:47
【问题描述】：

更新和取消按钮不起作用，这些按钮在网格视图之外

场景： 默认 asp.net gridview 设计的问题是 GridView 编辑列总是占用一些屏幕空间。此外，在编辑模式下，GridView 水平扩展，扰乱了页面布局。这就是为什么我想呈现一个可编辑的 GridView 而不显示默认的编辑、更新和取消按钮

示例：

我已经做了什么

当您看到 Gridview 的 html 源代码时，您会发现以下编辑、更新、取消链接按钮，其中包含一个名为 dopostback 的事件

例如

<a href="javascript:__doPostBack(ctl00$ContentPlaceHolder1$GridView2;Edit${1};)">Edit</a>

如果您以某种方式生成相同的上述脚本并为某些客户端事件（例如单击按钮）执行它，那么您基本上可以将相同的命令发送到 GridView 控件。最简单的方法是处理 GridView 控件的 RowDataBound 事件，所以我决定在 Gridview 控件的 RowDataBound 事件上使用它，如下所示：

protected void GridView2_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            if (e.Row.RowIndex == GridView2.EditIndex)
            {
                //update or cancel buttons
                LinkButton updateBtn = (LinkButton)e.Row.Cells[0].Controls[0];
                string updateScript = ClientScript.GetPostBackClientHyperlink(updateBtn, "");
                Button1.Attributes["onclick"] = updateScript;

                string cancelScript = string.Format("javascript:__doPostBack('ctl00$ContentPlaceHolder1$GridView2','Cancel${1}')",
                                      GridView1.ID, e.Row.RowIndex);
                Button2.Attributes["onclick"] = cancelScript;
            }
            else
            {
                //edit button
                string editScript = string.Format("javascript:__doPostBack('ctl00$ContentPlaceHolder1$GridView2','Edit${1}')",
                                    GridView1.ID, e.Row.RowIndex);
                e.Row.Attributes["onclick"] = editScript;
            }

        }
        if (GridView2.EditIndex >= 0)
        {
            Button1.Enabled = true;
            Button2.Enabled = true;
        }
        else
        {
            Button1.Enabled = false;
            Button2.Enabled = false;
        }
    }

现在，当我单击 gridview 的任何行时，它将成为一个可编辑的行，应该通过 gridview 之外的取消和更新按钮取消和更新，但它们不起作用......

任何帮助或建议将不胜感激。

注意：您仍然需要在 Gridview 中包含编辑、更新、取消链接按钮，稍后您可以使用下面的 jquery 之类的脚本将其从 gridview 中隐藏。

例如

$(document).ready(function () {
    $("#GridView2 th:first-child").hide();
    $("#GridView2 td:first-child").hide();
});

【问题讨论】：

你在处理OnRowCancelingEdit,OnRowUpdatinggridview的事件吗？
@HassanNisar 不，我不是我只是在处理编辑、更新和删除链接按钮的 dopostback 事件的生成事件编辑按钮的 __doPostBack() 调用将 GridView 的 ID 作为第一个参数和Edit$ 形式的行号作为第二个参数。 Update 按钮的 __doPostBack() 调用将第一个参数作为控件的唯一 ID 传递。 Cancel 按钮的 __doPostBack() 与 Edit 按钮非常相似，只是使用的命令名称不是 Edit 而是 Cancel
请远离直接调用 __doPostback，这是一个可怕的 hack，因为 doPostback 有下划线是有原因的（应该被认为是私有的）。我会尽快发布一个应该有帮助的答案。
@julealgon 我不害怕直接使用 dopostback 因为它可以轻松处理以防止任何黑客攻击。等待您的回复
@SiddiqBaig 你在哪里更新行？ updateBtn 是否有任何服务器端事件处理程序？

标签： c# asp.net gridview

【解决方案1】：

据我了解，您只是想将网格内部的编辑/更新按钮删除到外部位置。

您可以以编程方式设置网格的编辑索引by setting it's EditIndex property to the index you want。您当然可以根据当前选定的网格行做出此决定。

之后，您需要对网格进行数据绑定并将按钮从“编辑”更改为“更新”（如果您使用的是类似切换的解决方案）或根据需要启用/禁用它们。

然后，更新逻辑可以使用 Grid 上的 UpdateRow 方法来持久化更改。您可以按照示例here 查看如何以编程方式强制编辑。在您的情况下，单击按钮时，您需要传入当前的编辑索引，如下所示：

myGrid.UpdateRow(myGrid.EditIndex, true);

编辑：

我完全绕过了您希望在单击行时进行编辑的事实，这并不容易做到，因为单击行不会导致回发。您可能可以使用this 之类的东西来达到这种效果。它基本上归结为在服务器上创建时在整行上设置客户端事件。不过我还没有测试过，我个人认为这部分完全应该是另一个问题，因为它可以被隔离为“如何从网格视图的行点击中引起回发”。

【讨论】：

是的，你明白我的意思，我想从 gridview 中删除编辑更新按钮。但是你不能通过使用 Gridview 的 EditIndex 来完成这个任务，因为你需要把取消，更新按钮放在里面网格视图
@julealgon 你能解释更多吗。如何使用UpdateRow？
@SiddiqBaig 我提到您也可以使用UpdateRow 方法从外部强制更新行。如果我没记错的话，您可以通过将EditIndex 设置为 -1 来取消编辑。这不就是你想要达到的吗？
我收到了你的品脱，我会尽快试试
@HassanNisar 用更多信息更新了问题，希望它足以理解。

【解决方案2】：

我找到了解决方案。将您的 GridView1_RowDataBound 函数体替换为：

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            if (e.Row.RowIndex == GridView1.EditIndex)
            {
                //update or cancel buttons
                LinkButton updateBtn = (LinkButton)e.Row.Cells[0].Controls[0];
                string updateScript = string.Format("document.getElementById('{0}').click(); return false;", updateBtn.ClientID);
                Button1.OnClientClick = updateScript;

                LinkButton cancelBtn = (LinkButton)e.Row.Cells[0].Controls[2];
                string cancelScript = string.Format("document.getElementById('{0}').click(); return false;", cancelBtn.ClientID);
                Button2.OnClientClick = cancelScript;
            }
            else
            {
                //edit button
                LinkButton editBtn = (LinkButton)e.Row.Cells[0].Controls[0];
                string editScript = string.Format("document.getElementById('{0}').click();", editBtn.ClientID);
                e.Row.Attributes["onclick"] = editScript;
            }

        }
        if (GridView1.EditIndex >= 0)
        {
            Button1.Enabled = true;
            Button2.Enabled = true;
        }
        else
        {
            Button1.Enabled = false;
            Button2.Enabled = false;
        }
    }

首先，我摆脱了对 __doPostBack 的 js 调用，这不是 cmets 中提到的 julealgon 的好习惯。相反，我构建了执行 getElementById 的脚本，通过唯一的客户端 ID 搜索特定的链接按钮并模拟该链接上的“点击”。所有链接按钮仍在表单上，但在您调用 document.ready 脚本时被隐藏，因此您不会收到 js error 'item not found...'

第二个非常重要的事情是在 Button1 和 Button2 的 OnClientClick 脚本末尾返回“false”（OnClientClick 与 Attributes["onclick"] 的工作方式相同）。

这是为了防止按钮回发，而不会由按钮本身触发另一个回发，并且因为没有在服务器端实现重新绑定网格并设置 editindex 的 OnClick 事件，一些信息会丢失，并且当触发“网格”回发时（正确一，由链接按钮引起的）它不起作用。

我的答案假定所有网格的服务器端事件（如 RowUpdating、RowCancelingEdit 和 RowEditing）都有效，或者您的网格具有实现这些的相关 SqlDataSource 或 ObjectDataSource。换句话说，我假设如果您在网格行中使用生成的 Edit、Update、Cancel 按钮，一切都会按预期工作。

【讨论】：