2012-02-22 23 views
2

ですぐに消え、私はbuttonをクリックしたときに、単に私のaspxページにdiv内に新しいinput fieldを作成したいです。私は、既存のdivに新しい子要素(入力フィールド)を追加するjavascript関数の魔法使いを使用します。それはすべてのようになります。私はボタンをクリックしたときに私はHTMLのdiv要素を作成しますが、それはこれはイライラさせられるASP.NET

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="Pages_test" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <script type="text/javascript"> 

     function clone() { 
      var html = document.createElement("input"); 
      html.setAttribute("id", 1); 
      html.setAttribute("name", "dejan"); 
      html.setAttribute("value", "some text"); 
      html.setAttribute("type", "text"); 
      document.getElementById("panj").appendChild(html); 
     } 

    </script> 
</head> 
    <body> 
     <form id="form1" runat="server"> 
      <div id="panj"> 
       Djubrov 
      </div> 
      <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="clone()" /> 
     </form> 
    </body> 
</html> 

おかしい事は、第二のために、設定されたテキスト値が点滅しているテキスト要素であるが、それはあとがきに消えます。何か不足していますか?

+1

なぜポストバック後にクライアント側で作成された要素が残っていると思いますか?サーバーはそれらが存在することを知らず、それらを再作成しません。 –

+0

ユーザーが負傷したイベントが発生したときに新しい要素を作成し、同じページに表示させるにはどうすればよいですか? –

答えて

0

あなたが背後にあるコードでは、この生成されたテキストフィールドから値が必要な場合は、JavaScriptで動的に作成しないオフはるかに良いでしょう。あなたは、通常のテキストボックスを作成し、そのような、最初は見えないようにそれを設定できます。ボタンを押すと

<asp:TextBox ID="yourTextboxID" Visible="False" runat="server" /> 

、背後にあるコードでイベントを処理し、テキストボックスが表示されるよう:

yourTextboxID.Visible = True; 

Viewstateはポストバック間で値を保持します。

各ボタンを押して、追加のテキストボックスを作成する必要があります場合は、ascxファイルでプレースホルダを使用して、各ボタンを押すと、それに新しいテキストボックスを取り付けすなわち、分離コードでこれを行うことができます:

yourPlaceholderID.Controls.Add(new TextBox() { ID = "textbox1" }); 
1

ボタンがサーバーに要求を生成し、その応答がページを新しいHTMLドキュメントで上書きしています。

function clone() { 
    // your above code 
    return false; 
} 

asp:Buttonは、サーバとの対話を必要としないあなた、それ<button>または<input type='button' />することを検討した場合

OnClientClick="return clone()" 

のようなボタンを変更する:asp:Buttonポストバックを防ぐために、JavaScript関数からfalseを返します。

+0

私は偽を試みましたが、それは違いはありません。 実際に私は、この何かをする方法を理解するためにこのexapmleを作成しました。 現実世界で私はページ上にボタンを持っています。ユーザーがそれらのボタンをクリックすると、対応する名前を選択し、データベースの名前を使用して適切な要素を選択し、データベースからの情報で新しいdivを表示します。 –

+0

@stanislav 'clone()'から 'return clone()'に変更する必要があります。アップデート – paislee

+0

を参照してください。これはそのトリックです。しかし、今私はどのようにコードの背後にある生成されたテキストフィールドの値を使用することができます(C#)? –

7

このボタンをクリックするたびに、ポストバックが発生します。

は、次のようにポストバックをストーピングことによってそれを修正:

<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="clone(); return false;" /> 
+0

これは動作しています。しかし、テキストフィールドをページのソースに表示させるにはどうすればよいですか? –

+0

innerHTMLプロパティを使用してみてください:document.getElementById( 'tes_div')。innerHTML = ''; – skub

関連する問題