Gridview 编辑更新删除通过单击Asp.net

Question

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

场景： 默认的 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();
});

Answer 1

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

您可以通过编程方式设置网格的编辑索引，通过将其

EditIndex

属性设置为您想要的索引。您当然可以根据当前选定的网格行来做出此决定。

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

然后，更新的逻辑可以使用网格上的

UpdateRow

 方法来保存更改。您可以按照

此处的示例了解如何以编程方式强制进行编辑。在您的情况下，单击按钮时，您需要传入当前编辑索引，如下所示：

myGrid.UpdateRow(myGrid.EditIndex, true); 编辑：

我完全忽略了您希望编辑在行单击时发生的事实，但这并不容易做到，因为单击行不会导致回发。您可能可以使用类似

this 的东西来达到这种效果。它基本上可以归结为在服务器上创建时在整行上设置客户端事件。不过我还没有测试过，我个人认为这部分完全应该是另一个问题，因为它可以被隔离为“如何从网格视图的行单击引起回发”。

Answer 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 调用，这并不是很好的做法，正如 julealgon 在评论中提到的那样。相反，我构建了执行 getElementById 的脚本，通过唯一的客户端 ID 搜索特定的链接按钮并模拟该链接上的“单击”。所有链接按钮仍在表单上，但在调用 document.ready 脚本时隐藏，因此您不会收到 js 错误“未找到项目...”

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

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

我的答案假设所有网格的服务器端事件（如 RowUpdating、RowCancelingEdit 和 RowEditing）都可以工作，或者您的网格具有实现这些事件的相关 SqlDataSource 或 ObjectDataSource。换句话说，我假设如果您使用网格行中生成的“编辑”、“更新”、“取消”按钮，那么一切都会按预期工作。