asp:panel show hide 不适用于 Jquery

Question

我在 ASPX 页面上有两个面板和一个文本框。两个面板都包含静态文本以及单选按钮以及必填字段验证器。要求如下。

1. 第一次加载页面时，如果文本框的值大于 1000，则不应显示第一个面板，而应显示第二个面板。
2. 如果值小于 1000，则应显示第一个面板，而不应显示第二个面板。

现在，问题是：

文本框的值可以由用户更改，因此取决于输入的值，使用 jQuery 我需要显示适当的面板。我不想为每个静态文本设置标签，然后为所有标签和单选按钮一一设置相同的属性；这就是我使用<asp:Panel> 的原因。

1. 我无法从后面的代码中将可见属性设置为 false，因为这样该面板将不会在 ASPX 页面上呈现并显示，隐藏将不起作用。
2. 我尝试从后面的代码中设置panelNA.Style.Add(HtmlTextWriterStyle.Display, "none")，但这也不起作用。因为静态文本和控件在 UI 上仍然可见。
3. 由于我需要在面板内的单选按钮上使用字段验证器，因此我希望在面板分别隐藏或显示时禁用和启用这些验证器。
4. 保存内容时，我无法检查面板的状态是否可见，因为它是由 jQuery 设置的。所以它在服务器端不可用，它总是说visible = true。

代码：

function disablePanelNA() {
  var value = 0;
  value = parseInt($('#<%=txt1.ClientID %>').val(), 10);
  if (value < 1000) {
   $('#<%= panel.ClientID %>').hide();
   $('#<%= panelNA.ClientID %>').show();
  }
  else
  {
    $('#<%= panel.ClientID %>').show();
    $('#<%= panelNA.ClientID %>').hide();
  }
}
<asp:TextBox ID="txt1" runat="server" onChange="disablePanelNA()" />
<asp:Panel ID="panel" runat="server">
<tr>
  <td class="numberColumnNoBold">a.</td>
  <td>Do you want to continue?</td>
  <td align="right">
    <asp:RadioButtonList ID="rbl1" runat="server" RepeatDirection="Horizontal">
      <asp:ListItem Value="Yes" Text="Yes" />
      <asp:ListItem Value="No" Text="No" />
    </asp:RadioButtonList>
    <AjaxRequiredFieldValidator ID="id1" runat="server" ControlToValidate="rbl1" 
                                ErrorMessage="Error occured" />
  </td>
</tr>
<tr>
  <td class="numberColumnNoBold">b.</td>
  <td>Do you want to exit?</td>
  <td align="right">
    <asp:RadioButtonList ID="rbl2" runat="server" RepeatDirection="Horizontal">
      <asp:ListItem Value="Yes" Text="Yes" />
      <asp:ListItem Value="No" Text="No" />
    </asp:RadioButtonList>
    <AjaxRequiredFieldValidator ID="id2" runat="server" ControlToValidate="rbl2"
                                ErrorMessage="Error occured again" />
  </td>
</tr>
</asp:panel>

<asp:Panel ID="panelNA" runat="server">
<tr>
  <td class="numberColumnNoBold">a.</td>
  <td>Do you want to continue?</td>
  <td align="right">
    <td align="right">
      <div style="text-align:right;font-weight:bold;padding-right:20px;">N/A</div>
    </td>
  </td>
</tr>
<tr>
  <td class="numberColumnNoBold">b.</td>
  <td>Do you want to exit?</td>
  <td align="right">
    <div style="text-align:right;font-weight:bold;padding-right:20px;">N/A</div>
  </td>
</tr>
</asp:panel>

Answer 1

如果在 .aspx 标记/代码后面设置 Visible="false"，ASP.Net 控件将不会在页面中呈现。

最好去掉面板中设置的 Visible="false" 并添加样式 display:none。

如果你想在后面的代码中制作它，请遵循此代码

pnlUpdateDisplay.Style.Add(HtmlTextWriterStyle.Display,"none");

然后使用

$('#<%=pnlUpdateDisplay.ClientID %>').toggle()

Answer 2

在后面的代码中使用这个

pnl.Style.Add("display", "none");

要从 javascript 中禁用验证器，请使用此

ValidatorEnable(document.getElementById('<%= reqfile.ClientID %>'), false);
ValidatorEnable(document.getElementById('<%= reqfile.ClientID %>'), true);

为了显示隐藏 div，您不需要知道 div 的可见状态，因为根据您提到的逻辑，div 将根据文本框的值隐藏或显示。

另外请在粘贴前格式化您的代码。