67장 AJAX확장 컨트롤(UpdatePanel 적용)

래곤 2009. 10. 28. 10:17

1. FrmAjaxWebForm.aspx 윈폼 생성
2. AJAX 확장 메뉴에서 ScriptManager 컨트롤러 추가
3. 전체 페이지 포스트백 과 부분 페이지 포스트 백의 차이점 (AJAX컨트롤 사용하는방법)
4. 자신이 원하는 부분에 적용하고자 할때 UpdatePanel 사용 하도록 한다.

FrmAjaxWebForm.aspx

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

<!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>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">

        </asp:ScriptManager>
        전체 페이지 포스트 백(다시게시) : ASP.NET Ajax 컨트롤 적용전<br />
        <asp:Label ID="Label1" runat="server" Text="Label" ForeColor="Red"></asp:Label>
        <asp:Button ID="Button1" runat="server" Text="확인" onclick="Button1_Click" /> <br />

        부분 페이지 포스트 백(다시게시):ASP.NET AJAX -> Microsoft Ajax 컨트롤 사용
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                  <asp:Label ID="Label2" runat="server" Text="Label"
                          ForeColor="Red"></asp:Label>
                  <asp:Button ID="Button2" runat="server" Text="적용" onclick="Button2_Click" />
            </ContentTemplate>
        </asp:UpdatePanel>

        <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
    </div>
    </form>
</body>
</html>

FrmAjaxWebForm.aspx.Cs

using System;
using System.Web.UI.WebControls;

public partial class FrmAjaxWebForm : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
         //Empty
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        //현재 시간을 ToLongTimeString()속성 사용하여 Label에 출력
        this.Label1.Text = DateTime.Now.ToLongTimeString();
    }
    protected void Button2_Click(object sender, EventArgs e)
    {
        this.Label2.Text = DateTime.Now.ToLongTimeString();
    }
}

WebMicrosoftAjax.zip