2012-09-04 60 views
1

我在ASPX頁面上有兩個面板和一個文本框。這兩個面板都包含靜態文本以及單選按鈕以及所需的字段驗證程序。要求如下。asp:panel show hide不能和Jquery一起使用

  1. 每當第一次加載頁面時,如果文本框的值大於1000,則應該不顯示第一個面板,應該顯示第2個。
  2. 如果值小於1000,第一個面板應該顯示,第二個應該不顯示。現在

,問題是:

文本框的值可以由用戶和被改變從而根據輸入的值,使用jQuery我需要出示相應的面板。我不希望每個靜態文本都有標籤,然後爲所有標籤和單選按鈕逐一設置相同的屬性;這就是爲什麼我使用了<asp:Panel>

  1. 我無法將代碼背後的visible屬性設置爲false,因爲此面板不會在ASPX頁面上呈現,並且顯示,隱藏不起作用。
  2. 我試着從後面的代碼設置panelNA.Style.Add(HtmlTextWriterStyle.Display, "none"),但這也行不通。由於靜態文本和控件在用戶界面上仍然可見。
  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> 
+0

試圖格式化你的代碼,它看起來像它會永遠需要。 :) – Shoban

回答

0

在使用本

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

對於禁用驗證JavaScript中使用這個

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

有關說明你做的div背後隱藏的代碼不需要知道div的可見狀態爲acco按照您提到的div的邏輯將被隱藏或基於文本框的值顯示。

另請在粘貼前格式化您的代碼。

+0

我已經嘗試過pnl.Style.Add(「display」,「none」);從後面的代碼,但它不起作用。面板內的控件仍在顯示。同時顯示隱藏面板不工作。此外,我嘗試禁用使用上述代碼reuired提交驗證程序,但問題是,每當面板變得可見使用此,atonce這些驗證程序被解僱,並顯示錯誤消息,這是不好的。 – user1645732

+0

好吧,讓我試着爲你做一個實際的例子... –

+0

我重新檢查了pnl.Style.Add(「display」,「none」);它確實有效。 –

0

如果在後面的.aspx標記/代碼中設置Visible =「false」,則ASP.Net控件將無法在頁面中呈現。

更好地移除面板中設置的Visible =「false」並添加樣式顯示:無。

如果你想讓它在後面的代碼遵循該代碼

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

然後使用

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