demoshop

NEWS

demo, trying to be the best.

站內搜尋載入中...

找出頁面上Controls數量前端寫法和後端寫法介紹

  • 2406
  • 0

有些時候我們需要計算頁面上的某個物件或控制項的數量來跑迴圈處理一些事情,這裡就介紹後端的寫法與前端的寫法,給各位參考。

    我們的頁面就丟這樣子吧

    <body>
        <form id="form1" runat="server">
        <div>
            <asp:Panel ID="Panel1" runat="server">
                <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
                <asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>
            </asp:Panel>
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
            <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
        </div>
        </form>
    </body>

    然後我們先來介紹如何利用c#寫

    protected void Page_Load(object sender, EventArgs e)
    {
        int count = 0;
        foreach (object item in this.form1.Controls)
        {
            if (item is TextBox)//我們只抓是TextBox類型的控制項
            {
                count += 1;
            }
        }
        Response.Write("頁面上的文字方塊有"+count+"個<br/>");
     
        /*
         * 刻意分開上下兩種寫法 上方寫法for 2.0 下方寫法 for 3.0
         */
     
        int panel = 0;
        foreach (var panelItem in this.Panel1.Controls)
        {
            if (panelItem is TextBox)//我們只抓是TextBox類型的控制項
            {
                panel += 1;
            }
        }
        Response.Write("panel內的文字方塊有"+panel+"個");
    } 

    可是很多時候我們希望在前端就可以處理這種玩意,因為丟到後面實在是有點浪費資源,除了是必要不然用前端來處理是比較好滴唷。

     

    利用jQuery的寫法

     <script type="text/javascript">
        $(document).ready(
      function() {
        var p = $("#Panel1 > input[@id^='TextBox']").length;
        alert("Panel內的文字方塊有" + p + "個");
         
        var t = $("input[@id^='TextBox']").length;
        alert("頁面下的文字方塊有" + t + "個");
         
        var v = $("div:not(#Panel1)").length;
        alert("頁面下不包含Panel內的文字方塊有" + v + "個");
      });
    </script>