Blog Content

    티스토리 뷰

    70.C# ASP.NET - Ajax

    반응형
    Ajax ( Asynchronous JavaScript and XML )
    특징
    - 검색 페이지 자동완성 기능(AutoComplete)
    - 부분페이지 랜더링(업데이트, 포스트백)

    웹에서 이벤트를 실행하게 되면 전체 페이지가 포스트백이 되는데
    Ajax를 사용하게 되면 전체 포스트백이 되지 않고 빠르게 결과를 확인 할 수 있으며 리소스 또한 절약됩니다.

    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 =&gt; 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]


    결과는 직접 실행해서 확인 해주세요


    반응형

    Comments