[ASP.NET] ajax를 활용한 비동기 호출

- DropDownList 선택시 AutoPostBack이 일어나면서 화면이 깜박거리는 것을 방지하기 위하여 iframe을 사용하는 불편함을 덜어주기 위해 ajax를 활용한 비동기 호출 방법을 제공함.

 

[ 컨트롤 ]

DropDownList 1 (ddl1)

DropDownList 2 (ddl2)

Textbox (txt)

 

[ 상황설명 ]

Ddl1 선택시 ddl1의 소분류에 해당되는 항목들을 ddl2에 바인딩하며,

Ddl2 선택시 ddl2에 해당되는 텍스트 값을 txt 에 바인딩함.

  

ajax 비동기 호출을 위한 환경설정

[ web.config ]

<system.web> 

           <httpHandlers>

                     <add verb="*" path="*.ashx" type="Ajax.PageHandlerFactory,Ajax"></add>

           </httpHandlers> 

</system.web>

[ ajax를 사용하고자 하는 페이지에 선언 ]

Ajax.Utility.RegisterTypeForAjax(typeof(AjaxTEST));

---

 

[ javascript ]

// ddl1 변경시 ddl2를 조회하는 Method를 호출함

function seListChange(str, type)

{

           var strName = str.options[str.selectedIndex].text ;

           var strValue = str.options[str.selectedIndex].value ;

          

           if (type == "a")

           {                   

                     AjaxTEST.GetProduction(strName, selectedProduct_CallBack);

           }

           else

           {

                     AjaxTEST.GetAddress(strValue, selectedAddress_CallBack);

           }

}

 

// Method 호출하여 반환한 생산과 리스트를 DropDownList 를 바인딩함.

function selectedProduct_CallBack(response)

{

var statesList = document.getElementById("ddl2");

          

// ddl1 선택시 txt 초기화

document.getElementById("txt").value = "" ;

          

// 만일, 서버 코드가 예외를 일으킨다면

    if (response.error != null)

    {

        alert(response.error);

        return;

    }

 

    var states = response.value;

    // 기대했던 응답 데이터가 아니라면

    if (states == null || typeof(states) != "object")

    {

        return;

    }

 

    statesList.options.length = 0; //reset the states dropdown

    statesList.options[statesList.options.length] = new Option("선택", "선택");

   

    for (var i = 0; i < states.Rows.length; ++i)

    {               

        statesList.options[statesList.options.length] = new Option(states.Rows[i].코드명, states.Rows[i].코드);

    }   

}

 

// ddl2 선택시 txt를 조회하는 Method를 호출하여

// 반환된 txt를 컨트롤에 바인딩함.

function selectedAddress_CallBack(response)

{

var address = document.getElementById("txt");

          

// 만일, 서버 코드가 예외를 일으킨다면

    if (response.error != null)

    {

        alert(response.error);

        return;

    }

 

    var states = response.value;

   

    // 기대했던 응답 데이터가 아니라면

    if (states == "" || states == null)

    {

           alert("주소없음") ;

           address.value = "" ;

           document.getElementById("").focus() ;

           return false ;

}

else

{

           address.value = states ;

}   

}

 

 [ *.cs ]

- Page_Load() 에 선언 ( 첫번째 ddl1 바인딩 )          

// dd1 바인딩

 

- 첫번째 ddl1선택시 두번째 ddl2 Ajax Method 선언

[Ajax.AjaxMethod()]

public DataTable GetProduction(string highKey)

           {

                      ddl1 선택한 값에 해당되는 항목들을 조회함.

           }

 

- 두번째 ddl2 선택시 txt 바인딩 Ajax Method 선언

           [Ajax.AjaxMethod()]

           public string GetAddress(string production)

           {

                      dd2 선택한 값에 해당되는 항목을 조회함.

           }