ASP.NET：コントロールをクライアント側に追加する

Question

フォームを持つページがある場合（単純なテキストボックスと送信ボタンを想像してください）、JavaScriptを使用して動的にフォームにTextBoxを追加できるようにしたい場合、要求のサーバー側を処理する最善の方法は何ですか？

例：この種類を処理するための最良の方法は何

<input type = "text" id = "control1" name = "control1" /> 
<input type = "text" id = "control2" name = "control2" /> 
<input type = "text" id = "control3" name = "control3" /> 
<input type = "text" id = "control4" name = "control4" /> 
<input type = "text" id = "control5" name = "control5" /> 
<input type = "submit" /> 

：いくつかのJavascriptとページは次のように判明したユーザトリガ

<input type = "text" id = "control1" name = "control1" /> 
<input type = "text" id = "control2" name = "control2" /> 
<input type = "text" id = "control3" name = "control3" /> 
<input type = "submit" /> 

：私は、次のようにレンダリングされたページを持っていますより一般的には、クライアント側とサーバー側の両方で動的に生成される入力（例えば、データベースから取り出されたいくつかのデータから始まるサーバー側をどのように生成するか）を操作しますか？

Answer 1

Request.Form ["controlN"]には、古いフィールドと新しいフィールドがあります。

あなたが動的に同じようコントロールを追加することができ、サーバー側で

：例えば、入力を作成するためのJS関数を作る、クライアント側で

foreach (Type object in MyDBCollection) 
{ 
    Controls.Add (new TextBox()); 
} 

Answer 2

：

var numCtrl = 1; // depends on how many you have rendered on server side 
var addCtrl = function() { 
    var in = document.createElement('input'); 
    in.name = "control" + ++i; 
    in.type = "text"; 
    in.id = "control" + i; 
    document.getElementById("yourcontainer").appendChild(in); 
} 

サーバー..onあなたのHTTP paramsコレクションを検索し、それを繰り返して、一致する/制御するものだけを選択してください。/

Answer 3

ウェブフォームでは、通常の方法でそれらにアクセスできるようにする必要があります。私は、Ajax UpdatePanelを使用して、ページライフサイクルの適切な時点でコントロールを登録できるようにすることをお勧めします（の前に onLoad）。これは、ボックスを永続させる必要があるかどうかにも影響しますポストバック。他の2つの回答に含まれるJSメソッドは、ポストバックを通じてテキストボックスを保持しません。

MVCは、狂ったページのライフサイクル、コントロールの登録、ビューステートなどがあなたのやり方を変えることがないので、より多くの余裕を提供します。

大きな疑問は、ASP.Netのどのモデル/フレームワークを使用しているかです。

---

あなたが実際にウェブフォームを使用しているので、私が本当に強くあなたがあなたのために働くなら、あなたがupdatepanelsに行くことをお勧めします。それはあなたがeventvalidationなどの方法で得るような方法でコントロールを追加することを許可します。

Answer 4

FindControlメソッドを使用してコードの背後にそれらをアクセスできるようにしたい場合、AJAX UpdatePanelはおそらくあなたです最善の策。 UpdatePanelを更新するたびに、ページのライフサイクル全体を通して、更新パネルでレンダリングされた部分だけがサーバーから戻ってくるので、オーバーヘッドに疲れてしまうことを覚えておいてください。

JavaScriptを使用して動的に作成すると、ページイベントのライフサイクル中に再作成されないため、FindControlを使用してコードビハインドでそれらにアクセスすることはできません。また、ある種のループで同時に多くのものを作成していると、特にInternet Explorerで処理が遅くなる可能性があるので注意してください。

また、Javascriptでコントロールを動的に作成する場合は、ポストバックの代わりにデータを送信するためにWebMethodsでAJAXとWebServicesを使用することを検討することもできます。

Answer 5

多くのWebフォームアプリケーションでjqueryを使用し始めており、動的コントロールとJSONを組み合わせてページのWebMethodsと通信することで、ページの表示方法を大幅に制御し、不要なポストバックを排除できます。

ポストバックをトリガーしたいときは、javascriptを使用して、jqueryで非表示になっているページのサーバーコントロールにデータを入力し、サーバーコントロールボタンをクリックします。これにより、ユーザーがjavascriptを使用できない場合、ページが正常に機能しなくなります。

Answer 6

私はこの何度も同じようなことをしています。私の好みの方法は通常、RepeaterとButton（ラベルAdd）をUpdatePanelの中​​で使うことです。

コードの背後にあるButton_OnClickイベントでは、これと同じようなことをします。

Loop through the Items collection of the Repeater 
Use item.FindControl("txtUserInput") to get the TextBox for that item 
Save the text of each input to List<string> 
Add an empty string to the the list 
Databind the repeater to this new list 

ここにコード例を示します。

<asp:Repeater runat="server" ID="rptAttendees"> 
    <ItemTemplate> 
     <asp:TextBox runat="server" ID="txtAttendeeEmail" Text='<%# Container.DataItem %>'></asp:TextBox> 
    </ItemTemplate> 
</asp:Repeater> 



protected void btnAddAttendee_Click(object sender, EventArgs e) 
{ 
    var attendees = new List<string>(); 

    foreach (RepeaterItem item in rptAttendees.Items) 
    { 
     TextBox txtAttendeeEmail = (TextBox)item.FindControl("txtAttendeeEmail"); 
     attendees.Add(txtAttendeeEmail.Text); 
    } 

    SaveAttendees(); 
    attendees.Add(""); 
    rptAttendees.DataSource = attendees; 
    rptAttendees.DataBind(); 
}