2012-02-22 5 views
2

button을 클릭하면 내 aspx 페이지에 새로운 input field을 간단하게 만들고 싶습니다. 자바 스크립트 함수 마녀를 사용하여 새로운 자식 요소 (입력 필드)를 기존 div에 추가합니다. 그것은 모든은 다음과 같습니다 : 내가 버튼을 클릭 있지만 afterwords을 사라지면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

이유 : 각 버튼을 눌러 추가 텍스트 상자를 작성해야하는 경우

, 당신은 또한 ASCX에 자리 표시자를 사용하고 각 버튼을 누를 때와에 새 텍스트 상자를 첨부 즉, 코드 숨김에서이 ​​작업을 수행 할 수 포스트 백 후에 클라이언트 측에서 생성 된 요소가 남아 있다고 생각합니까? 서버는 존재 여부를 알지 못하기 때문에 서버를 다시 생성하지 않습니다. –

+0

일부 사용자가 발생시킨 이벤트가 발생하면 어떻게 새 요소를 만들고 같은 페이지에 표시 할 수 있습니까? –

답변

0

, 당신은 자바 스크립트를 통해 동적으로 생성하지 오프 훨씬 더 좋을 것이다. 당신은 보통의 텍스트 상자를 만들고 그렇게 같이 처음에 보이지 않게 설정할 수 있습니다 :

버튼을 누를 때
<asp:TextBox ID="yourTextboxID" Visible="False" runat="server" /> 

, 뒤에있는 코드에서 이벤트를 처리하고 눈에 보이는 텍스트 상자합니다

yourTextboxID.Visible = True; 

을 Viewstate는 포스트 백간에 값을 유지합니다.

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

버튼이 서버에 요청을 보내면 응답이 페이지를 새 HTML 문서로 덮어 씁니다. 그것을 <button> 또는 <input type='button' />을 고려

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

을하고 asp:Button 서버와의 상호 작용이 필요하지 않은 경우

OnClientClick="return clone()" 

처럼 버튼을 수정합니다 asp:Button 다시 게시를 방지하기 위해 자바 스크립트 함수에서 false를 돌려줍니다.

+0

나는 거짓으로 시도했지만 아무런 차이가 없다. 사실 나는 다른 것을하는 방법을 파악하기 위해이 exapmle을 만들었습니다. 현실 세계에서 나는 버튼을 클릭 할 것이다. 사용자가 해당 버튼을 클릭하면 해당 이름을 선택하고 데이터베이스에서 이름을 사용하여 적절한 요소를 선택한 다음 데이터베이스의 정보로 채워진 새 div를 표시한다. –

+0

@stanislav'clone()'에서'return clone()'으로 변경해야합니다. 업데이트 – paislee

+0

을 참조하십시오. Ok, 트릭을 수행하고 있습니다. 하지만 지금은 어떻게 생성 된 텍스트 필드의 값을 코드 뒤에 사용할 수 있습니까 (C#)? –

7

해당 버튼을 클릭 할 때마다 다시 게시가 발생합니다. 다음과 같이 포스트 백을 stoping하여

수정을 : 당신이 뒤에 코드에서이 생성 된 텍스트 필드의 값이 필요한 경우

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

이 작업 중입니다. 하지만 페이지 소스에서 텍스트 필드를 볼 수있게하려면 어떻게해야합니까? –

+0

innerHTML 속성을 사용해보십시오. document.getElementById ('tes_div'). innerHTML = ''; – skub