javascript - 在客户端设置显示没有任何 asp 面板在任何 linkBut​​tonclick 上重新显示它

Question

我正面临一个关于 asp 面板可见性的奇怪问题。我有一个小窗体，它在面板内包含一个按钮，使 div 可见。

<div id="myModal" class="modal" style="display: none">
 <span onclick="CloseMyDiv();" id="closeSpan" class="close">×</span>
    <!-- Modal content --> 
</div>

<asp:Panel ID="pnlHasPriorApproval" runat="server" Style="display: none">
   <input onclick="ShowModal();" type="button" value="Extract" runat="server" />
</asp:Panel>

下面是javascript函数:

function ShowModal() {
    $('#myModal').show();
 }

 function CloseMyDiv() {
            var modal = document.getElementById('myModal'); // this is my div
            var pnlHasPriorApproval = document.getElementById('<%=  pnlHasPriorApproval.ClientID %>');  // this is my pannel
pnlHasPriorApproval.style.display = "none"; // hiding pannel
modal.style.display = "none"; // hiding div
}

过程是:每当我点击这个按钮时，div 就会显示出来，而每当我点击关闭时，div 和面板都应该被隐藏......这是完美的。但是:每当我单击它时，我都会有另一个按钮，面板会再次显示，而它应该保持隐藏状态。

此按钮由服务器端的函数处理:

Protected Sub lnkBtnphyCode_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles lnkBtnphyCode.Click
....
End Sub

我确信服务器端没有任何东西改变我的面板在这个函数中的可见性，无论是在加载页面事件中。无论如何，我已经在一个带有新 ID“testDiv”的 div 中实现了我的面板，以确保它没有在其他任何地方使用，并且我已经用它完成了相同的过程(过程是隐藏这个 div onclick)并且它仍然出现在任何时候我点击 lnkBtnphyCode。

尝试过的解决方案:

1. 我通过设置 visibility:hidden 而不是使用 display 来尝试相同的过程......但我遇到了同样的问题

2. 我在我的 lnkBtnphyCode_Click 方法中添加了 Dim v = Me.pnlHasPriorApproval.Visible，v 返回 true 这很奇怪，因为我已经将它隐藏起来，正如您在开头看到的.

3. 让它始终隐藏并且不在单击时显示的唯一方法是更改​​服务器端的可见性，我不明白为什么它并不总是对 javascript(客户端)隐藏。

我的问题是:如何让它始终对 Javascript 隐藏？

Answer 1

JavaScript 代码在客户端执行，ASP.Net 在服务器端执行。除非 JS 代码与服务器共享当前状态信息，否则您的 ASP.Net 代码将不知道 JS 代码所做的更改。

当您点击按钮时，只有表单数据被提交到服务器。因此，div 和面板现在被隐藏的信息不会被传递(这是正常行为)。如果您想将它传递到服务器，您将需要使用一些隐藏的表单字段显式发送此信息。

你可以做的是:

1. 在页面上创建一个隐藏控件，比如 isPanelVisible。
2. 隐藏div/panel时，使用JS代码在隐藏控件中设置一个true。
3. 在服务器端代码中的 Page_Load 上，检查此隐藏控件的值并相应地设置面板的可见性。

这是处理此类情况的典型方式。