按钮在Gridview中编辑行

Question

我有Gridview这样的

<div id="gridScroll" style="width: 100%; height: calc(100vh - 310px); overflow: auto">
        <asp:GridView ID="gridRoles" runat="server" Width="100%" AutoGenerateColumns="False" Font-Names="Arial" PageSize="12"
            Font-Size="11pt" CssClass="textGrid" AlternatingRowStyle-BackColor="#CED8F6" HeaderStyle-BackColor="#F2F2F2"
            AllowPaging="True" OnPageIndexChanged ="IndexChanged" OnPageIndexChanging ="PageChange" OnRowDataBound="gridroles_RowDataBound" OnRowEditing="editRow">
            <Columns>
               <asp:TemplateField HeaderText="Action">
                    <ItemTemplate>
                        <asp:Button ID="btnEdit" runat="server" text="Edit" OnCliendClick="btnEditClick()" />
                        <asp:Button ID="btnAdd" runat="server" text="Add" OnClientClick="btnAddClick()" Visible="false"/>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:BoundField DataField="First Name" HeaderText="First Name" />
                <asp:BoundField DataField="Last Name" HeaderText="Last Name" /
            </Columns>
            <HeaderStyle BackColor="#A9BCF5" />
            <AlternatingRowStyle BackColor="#CED8F6" />
        </asp:GridView>
 </div>

数据从后端绑定

        DataTable dt = new DataTable();
        dt.Columns.Add("Action");
        dt.Columns.Add("First Name", typeof(string));
        dt.Columns.Add("Last Name", typeof(string));

        for (int i = 0; i < credentials.Count; i++)
        {
            DataRow row1 = dt.NewRow();
            row1["First Name"] = credentials[i].FirstName.ToString();
            row1["Last Name"] = credentials[i].LastName.ToString();
            dt.Rows.Add(row1);
        }
        DataRow row2 = dt.NewRow();
        dt.Rows.Add(row2);
        gridRoles.DataSource = dt;
        gridRoles.DataBind();

我有点击编辑按钮时调用的方法btnEditClick()。

function btnEditClick() {
        var target = event.target || event.srcElement;
        target.id = "btnEdit";
        target.style.display = 'none';

        var cancel = document.getElementById("btnCancel");
        if (cancel != null)
            cancel.click();

        var row = target.parentElement.parentElement;
        var cells = row.cells;
        var hdn = document.createElement("input");
        hdn.type = "hidden";
        hdn.id = "hdnId";
        hdn.name = "hdnId";
        hdn.value = cells[1].innerHTML;
        cells[0].appendChild(hdn);

        for (var i = 2; i < 11; i++) {
            //2, 3,4 , 10 textboxes
            if (i == 2 || i == 3 || i == 4 || i == 10) {
                var txt = document.createElement("input");
                txt.value = cells[i].innerHTML;
                txt.alt = cells[i].innerHTML;
                txt.name = "txt" + i;
                txt.maxLength = 50;
                txt.style.width = "95%";
                cells[i].innerHTML = "";
                cells[i].appendChild(txt);
            }
            //this is for a dropdownlist for other columns in gridview I will add
            if (i >= 5 && i < 10) {
                var ddl = document.createElement("select");
                var option = document.createElement("option");
                option.setAttribute("value", "TRUE");
                option.innerHTML = "TRUE";
                ddl.appendChild(option);
                var option2 = document.createElement("option");
                option2.setAttribute("value", "FALSE");
                option2.innerHTML = "FALSE";
                ddl.appendChild(option2);
                if (cells[i].innerHTML == "False") {
                    ddl.selectedIndex = 1;
                }
                ddl.name = "DDL" + i;
                ddl.alt = cells[i].innerHTML;
                cells[i].innerHTML = "";
                cells[i].appendChild(ddl);
            }
        }
        var btnCancel = document.createElement("button");
        var Confirm = document.getElementById("cph_body_btnConfirm");

        btnCancel.textContent = "Cancel";
        btnCancel.id = "btnCancel";

        btnCancel.onclick = cancelClick;
        cells[0].appendChild(Confirm);
        cells[0].appendChild(btnCancel);

        return false;

问题是，当我点击编辑按钮时，它似乎进入编辑模式。所有正确的文本框和下拉列表都会显示，但大约一秒钟后它会消失，并且行会返回到单击按钮之前的状态。我不确定Gridview是否会让人耳目一新。什么会导致这个问题？