Question

更新和取消按钮不起作用，这些按钮在gridview

之外

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

示例：

enter image description here

我已经做了什么

当您看到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中。

e.g

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

Answer 1

据我所知，您只是想从网格内部删除编辑/更新按钮到外部位置。

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

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

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

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错误＆＃39;项目未找到...＆＃39;

第二个非常重要的事情是返回＆＃39; false＆＃39;在Button1和Button2的OnClientClick脚本的末尾（OnClientClick的工作方式与属性相同[＆＃34; onclick＆＃34;]）。

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

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

Gridview编辑更新删除按行单击Asp.net

2 个答案: