[Asp.net] Jquery 응용하기

Repeater의 Event를 이용한 itemDataBound를 통하여 컨트롤에 값을 Binding하였을 경우에

Client에서 jQuery로 값에 접근 하는 방법,,,

▶ Test.aspx 파일

<script type="text/javascript">             $(document).ready(function () {                 $('input[name=btnTest]').click(function () {                     TextBoxArray1 = $.map($('.tclass'), function (item, index) { return ($(item).find('input[type=text][id*=TextBox1]').val()); });                     TextBoxArray2 = $.map($('.tclass'), function (item, index) { return ($(item).find('input[type=text][id*=TextBox2]').val()); });                     TextBoxArray3 = $.map($('.tclass'), function (item, index) { return ($(item).find('input[type=text][id*=TextBox3]').val()); });                     TextBoxArray4 = $.map($('.tclass'), function (item, index) { return ($(item).find('input[type=text][id*=TextBox4]').val()); });                     TextBoxArray5 = $.map($('.tclass'), function (item, index) { return ($(item).find('input[type=text][id*=TextBox5]').val()); });                                          for(i = 0 ; i < TextBoxArray1.length; i++)                         alert(TextBoxArray1[i] + "|" + TextBoxArray2[i] + "|" + TextBoxArray3[i] + "|" + TextBoxArray4[i] + "|" + TextBoxArray5[i]);                 });             });                      </script>     <input type="button" name="btnTest" value="Test" />     <table>         <thead>             <tr>                 <th>1</th>                 <th>2</th>                 <th>3</th>                 <th>4</th>                 <th>5</th>             </tr>         </thead>         <tbody>             <asp:Repeater ID="rptList" runat="server" OnItemDataBound="rptList_ItemDataBound">                 <ItemTemplate>                     <tr class="tclass">                         <td><asp:TextBox ID="TextBox1" runat="server" Text="TEST1"></asp:TextBox></td>                         <td><asp:TextBox ID="TextBox2" runat="server" Text="TEST2"></asp:TextBox></td>                         <td><asp:TextBox ID="TextBox3" runat="server" Text="TEST3"></asp:TextBox></td>                         <td><asp:TextBox ID="TextBox4" runat="server" Text="TEST4"></asp:TextBox></td>                         <td><asp:TextBox ID="TextBox5" runat="server" Text="TEST5"></asp:TextBox></td>                     </tr>                 </ItemTemplate>             </asp:Repeater>         </tbody>     </table>

빨간색으로 표시한 부분과 같이 작성하면 Row가 많이 생성되어도 TextBoxArray1, TextBoxArray2, ... 이와 같이 배열로 할당하기 때문에 아무런 문제가 될것 같지 않다.

▶ Cs 파일

        protected void Page_Load(object sender, EventArgs e)
        {
            rptList.DataSource = CreateTable();
            rptList.DataBind();
        }

        protected void rptList_ItemDataBound(object sender, RepeaterItemEventArgs e)
        {
            if (e.Item.ItemType == ListItemType.AlternatingItem || e.Item.ItemType == ListItemType.Item)
            {
                TextBox TextBox1 = e.Item.FindControl("TextBox1") as TextBox;
                TextBox1.Text = ((DataRowView)e.Item.DataItem)["1"].ToString();
                TextBox TextBox2 = e.Item.FindControl("TextBox2") as TextBox;
                TextBox2.Text = ((DataRowView)e.Item.DataItem)["2"].ToString();
                TextBox TextBox3 = e.Item.FindControl("TextBox3") as TextBox;
                TextBox3.Text = ((DataRowView)e.Item.DataItem)["3"].ToString(); 
                TextBox TextBox4 = e.Item.FindControl("TextBox4") as TextBox;
                TextBox4.Text = ((DataRowView)e.Item.DataItem)["4"].ToString(); 
                TextBox TextBox5 = e.Item.FindControl("TextBox5") as TextBox;
                TextBox5.Text = ((DataRowView)e.Item.DataItem)["5"].ToString();
            }
        }

        private DataTable CreateTable()
        {
            DataTable dt = new DataTable();
            dt.Columns.Add(new DataColumn("1", typeof(string)));
            dt.Columns.Add(new DataColumn("2", typeof(string)));
            dt.Columns.Add(new DataColumn("3", typeof(string)));
            dt.Columns.Add(new DataColumn("4", typeof(string)));
            dt.Columns.Add(new DataColumn("5", typeof(string)));

            DataRow row = dt.NewRow();
            row["1"] = "1-1"; row["2"] = "1-2"; row["3"] = "1-3"; row["4"] = "1-4"; row["5"] = "1-5";
            dt.Rows.Add(row);
            row = dt.NewRow();
            row["1"] = "2-1"; row["2"] = "2-2"; row["3"] = "2-3"; row["4"] = "2-4"; row["5"] = "2-5";
            dt.Rows.Add(row);
            return dt;
        }