JavaScriptを使用してPageLoadのページコントロールを処理する

Question

aspxページにtextbox、dropdownlsitなどのサーバーサイドコントロールがあり、私の目的はページロード中に非表示にすることです。

以下のコードでは、コントロールがページの読み込み中に非表示になっていますが、ちらつきがあります。所望の出力は、この制御のちらつきを排除すべきである。どんな助けでも大歓迎です。

var ispostBack =false; 
function pageLoad() { 
    $(document).ready(function() { 
     HideCtrls(); 
//Some other code here 
    } 

function HideCtrls() 
{ 
    document.getElementById("cph1_divSear").style.setAttribute('display', '') 
    if (document.getElementById("cph1_txtSearch")) 
    { 
     document.getElementById("cph1_txtSearch").style.setAttribute('display', 'none') 
     document.getElementById("cph1_txtkey").style.setAttribute('display', 'none') 
     document.getElementById("cph1_hypProjNo").style.setAttribute('display', 'none') 
     document.getElementById("cph1_ddlSeaSingle").style.setAttribute('display', 'none') 
     document.getElementById("cph1_txtSeaStart").style.setAttribute('display', 'none') 
     document.getElementById("cph1_txtSeaEnd").style.setAttribute('display', 'none') 
     document.getElementById("cph1_txtSeFLike").style.setAttribute('display', 'none') 
     document.getElementById("cph1_imgSeaSt").style.setAttribute('display', 'none') 
     document.getElementById("cph1_txtSeTLike").style.setAttribute('display', 'none') 
     document.getElementById("cph1_imgSeaEnd").style.setAttribute('display', 'none') 
     document.getElementById("cph1_txtPersonnel3").style.setAttribute('display', 'none') 
     document.getElementById("cph1_ImageButton3").style.setAttribute('display', 'none') 
     document.getElementById("likeFID").style.setAttribute('display', 'none') 
     document.getElementById("likeTID").style.setAttribute('display', 'none') 
     document.getElementById("dtFID").style.setAttribute('display', 'none') 
     document.getElementById("dtTID").style.setAttribute('display', 'none') 
    } 
} 

<div id="divSear" runat="server" class="cols4Search"> 
          <span> 
           <asp:TextBox ID="txtSearch" runat="server" Width="350px"></asp:TextBox> 
           <asp:TextBox ID="txtkey" runat="server" onblur="ClearHelp()" onfocus="JavaScript:showhelp('Search_1001')" 
            Width="400px" MaxLength="150"></asp:TextBox></span> <span style="display: none;"> 
             <asp:HyperLink ID="hypProjNo" runat="server" Target="_blank" ForeColor="Blue">View</asp:HyperLink> 
            </span><span> 
             <asp:DropDownList ID="ddlSeaSingle" runat="server" AutoPostBack="True"> 
             </asp:DropDownList> 
            </span><span id="likeFID">>=<asp:TextBox ID="txtSeFLike" runat="server" MaxLength="9"></asp:TextBox></span> 
          <span id="likeTID"><=<asp:TextBox ID="txtSeTLike" runat="server" MaxLength="9"></asp:TextBox></span> 
          <span id="dtFID">>=<asp:TextBox ID="txtSeaStart" runat="server" Width="85px"></asp:TextBox></span> 
          <span> 
           <asp:ImageButton ID="imgSeaSt" runat="server" CssClass="dateicon" ImageUrl="~/Images/date_icon.png" /></span> 
          <span id="dtTID"><=<asp:TextBox ID="txtSeaEnd" runat="server" Width="85px"></asp:TextBox></span> 
          <span> 
           <asp:ImageButton ID="imgSeaEnd" runat="server" CssClass="dateicon" ImageUrl="~/Images/date_icon.png" /></span> 
          <span> 
           <asp:TextBox ID="txtPersonnel3" runat="server" CssClass="textbox" onblur="ClearHelp()" 
            Width="160px" onfocus="JavaScript:showhelp('AdminUserDetails_1001')"></asp:TextBox></span> 
          <span> 
           <asp:ImageButton ID="ImageButton3" runat="server" ImageUrl="~/Images/searchtool.png" 
            ToolTip="Select User" CssClass="iconalign" /></span> 
          <br /> 
          <asp:Label ID="lblNote" Visible="false" CssClass="Notelabel" runat="server" /> 
         </div> 

Answer 1

は、サーバー上のすべてのコントロールを非表示に、クライアント上でそれらを表示この方法を必要とするときには、HTML

<asp:TextBox ID="txtSearch" style="display:none" Visible="False" Width="350px"></asp:TextBox> 

でしばらく

のために示された後に隠れコントロールの問題を持っていないだろうかコードの背後に

txtSearch.Attributes.Add("style", "display:none"); = "false"; 

そして必要に応じてそれらをjavacriptで表示します。

if (document.getElementById("cph1_txtSearch")) 
{ 
    document.getElementById("cph1_txtSearch").style.setAttribute('display', 'block') 
    //Similarly you can show all field which are required to be shown 
    // ......... 
}