asp.netでのjQueryを使ったコントロールのコピーについて困っています。

###前提・実現したいこと
asp:buttonの追加ボタンを押下時、<div class="manyText">で囲まれた範囲をすべてコピーし、次の行に追加したいです。

###発生している問題・エラーメッセージ

追加ボタンを押すと、
A1_text,A1_text,A1_textという様にtextのみがコピーされ、textboxの値に追加される。

###該当のソースコード

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="last.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
  $(window).load(function () {
        var jo = jQuery(".manyText:last");

        $("#Button1_id").click(function () {
            //改行という文字を最後に追加
            jo.append("\n");
            jo.clone(true).insertAfter(jo);
        });
    });
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div class="manyText">
    <asp:TextBox ID="A1_id" runat="server" Text="dd">A1_text</asp:TextBox>
    <asp:TextBox ID="A2_id" runat="server" Text="dd">A2_text</asp:TextBox>
    <asp:TextBox ID="A3_id" runat="server" Text="dd">A3_text</asp:TextBox>
    </div>
    <%--inputのbuttonとaspのbuttonと挙動が違う--%>
    <p>
       <%-- <input type="button" value="コピー" id="btn" class="btn01" />--%>
        <br />
        <asp:Button ID="Button1_id" runat="server" Text="追加"  onclick="Button1_Click" />
    </p>
    <p>
        <asp:Button ID="Button2" runat="server" Text="送信" onclick="Button2_Click" />
    </p>
    </form>
</body>
</html>

###試したこと
htmlで使うinput type="button"の方はjQueryのclone()で複製はできますが、その後のaspx.csファイルでのC#の分離ファイルでの処理が書けません。
asp:buttonの方を複製したいです。よろしくお願いします。

###補足情報(言語/FW/ツール等のバージョンなど)
asp.netがサーバーからレスポンスを受ける時に動的にhtmlを書く仕組みになっている様で、htmlに変換されたところに、C#でjavascriptを動的に埋め込み、jQueryで複製処理しようと思っています。
ClientScript.RegisterStartupScriptをC#側で使えばできるはずなのですが、”ClientScript.RegisterStartupScript”の使い方に戸惑っています。

行動規範の内容に同意します

回答1件

ベストアンサー

動的にコントロールを追加するには ASP.NET WebForm が動作する仕組みを理解する必要があります。

そして ASP.NET が理解不足の段階で JavaScript や jQuery を使うのは混乱の元になります。

というわけで jQuery は使わずに ASP.NET だけで作ってみました。

WebForm1.aspx のソース

C#
1<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="last.WebForm1" %>
2
3<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5<html xmlns="http://www.w3.org/1999/xhtml" >
6<head runat="server">
7	<title></title>
8</head>
9<body>
10	<form id="form1" runat="server">
11		<asp:TextBox ID="LineCount" runat="server" ReadOnly="True"></asp:TextBox>行<br />
12
13		<asp:Table ID="Table1" runat="server"></asp:Table>
14
15		<p>
16			<asp:Button ID="Button1" runat="server" Text="追加" onclick="Button1_Click" />
17		</p>
18		<p>
19			<asp:Button ID="Button2" runat="server" Text="送信" onclick="Button2_Click" />
20		</p>
21
22		<asp:TextBox ID="TextBoxResult" runat="server" ReadOnly="True" TextMode="MultiLine" Width="600" Height="300"></asp:TextBox>
23	</form>
24</body>
25</html>

WebForm1.aspx.cs のソース (classの中のみ)

C#
1    public partial class WebForm1 : System.Web.UI.Page
2    {
3        // 行数
4        private int _linecount;
5
6        // TextBoxコントロールのリスト
7        private List<TextBox> _listTextBox1 = new List<TextBox>();
8        private List<TextBox> _listTextBox2 = new List<TextBox>();
9        private List<TextBox> _listTextBox3 = new List<TextBox>();
10
11        /// <summary>
12        /// ページのInitイベント
13        /// </summary>
14        /// <param name="sender"></param>
15        /// <param name="e"></param>
16        protected void Page_Init(object sender, EventArgs e)
17        {
18            // 行数の取得
19            if (!this.IsPostBack)
20            {
21                // 初回表示時：行数の初期値は１
22                _linecount = 1;
23            }
24            else
25            {
26                // ポストバック時：LineCountコントロールに保存しておいた行数を取得する。
27                // Initイベント内ではWEBブラウザから返ってきた値がまだコントロールにセットされていないため、
28                // Request.Formから値を取得する。
29                string value = Request.Form[LineCount.UniqueID];
30                _linecount = int.Parse(value);
31            }
32
33            // コントロールの生成
34            // Initイベント内でコントロールを生成しておかないと、ポストバックされた値がコントロールにセットされない。
35            CreateControl();
36        }
37
38        /// <summary>
39        /// コントロールの生成
40        /// </summary>
41        protected void CreateControl()
42        {
43            int rowCount = Table1.Rows.Count;
44
45            for (int i = rowCount; i < _linecount; i++)
46            {
47                // TextBoxコントロールを３つ生成する
48                // IDプロパティの値は重複しないように注意
49                TextBox tb1 = new TextBox();
50                tb1.ID = "TextBox1" + i;
51                tb1.Text = tb1.ID;				// 初期値。別にセットする必要はない。
52                _listTextBox1.Add(tb1);
53
54                TextBox tb2 = new TextBox();
55                tb2.ID = "TextBox2" + i;
56                tb2.Text = tb2.ID;				// 初期値。別にセットする必要はない。
57                _listTextBox2.Add(tb2);
58
59                TextBox tb3 = new TextBox();
60                tb3.ID = "TextBox3" + i;
61                tb3.Text = tb3.ID;				// 初期値。別にセットする必要はない。
62                _listTextBox3.Add(tb3);
63
64                // セルを生成して中にTextBoxコントロールを入れる
65                TableCell cell = new TableCell();
66                cell.Controls.Add(tb1);
67                cell.Controls.Add(tb2);
68                cell.Controls.Add(tb3);
69
70                // 行を生成してセルを追加する
71                TableRow row = new TableRow();
72                row.Cells.Add(cell);
73
74                // テーブルに行を追加する
75                Table1.Rows.Add(row);
76            }
77        }
78
79        /// <summary>
80        /// 追加ボタンのクリックイベント
81        /// </summary>
82        /// <param name="sender"></param>
83        /// <param name="e"></param>
84        protected void Button1_Click(object sender, EventArgs e)
85        {
86            // １行追加する
87            _linecount++;
88            CreateControl();
89        }
90
91        /// <summary>
92        /// ページの描画前イベント
93        /// </summary>
94        /// <param name="sender"></param>
95        /// <param name="e"></param>
96        protected void Page_PreRender(object sender, EventArgs e)
97        {
98            // 行数をLineCountコントロールに保存する
99            LineCount.Text = _linecount.ToString();
100        }
101
102        /// <summary>
103        /// 送信ボタンのクリックイベント
104        /// </summary>
105        /// <param name="sender"></param>
106        /// <param name="e"></param>
107        protected void Button2_Click(object sender, EventArgs e)
108        {
109            // TextBoxコントロールの値を全部つなげて TextBoxResult に表示する
110            string result = "";
111            for (int i = 0; i < _linecount; i++)
112            {
113                TextBox tb1 = _listTextBox1[i];
114                TextBox tb2 = _listTextBox2[i];
115                TextBox tb3 = _listTextBox3[i];
116
117                result += tb1.Text + " : " + tb2.Text + " : " + tb3.Text + "\n";
118            }
119            TextBoxResult.Text = result;
120        }
121    }

理解を助けるためのポイントは以下の通り。

WEBブラウザでボタンをクリックしてサーバーに処理が移るたびにプログラムは初期状態から始まるので、毎回Page_InitイベントでTextBoxコントロールを生成しなおす必要がある。
コントロールを生成しなおすために、生成したコントロールの数などの情報を記録しておく。（上記のソースの場合はLineCountに保存する行数の値）
動的に生成したコントロールは、静的なコントロールの中に追加しないと表示されない。（上記のソースではTable1コントロールの中に入れている）
動的に生成したコントロールのIDプロパティは、他のコントロールのIDと重複しないようにする。質問文中のソースはID（というかName属性）が重複しているため、入力された文字列が取り出しにくくなっている。Request.Form.GetValuesを駆使すれば取り出せるが面倒なのでおすすめしない。

投稿2016/08/31 10:04