javascript - 无法将表隐藏在 asp.net 中

Question

我有一个问题，其中名为 #viewPackage 的 div 标记中的表出现了，即使它不应该触发。我的代码如下:

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true">
       <Scripts>
            <asp:ScriptReference Name="jquery" />
            <asp:ScriptReference Name="jquery.ui.combined" />
       </Scripts>
</asp:ScriptManager>
<asp:UpdatePanel ID="updatePanel1" runat="server" UpdateMode="Conditional">
  <ContentTemplate>
    <div id="grid">
      <asp:DropDownList runat="server" ID="ddlTireViewTypes"  DataSourceID="viewTypes" DataTextField="TireType" DataValueField="TireId" AutoPostBack="True" AppendDataBoundItems="True" OnSelectedIndexChanged="viewTirePackages_SelectedIndexChanged">
            <asp:ListItem Text="Alle" Value="0"></asp:ListItem>
    </asp:DropDownList>
    <asp:SqlDataSource ID="viewTypes" runat="server" ConnectionString="<%$ ConnectionStrings:CarsConnectionString %>" SelectCommand="select TireId, TireType from tbl_mas_tire_settings where Tiresettingstype = 'Tiretype'"></asp:SqlDataSource>

    <asp:GridView ID="gvTirePackageList" HeaderStyle-BackColor="#4b6c9e" DataKeyNames="Seq_No" HeaderStyle-ForeColor="White" AutoGenerateColumns="false" runat="server" OnRowCommand="gvTirePackageList_RowCommand">
        <Columns>
            <asp:BoundField DataField="Seq_No" HeaderText="Id" ItemStyle-Width="20" SortExpression ="Seq_No"/>
            <asp:BoundField DataField="tirePackageNo" HeaderText="Dekkpakke" ItemStyle-Width="20" SortExpression ="tirePackageNo"/>
            <asp:BoundField DataField="regNo" HeaderText="Regnr" ItemStyle-Width="20" SortExpression ="regNo"/>
            <asp:BoundField DataField="custNo" HeaderText="Kundenr" ItemStyle-Width="20" SortExpression ="custNo"/>
            <asp:BoundField DataField="custName" HeaderText="Kundenavn" ItemStyle-Width="200" SortExpression ="custName"/>
            <asp:BoundField DataField="location" HeaderText="Lokasjon" ItemStyle-Width="20" SortExpression ="location"/>
            <asp:BoundField DataField="tireTypeDesc" HeaderText="Dekktype" ItemStyle-Width="20" SortExpression ="tireTypeDesc"/>
            <asp:BoundField DataField="tireQualityDesc" HeaderText="Dekkvalitet" ItemStyle-Width="20" SortExpression ="tireQualityDesc" />
            <asp:BoundField DataField="tireDepthDesc" HeaderText="Dekkdybde" ItemStyle-Width="20" SortExpression ="tireDepthDesc"/>
            <asp:BoundField DataField="regDate" HeaderText="Regdato" ItemStyle-Width="20" SortExpression ="regDate"/>
            <asp:BoundField DataField="outDate" HeaderText="Forv. ut dato" ItemStyle-Width="20" SortExpression ="outDate"/>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:LinkButton ID="viewTirePackage" CssClass="viewTirePackageClass" Text="Vis" CommandName="viewTirePackage" CommandArgument='<%#Eval("Seq_No")%>' runat="server" />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:LinkButton ID="newTirePackageOrder" Text="Ny ordre" CommandName="newTirePackage" CommandArgument='<%#Eval("Seq_No")%>' runat="server" width="60"/>
                </ItemTemplate>
         </asp:TemplateField>
            <asp:TemplateField>
             <ItemTemplate>
                    <asp:LinkButton ID="deleteTirePackage" Text="Slette" CommandName="deleteTirePackage" CommandArgument='<%#Eval("Seq_No")%>' runat="server" />
                </ItemTemplate>
         </asp:TemplateField>
        </Columns>
    </asp:GridView>
</div>

<div id="viewPackage">
    <span class="closePackage">X</span>
<table>
    <tr>
        <td>
            Dekkpakkenr:<br />
            <asp:TextBox ID="viewTirePackageNo" runat="server" Width="100"></asp:TextBox>
        </td>
        <td>
            Regnr:<br />
            <asp:TextBox ID="viewTireRegNo" runat="server" Width="100"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td>
            Dekktype:<br />
            <asp:DropDownList runat="server" ID="ddlEditTireTypes" DataSourceID="SqlDataSource1" DataTextField="TireType" DataValueField="TireId" AutoPostBack="True" AppendDataBoundItems="true">
                <asp:ListItem Text="Velg..." Value=""></asp:ListItem>
            </asp:DropDownList>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:CarsConnectionString %>" SelectCommand="select TireId, TireType, TireTypeVariable from tbl_mas_tire_settings where Tiresettingstype = 'Tiretype'"></asp:SqlDataSource>
        </td>
        <td>
            Med/Uten pigg:<br />
             <asp:DropDownList runat="server" ID="ddlEditTireSpikes" DataSourceID="SqlDataSource2" DataTextField="TireSpikes" DataValueField="TireId" AutoPostBack="true" AppendDataBoundItems="true">
                <asp:ListItem Text="Velg..." Value=""></asp:ListItem>
            </asp:DropDownList>
            <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:CarsConnectionString %>" SelectCommand="select TireId, TireSpikes from tbl_mas_tire_settings where Tiresettingstype = 'TireSpike'"></asp:SqlDataSource>
        </td>
     </tr>
     <tr>
        <td>
             <asp:button ID="btnEditTireSave" CssClass="closePackage" runat="server" Text="Oppdater" OnClick="btnEditTireSave_Click" />
        </td>
    </tr>
</table>
</div>

VB.NET代码如下:

Protected Sub viewTirePackages_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles ddlTireViewTypes.SelectedIndexChanged
     Call gvTirePackages()
     updatePanel1.Update()
End Sub

其中 gvTirePackage() 正在填充 gridview。我正在使用 jQuery 显示/隐藏表格，代码如下:

$(document).ready(function () {
   $('#viewPackage').removeClass('animate visible').addClass('hidden');

   $('body').on("click", '.closePackage', function (e) {
       $('#viewPackage').removeClass('visible').addClass('animate hidden');
    });

    $('body').on('click','.viewTirePackageClass', function () {
        $('#viewPackage').removeClass('hidden').addClass('animate visible'); 
    });
});

我的 CSS 看起来像这样:

#viewPackage {
position: fixed;
width: 70%;
top: 0;
bottom: 0;
background: #fff;
min-height: 100%;
left: 0;
}
#viewPackage.animate {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#viewPackage table {
margin: 10% auto;
}
.closePackage {
font-weight: 800;
float: right;
margin-right: 0.7em;
font-size: 2em;
cursor: pointer;
}

我在页面上使用更新面板。 gridview，正在制作我们实际上在页面加载时隐藏的表格，在使用下拉列表时出现。第一个线索是停止。其次是使链接按钮以相同的方式工作，因为现在它只是出现而没有动画，这告诉我它没有按预期工作。如果您需要查看更多代码，请告诉我，我会将其粘贴到此处或发送给您。

提前感谢您提供任何提示或线索!

Answer 1

我成功了。我所做的是放入 2 个 updatePanel 并将 updatepanel 放在 div 标签“virePackage”中。 div 标签本身使它刷新，因此它再次跳回。现在一切正常。