ASP.NET MVC] Ajax Request - .load()

jQuery를 이용하여, Ajax request 실행

jQuery는 Ajax와 관련된 메소드를 제공한다. 

$.ajax()	비동기식 Ajax를 이용하여 HTTP 요청을 전송함.
$.get()	전달받은 주소로 GET 방식의 HTTP 요청을 전송함.
$.post()	전달받은 주소로 POST 방식의 HTTP 요청을 전송함.
$.getScript()	웹 페이지에 스크립트를 추가함.
$.getJSON()	전달받은 주소로 GET 방식의 HTTP 요청을 전송하여, 응답으로 JSON 파일을 전송받음.
.load()	서버에서 데이터를 읽은 후, 읽어 들인 HTML 코드를 선택한 요소에 배치함.

index.html 에서 Show the About 링크 클릭 시, index page로 About content를 load하는 ajax request를 호출하자. 

AjaxDemo.js

    $(document).ready(function () { //DOM load 시 한번 실행된다. 
        $('#aboutLink').click(function (event) { //event 를 parameter로 받는다. 
            event.preventDefault(); //링크페이지로의 이동과 같은 기본동작을 방해한다. 
            var url = $(this).attr('href'); //href attribute 값을 변수에 할당한다. 
            $('#about').load(url); //about element를 찾아서, url contents를 load 한다. 
        });
    });

Unobtrusive JavaScript를 지향하기 위해, JavaScript code를 html markup과 분리하여 별도의 파일로 처리하였다. 

장점 : JavaScript code의 update가 쉽고, cache될 수 있어서 페이지 로딩이 빨라진다. HTML mark-up이 단순해진다. 

 

index.html

@{
    ViewBag.Title = "Home Page";
}

@section head {
    <script type="text/javascript" 
            src="@Url.Content("~/scripts/AjaxDemo.js")">
    </script>
}

<div class="jumbotron">
    <h1>ASP.NET</h1>
    <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
    <p><a href="https://asp.net" class="btn btn-primary btn-lg">Learn more &raquo;</a></p>
</div>

<div class="row">
    <div class="col-md-4">
        <h2>Getting started</h2>
        <p>
            ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
            enables a clean separation of concerns and gives you full control over markup
            for enjoyable, agile development.
        </p>
        <p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301865">Learn more &raquo;</a></p>
    </div>
    <div class="col-md-4">
        <h2>Get more libraries</h2>
        <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
        <p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301866">Learn more &raquo;</a></p>
    </div>
    <div class="col-md-4">
        <h2>Web Hosting</h2>
        <p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p>
        <p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301867">Learn more &raquo;</a></p>
    </div>
</div>
@Html.ActionLink("Show the About", "About", null, new { id = "aboutLink" })
<div id="about"></div>

About.cshtml

@{
    ViewBag.Title = "About";
}
<h2>@ViewBag.Title.</h2>
<h3>@ViewBag.Message</h3>

<p>Use this area to provide additional information.</p>

 

Progressive enhancement란? 

개발 시, 기본 기능의 정상 동작으로 시작하여 Ajax의 기능을 덧붙이는 것으로 진행한다. 

이 방식은, 브라우저에서 JavaScript가 동작하지 않을 경우,  link가 degrade되어 Ajax 호출 없이 About page로 이동하는 기본동작을 하도록 한다. 

 

HomeController.cs

Request.IsAjaxRequest 함수를 호출하여, Ajax Request인 경우, partial view를 return한다. JavaScript가 동작하지 않을 경우 normal view를 반환한다. 

    public class HomeController : Controller 
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult About()
        {
            ViewBag.Message = "Your application description page.";

            if (Request.IsAjaxRequest())
            {
                return PartialView();
            }

            return View();
        }
    }

Ajax Request인 경우, 화면

JavaScript 동작하지 않은 경우 화면