asp.net MVC4 에서 JQuery를 이용한 상태 업데이트 ( JQuery Ajax POST Data with asp.net MVC4 )

예로 좋아요 버튼을 만든다고 하겠습니다. 좋아요 버튼에는 현재까지 몇 번의 좋아요가 눌러졌는지 횟수를 체크하고, 총 횟수를 표시합니다. 유저가 좋아요 버튼을 누르면 서버에 이벤트가 전달 되며 서버에서는 좋아요 횟수를 +1 한후 총 횟수를 리턴 합니다. 클라이언트에서는 리턴 받은 총횟수를 업데이트 하여 보여주게 됩니다.

여기서 좋아요 버튼을 Form으로 작성해도 되지만, 그럴 경우 페이지 이동이 발생하며, 현재 페이지를 리로딩 하게 됩니다. 그래야 업데이트된 좋아요 총 횟수를 볼수 있겠지요. 하지만 JQuery를 이용하면 페이지 리로딩 없이 다이나믹 하게 현재 페이지 정보를 업데이트 할 수 있습니다.

먼저 좋아요 버튼이 눌러졌을 경우 수행될 서버 코드를 작성합니다.

[HttpPost]
public ActionResult Like(int pageID)
{
	// 좋아요 횟수를 업데이트
	// 리턴값은 JSON으로 전달
	return Json(TotalLikeCount);
}

다음 html단에서 좋아요 버튼과 좋아요 버튼이 눌러졌을 경우 실행될 JQuery 함수를 작성 합니다.

<!--좋아요 버튼-->
<a class="btn btn-large" id="LikeButton" data-id="@pageID">
<!--좋아요 총 횟수-->
<label id="LikeCount">@likeCount</label>

<script type="text/javascript">
	$(function () {
		$("#LikeButton").click(function () {
			// 해당 페이지의 id를 가져옵니다.  
			var pageID = $(this).attr("data-id");
			if (pageID != '') {
				// Ajax post를 수행합니다.  
				$.post("/Like", { "pageID": pageID },
					function (data) {
						$('#LikeCount').text(data);
					}
				);
			}
		});
	});
</script>