[ASP.NET MVC] 제이쿼리(JQuery) 아작스(ajax)를 이용하여 비하인드함수 호출하기

웹폼에서사용했던 안 보이는 버튼을 이용한 비하인드 함수 호출을 'ASP.NET MVC'에서도 사용할 수 있습니다.

(참고 : [ASP.Net] 자바스크립트에서 비하인드 호출하기)

 

그런데 MS가 'ajax.net'을 포기하는 뉘앙스인 데다 MVC에서는 'ajax.net'를 사용하는데 번거로운 편이라

그냥 제이쿼리(JQuery)의 아작스(ajax)기능을 이용하여 비하인드 함수를 호출해 보겠습니다.

 

 

0. 테스트용 코드

테스트를 위해 HTML코드를 다음과 같이 작성합니다.

<input id="txtData" type="text" />
<input id="btnAjax" type="button" value="button" onclick="CallBehind();" />
<label id = "labOut" for="btnAjax" ></label>

<script type="text/javascript">
	function CallBehind()
	{
		var sTxt = $(txtData).val();

		$('label').text(sTxt);
		alert(sTxt);
	}
</script>

 

이렇게 코드를 작성했다면 다음과 같이 동작합니다.

 

 

비하인드 코드는 다음과 같이 작성합니다.

[HttpPost]
public JsonResult AjaxCall(string sData)
{
	return Json(new { sReturn = "MVC:" + sData });
}

 

 

1. 정석적인 방법

제이쿼리를 이용하여 아작스 기능을 이용하여 비동기통신이 가능합니다.

(참고 : 스택오버플로 - jQuery.Ajax with MVC)

 

우리는 'ASP.NET MVC'를 사용하고 있기 때문에 주소는 URL헬퍼(URL Helper)를 이용하여 작성하는 것이 좋습니다.

/*
제이쿼리 ajax 형식
$.ajax({
   url: '컨트롤러 주소',
   type: "POST",
   data: { '[파라매타 이름]': [넘길 값] },
   dataType: "json",
   success: function (data) {} });
*/

 
function CallBehind()
{
	var sTxt = $(txtData).val();
	var sReturn = "";

	$.ajax({
		url: '@Url.Action("AjaxCall","home")',
		type: "POST",
		data: { 'sData': sTxt },
		dataType: "json",
		success: function (data)
		{
			sReturn = data.sReturn;
			alert(sReturn);
		}
	});

	$('label').text(sReturn);
}

(참고 : 스택오버플로 - jQuery.Ajax with MVC)

 

 

2. 간소화 방법

간단하게 함수를 호출할 때는 다음과 같이 합니다.

/*
$.post( url: '컨트롤러 주소'
	,  { '[파라매타 이름]': [넘길 값] }
	, function (data)
    {
    	alert(data.status);
    });
*/

 
$.post('@Url.Action("SelectLang","TrainingGame")'
	, { 'sLang': value }
    , function (data) {});

 

 

마무리

제이쿼리를 사용하지 않고도 비하인드코드를 호출할 수 있을 텐데 자료가 없어서 제이쿼리를 뒤저보니.....

라이프사이클상 너무 복잡해진다고 봐야....

 

이럴땐 그냥 남이 만들어둔 거 쓰는 게 최고라는거 ㅎㅎㅎㅎ