개발/C# .NET

AJAX를 이용한 ASP.NET 웹사이트 맛배기 샘플

xwing 2008. 8. 27. 21:20

안녕하세요~


지금부터 간단하게 ASP.NET에서 AJAX를 이용해서 간단한 더하기 계산을 하는 웹페이지를 샘플로 보여드리겠습니다.
이 페이지는 텍스트박스를 두개 만들어 두수를 입력받고 더한 값을 또 다른 텍스트박스에 표시하는 페이지입니다.
물론, AJAX를 이용해서..(아작스? 에이젝스? 아약스? 에이제이에이엑스? .. 거참 ! 편할때로..)


실행이미지

위와 같이 표시되지요 "=" 버튼을 누르면 AJAX를 이용하여 계산한 값을 리플레쉬없이 결과를 표시하고
아래 "UpdatePanel 밖에서 더하기" 버튼을 누르면 기존의 방식되로 포스트백하여 표시된다.

일단 VS를 실행하여 새 프로젝트를 생성한다.
AJAX를 사용하기 위해서는 UpdatePanel을 추가한다.
그리고, <ContentTemplate>안에 텍스트 박스를 3개를 추가한다. 그리고 UpdatePanel밖에도 버튼을 추가한다.

즉, 소스는 다음과 같다.


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

    2 

    3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    4 

    5 <html xmlns="http://www.w3.org/1999/xhtml" >

    6 <head runat="server">

    7     <title>제목 없음</title>

    8 </head>

    9 <body>

   10     <form id="form1" runat="server">

   11     <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

   12     <div>

   13     <asp:updatepanel runat="server">

   14         <ContentTemplate>

   15             <asp:TextBox ID="nSu1" runat="server"></asp:TextBox>

   16             <asp:TextBox ID="nSu2" runat="server"></asp:TextBox>

   17             <asp:Button ID="result" runat="server" Text=" = " OnClick="result_Click" />

   18             <asp:TextBox ID="nSum" ReadOnly runat="server"></asp:TextBox>

   19         </ContentTemplate>

   20     </asp:updatepanel>

   21 

   22     <asp:Button ID="result2" runat="server" Text="UpdatePanel 밖에서 더하기" OnClick="result2_Click" />

   23     </div>

   24     </form>

   25 </body>

   26 </html>


그리고, 소스코드는 다음과 같다.

    1 using System;

    2 using System.Data;

    3 using System.Configuration;

    4 using System.Collections;

    5 using System.Web;

    6 using System.Web.Security;

    7 using System.Web.UI;

    8 using System.Web.UI.WebControls;

    9 using System.Web.UI.WebControls.WebParts;

   10 using System.Web.UI.HtmlControls;

   11 

   12 public partial class Default3 : System.Web.UI.Page

   13 {

   14     protected void Page_Load(object sender, EventArgs e)

   15     {

   16 

   17     }

   18 

   19     protected void result_Click(object sender, EventArgs e)

   20     {

   21         int sum = int.Parse(nSu1.Text.ToString()) + int.Parse(nSu2.Text.ToString());

   22 

   23         nSum.Text = sum.ToString();

   24     }

   25 

   26     protected void result2_Click(object sender, EventArgs e)

   27     {

   28         int sum = int.Parse(nSu1.Text.ToString()) + int.Parse(nSu2.Text.ToString());

   29 

   30         nSum.Text = sum.ToString();

   31     }

   32 }


위 소스를 모두 작성하고 Ctrl+F5 를 눌러 테스트해보자
두개의 숫자를 입력하고 "=" 는 눌러 계산할때와 UpdatePanel 밖에 있는 버튼을 누를때와 비교해보자

이상.. 좀 허접했나?..

암튼 기술의 발전을 따라가기가 힘들군요~
특히 웹은 너무 빠르게 변화하는거 같은... 참 밥빌어 먹기 힘들다는... 넉두리였습니다.
좋은 하루되세요.