Gridview中的Javascript导致其他事件触发？

Question

我大致遵循this link的概念。模拟嵌套的GridView。 它看起来像这样：

基本上我正在创建第二行display:none并希望使用JavaScript切换它。

JavaScript和aspx代码：

<script type="text/javascript" language="JavaScript">
    function detailsToggle(Company_ID) {
        try {
            detail_row = document.getElementById('detailsRow_' + Company_ID);
            parent_row = document.getElementById('parentRow_' + Company_ID);
            img = parent_row.cells[0].firstChild;

            if (detail_row.className !== 'hidden') {
                detail_row.className = detail_row.className + ' hidden';
                img.src = '../Images/icons/+.gif';
            }
            else {
                detail_row.className = detail_row.className.replace(/\bhidden\b/, '');
                img.src = '../Images/icons/-.gif';
            }
        }
        catch(ex) { alert(ex); }
    }
</script>
<style type="text/css">
    .hidden 
    {
        display: none;
    }
</style>
<asp:GridView ID="gvLegalEntityBrowser" DataKeyNames="Company_ID" AutoGenerateColumns="False"
    runat="server" CellPadding="4" ForeColor="#333333" GridLines="None" 
    OnRowDataBound="gvLegalEntityBrowser_RowDataBound" OnPageIndexChanging="pagingIndexChanged"
    AllowPaging="True" PageSize="25" AllowSorting="false">
    <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
               <%--Placeholder --%>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="CompanyCode" HeaderText="CompanyCode" SortExpression="CompanyCode" />
        <asp:BoundField DataField="CompanyName" HeaderText="CompanyName" SortExpression="CompanyName" />
    </Columns>
    <EmptyDataTemplate>No data</EmptyDataTemplate>
    <EditRowStyle BackColor="#999999" />
    <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
    <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
    <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
    <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
    <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
    <SortedAscendingCellStyle BackColor="#E9E7E2" />
    <SortedAscendingHeaderStyle BackColor="#506C8C" />
    <SortedDescendingCellStyle BackColor="#FFFDF8" />
    <SortedDescendingHeaderStyle BackColor="#6F8DAE" />
</asp:GridView>

...和我的apsx.cs RowDataBound方法：

//Idea from : http://www.codeproject.com/Articles/160773/Expandable-Rows-in-GridView
protected void gvLegalEntityBrowser_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        GridViewRow gvRow = e.Row as GridViewRow;
        Int64 iCompanyID = 0;   //Get Company_ID for Legal Entity Row
        iCompanyID = System.Convert.ToInt64(gvLegalEntityBrowser.DataKeys[gvRow.RowIndex]["Company_ID"]);
        GridView gvLegalEntityRelation = new GridView();
        gvRow.ID = "parentRow_" + iCompanyID;
        gvRow.ClientIDMode = ClientIDMode.Static;   //Set HTML ID element = control.ID

        //Add javascript toggle button to each row
        System.Web.UI.WebControls.ImageButton toggleButton = new System.Web.UI.WebControls.ImageButton();
        toggleButton.ID = "btnToggle_" + iCompanyID;
        toggleButton.ImageUrl = "../Images/icons/+.gif";
        toggleButton.OnClientClick = "detailsToggle(" + (iCompanyID) + ")";
        gvRow.Cells[0].Controls.Add(toggleButton);
        toggleButton.Attributes.Add("onmouseover","this.style.cursor='hand'");
        toggleButton.Attributes.Add("onmouseout", "this.style.cursor='default'");

        using (dsLegalEntitiesTableAdapters.View_LegalEntityRelationCountTableAdapter daLERelCount = new dsLegalEntitiesTableAdapters.View_LegalEntityRelationCountTableAdapter())
        {
            //Set Details Data Source
            gvLegalEntityRelation.DataSource = daLERelCount.GetRelationsDataByCompanyID(iCompanyID);
            gvLegalEntityRelation.AutoGenerateColumns = true;

            GridViewRow detailsgvRow = new GridViewRow(gvRow.RowIndex + 1, -1, DataControlRowType.EmptyDataRow, DataControlRowState.Normal);
            detailsgvRow.CssClass = "hidden";
            detailsgvRow.ID = "detailsRow_" + iCompanyID;
            detailsgvRow.ClientIDMode = ClientIDMode.Static;    //Set HTML ID element = control.ID
            TableCell cell = new TableCell();
            cell.ColumnSpan = 4;
            cell.BorderStyle = BorderStyle.None;
            cell.Controls.Add(gvLegalEntityRelation);
            detailsgvRow.Cells.Add(cell);
            ((GridView)sender).Controls[0].Controls.Add(detailsgvRow);

            gvLegalEntityRelation.DataBind();
        }
    }
}

JavaScript工作正常，我甚至可以看到正确的结果：

...但是父GridView重建为这样的东西：

问：有没有人知道可能导致GridView重建的原因？

Answer 1

所以......问题其实很基本。一位同事向我指出了这一点。

我使用ImageButton来扩展内部表。 .NET图像按钮具有Click处理程序和ClientClick处理程序。 Click告诉你在PostBack上做什么，ClientClick传递给JavaScript。

显然，即使我没有为Click定义目标函数，页面仍然会进行Post-Back。因此，首先javascript工作，然后页面进行回发，弄乱了页面。

解决方案：使用javascript点击事件为简单图片交换ImageButton。