70.C# ASP.NET - Ajax
특징
- 검색 페이지 자동완성 기능(AutoComplete)
- 부분페이지 랜더링(업데이트, 포스트백)
웹에서 이벤트를 실행하게 되면 전체 페이지가 포스트백이 되는데
Ajax를 사용하게 되면 전체 포스트백이 되지 않고 빠르게 결과를 확인 할 수 있으며 리소스 또한 절약됩니다.
도구상자 - Ajax - UpdatePanel 컨트롤 추가
| FrmAjaxWebForm.aspx |
|
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">
<title></title>
<script type="text/javascript">
function pageLoad() {
}
</script> </head> <body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<br />
<br />
전체 페이지 포스트 백(다시 게시) : ASP.NET AJAX 적용 전<br />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
<br />
<br />
부분 페이지 포스트 백(다시 게시) : ASP.NET AJAX => Microsoft Ajax<br />
<asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label> <asp:Button ID="Button2" runat="server" onclick="Button2_Click" Text="Button" /> </ContentTemplate>
</asp:UpdatePanel>
<br />
<asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
</div>
</form> </body> </html> |
| FrmAjaxWebForm.aspx.cs |
|
protected void Button1_Click(object sender, EventArgs
e) {
this.Label1.Text = DateTime.Now.ToLongTimeString(); } protected void Button2_Click(object sender, EventArgs
e) {
this.Label2.Text = DateTime.Now.ToLongTimeString(); } |
| 결과화면 |
[그림70-1]
결과는 직접 실행해서 확인 해주세요
|
FrmAjaxWebForm.aspx