javascript - Javascript in Gridview causes other event to fire?

Question

I'm roughly following the concept from this link. To simulate a nested GridView. It looks like this:

Basically I'm creating a second row which is display:none and want to toggle it using JavaScript.

JavaScript and aspx code:

<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>

... and my apsx.cs RowDataBound Method:

//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();
        }
    }
}

The JavaScript works fine, and I even see the correct Result for a split second:

... but the the parent GridView rebuilds into something like this:

Q: Does anyone have an Idea what may be causing the GridView to rebuild??

Answer 1

所以......这个问题实际上是非常基本的。一位同事向我指出了这一点。

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

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

解决方案：将 ImageButton 交换为带有 javascript 的 click-event 的简单图像。