자바스크립트 호출로Ajax 판넬의 데이터 업데이트
“자바스크립트로 DataList 업데이트” (Button1)를 클릭하면
“숨김버튼 자바스크립트로 이버튼 클릭”"(Button2) 를 이벤트를 비하인드로 실행시킨다.
WebFrom1.aspx
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> </head> <body> <form id="form1" runat="server"> <script> function UpdateGrid() { alert("업데이트 호출"); <%=Page.GetPostBackEventReference(Button2)%>; return false; } </script> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:DataList ID="DataList1" runat="server"> <ItemTemplate> <asp:Label ID="Label1" runat="server" Text='<%# Eval("Name") %>'></asp:Label> <br /> <asp:Label ID="Label2" runat="server" Text='<%# Eval("RegDate") %>'></asp:Label> </ItemTemplate> </asp:DataList> <asp:Button ID="Button2" runat="server" Text="숨김버튼 자바스크립트로 이버튼 클릭" OnClick="Button2_Click" /> </ContentTemplate> </asp:UpdatePanel> <br /> <br /> <asp:Button ID="Button1" runat="server" Text="자바스크립트로 DataList 업데이트" OnClientClick="return UpdateGrid();" /> </div> </form> </body> </html>
WebForm1.cs
public partial class WebForm1 : System.Web.UI.Page { DataTable dt = new DataTable(); protected void Page_Load(object sender, EventArgs e) { dt.Columns.Add("Name"); dt.Columns.Add("RegDate"); UpdateDatetime(); } private void UpdateDatetime() { dt.Rows.Clear(); for (int i = 0; i < 10; i++) { DataRow row = dt.NewRow(); row["Name"] = i.ToString(); row["RegDate"] = DateTime.Now.ToString(); dt.Rows.Add(row); } this.DataList1.DataSource = dt; this.DataList1.DataBind(); } protected void Button2_Click(object sender, EventArgs e) {
//자바스크립트로 Button2클릭 이벤트를 호출해서 들어온 이벤트
UpdateDatetime();
}
}
<%=Page.GetPostBackEventReference(Button2)%>; 이것만 알면 끝~
'ASP.NET AJAX' 카테고리의 다른 글
| 디자이너를 위한 asp.net 페이지 만들기 (0) | 2011.06.14 |
|---|---|
| [URL 맵핑/블로그 주소 / 단축주소] Routing in ASP.NET (0) | 2010.11.02 |
| [Forder /Directory.GetFiles] 특정폴더 파일목록가져오기 (1) | 2010.10.01 |
| 배열을 DataList에 바인딩하기 (0) | 2010.10.01 |
| [ GridView ] DataKeys , RowDataBound (데이터바인딩)간단한 사용법 (0) | 2010.06.01 |
| [ GridView,그리드뷰 ]페이징(page) 디자인 꾸미기 (0) | 2010.06.01 |
| [ FilterExpression,FilterParameters , 다중검색 ] 두개이상 검색할때... (0) | 2010.06.01 |
| [마스터 페이지, masterpage] 에서 유저컨트롤 안에 접근하기 (0) | 2010.06.01 |
| [마스터페이지 , masterpage ] PreviousPage 마스터페이지 컨트롤러에 접근 (0) | 2010.06.01 |
| [암호화,MD5,SHA1] 비밀번호 암호화 하기 (0) | 2010.06.01 |
