웹폼에서 Ajax 실행하기 1 - ScriptManager Ajax 컨트롤

 

 

웹폼에서 Ajax 컨트롤 중 ScriptManager 를 사용하여 서버단 함수를 Ajax 로 호출하는 예제입니다.

 

이 예제에서는 C# 과 jQuery 가 사용되며 jQuery 는 v1.7.1 을 사용하였습니다.

 

1. WebForm2.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;

namespace WebApplication2
{
    public partial class WebForm2 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        [WebMethod]
        public static string Hello(string name)
        {
            if (string.IsNullOrWhiteSpace(name))
                throw new FormatException("이름이 없습니다.");

            return string.Format("Hello, {0}!", name);
        }
    }
}

설명: 클라이언트 단에서 Ajax 로 서버단 함수를 호출하기 위해서는 서버단 함수를 웹서비스로 제공해야 합니다. 이를 위해 line 7 과 같이 System.Web.Services 를 추가하고 public static 으로 [WebMethod] annotation 을 사용하는 함수를 만들어 줍니다.
여기서는 name 문자열을 파라미터로 가지는 Hello 함수를 만들고 name 파라미터가 Null 이거나 공백이면 에러를 발생시킵니다.

 

2. WebForm2.aspx - html 부분

    
    
    

        Name : 
        
    
    

        
결과 : 
    

설명: ScriptManager 컨트롤을 사용하기 위해 Form 안에 태그를 추가하고 EnablePageMethods="true" 로 하여 PageMethods 를 Javascript 단에서 사용할 수 있게 합니다.

 

3. WebForm2.aspx - Javascript 부분

설명: 전송 버튼을 클릭하면 line 5 와 같이 PageMethods 를 이용해 서버단 함수인 Hello 를 호출합니다. 이 때, 서버단 함수는 name 이라는 문자열만 파라미터로 가지지만 호출 성공 및 실패로 반환값을 처리할 success callback function 과 error callback function 을 같이 넘깁니다. 이 두 callback function 은 옵션이므로 반환값이 없거나 에러 처리가 필요없으면 넘기지 않아도 됩니다.

PageMethods 의 구조는 다음과 같습니다.
PageMethods,SomeMethod(p1, p2, p3, onSucceed callback function, onError callback function);

 

4. 결과 화면