为什么我的嵌套 gridview 只显示一瞬间？

Question

我在网格视图 (grdPreIntakes) 中嵌套了网格视图 (grdAttachments)。 grdPreIntakes 网格显示电子邮件，grdAttachments 网格显示与每封电子邮件相关的任何附件。两个网格视图的数据都很好。 grdPreIntakes 网格视图的第一列有一个 asp:ImageButton（一个加号 ) 如果特定行没有附件，我会隐藏它。

我遇到的问题是，当我单击加号图像以显示附件的嵌套 gridview 时，嵌套 gridview 闪烁显示然后消失。我假设问题出在我的 javascript 中，尽管我不确定。我花了几个小时阅读 javascript 以及与此问题相关的每个 SO 问题，但我没有找到任何相关帮助。

在此先感谢您的帮助。

JavaScript

<asp:Content ID="conScriptContent" ContentPlaceHolderID="ScriptContent" runat="server">
    <script type="text/javascript">

        $(document).on('click','[src*=plus]', function () {
            $(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>")
            $(this).attr("src", "../images/minus.png");
        });

        $(document).on('click','[src*=minus]', function () {
            $(this).attr("src", "../images/plus.png");
            $(this).closest("tr").next().remove();
        });

    </script>
</asp:Content>

HTML

<asp:Content ID="conPageContent" ContentPlaceHolderID="PageContent" runat="server">
    <div><h2>Incoming Mail</h2></div>
    <form id="incomingMail" runat="server">

    <asp:SqlDataSource ID="sdsPreIntakes" runat="server"
        CancelSelectOnNullParameter="false"
        ConnectionString="<%$ ConnectionStrings:IntakeSiteDB %>"
        ProviderName="<%$ ConnectionStrings:IntakeSiteDB.ProviderName %>"
        SelectCommand="SELECT * FROM pre_intakes WHERE pi_active = 1"
        SelectCommandType="Text">
    </asp:SqlDataSource>

    <asp:Button ID="btnPullMail" runat="server" Text="Pull Mail" />

        <asp:GridView ID="grdPreIntakes" runat="server" AutoGenerateColumns="False" CssClass="table table-striped table-condensed"
            DataSourceID="sdsPreIntakes" DataKeyNames="pre_intake_id" AllowSorting="True" 
            AllowPaging="True" PageSize="20"
            BorderWidth="1px" BorderColor="Black">
            <PagerStyle CssClass="cssPager" HorizontalAlign="Center" />
            <HeaderStyle CssClass="cssIntakeList" Font-Bold="true" ForeColor="#D9E4CA" BackColor="#24564A" />
            <Columns>
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:ImageButton ID="btnPlus" runat="server" ImageUrl="../images/plus.png" />
                        <asp:Panel ID="pnlAttachments" runat="server" Style="display: none"> 
                            <asp:GridView ID="grdAttachments" runat="server" AutoGenerateColumns="false" >
                                <Columns>
                                    <asp:BoundField ItemStyle-Width="300px" DataField="original_name" />
                                </Columns>
                            </asp:GridView>
                        </asp:Panel>
                    </ItemTemplate>                
                </asp:TemplateField>
                <asp:BoundField DataField="pi_from" HeaderText="From"
                    SortExpression="pi_from" />
                <asp:BoundField DataField="pi_subject" HeaderText="Summary"
                    SortExpression="pi_subject" ItemStyle-CssClass="subject" />
                <asp:BoundField DataField="pi_date" HeaderText="Date" DataFormatString="{0:d}"
                    SortExpression="pi_date" ItemStyle-CssClass="dateCreated" />
                <asp:BoundField DataField="pi_time" HeaderText="Time"
                    SortExpression="pi_time" ItemStyle-CssClass="timeCreated" />
                <asp:CommandField ShowSelectButton="true" SelectText="Accept"
                    ItemStyle-CssClass="select-button" ControlStyle-Font-Bold="true" >
                    <ItemStyle CssClass="select-button" HorizontalAlign="Center" />
                </asp:CommandField>
            </Columns>
        </asp:GridView>
        <br />
    </form>
</asp:Content>

VB.NET

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not IsPostBack Then
        grdPreIntakes.DataBind()
    End If
End Sub

Private Sub grdPreIntakes_RowDataBound(sender As Object, e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles grdPreIntakes.RowDataBound
    Dim i As Integer = 0
    If e.Row.RowType = DataControlRowType.DataRow Then
        i = e.Row.RowIndex + 1
        Dim preIntakeID As String = grdPreIntakes.DataKeys(e.Row.RowIndex).Value.ToString()
        Dim grdAttachments As GridView = TryCast(e.Row.FindControl("grdAttachments"), GridView)
        Dim btnPlus As ImageButton = CType(e.Row.FindControl("btnPlus"), ImageButton)
        grdAttachments.DataSource = GetPreIntakeAttachments(preIntakeID)
        If Not IsNothing(grdAttachments.DataSource) Then
            grdAttachments.DataBind()
        Else
            If i > 0 Then btnPlus.Visible = False
        End If
    End If
End Sub

Answer 1

<asp:Content ID="conScriptContent" ContentPlaceHolderID="ScriptContent" runat="server">
<script type="text/javascript">

    $("[id*='btnPlus']").on('click', function () {
        if(!$(this).closest("tr").find("table[id*='grdAttachments']").is(":visible")){
             $(this).closest("tr").find("table[id*='grdAttachments']").show();
             $(this).attr("src", "../images/minus.png");
         }
         else
         {

             $(this).closest("tr").find("table[id*='grdAttachments']").hide();
             $(this).attr("src", "../images/plus.png");
         }


    });



</script>

Answer 2

我明白了。我所做的是将 <asp:ImageButton> 更改为 <asp:Image>，它开始正常工作。

为什么我的嵌套 gridview 只显示一瞬间？

Why does my nested gridview only display for a split second?

javascript

vb.net

asp.net

gridview