ASP.NET MVC] Ajax Submit - .post()

Ajax를 이용하여, form data submit

Add Comment를 클릭 시, text area가 포함된 form이 submit 되어 Comments list를 보여주도록 처리해보자. 

Index.cshtml

@model IEnumerable<string>
@{
    ViewBag.Title = "Home Page";
}
@section head {
    <script type="text/javascript" 
            src="@Url.Content("~/scripts/AjaxDemo.js")">
    </script>
}
<div class="jumbotron">
    <h4>Comments</h4>

    <ul id="comments">
        @foreach (var comment in Model)
        {
            <li>@comment</li>
        }
    </ul>

    <form method="post" id="commentForm" action="@Url.Action("AddComment")">
        @Html.TextArea("Comment", new { rows = 5, cols = 50 })
        <br />
        <input type="submit" value="Add Comment" />
    </form>
</div>

AjaxDemo.js

    $(document).ready(function () { // DOM load 시 실행됨
        $('#commentForm').submit(function (event) { //commentForm에 submit eventhandler attach
            event.preventDefault();//form이 submit 되는 것을 방지
            var data = $(this).serialize(); //form's content serialize into string
            var url = $(this).attr('action');
            $.post(url, data, function (response) {
                $('#comments').append(response); //server가 response를 보내면 실행됨
                //response로 부터 받은 AddComment partial view를 comments element에 append
            });
        });
    });

HomeController.cs

    public class HomeController : Controller 
    {

        private static List<string> _comments = new List<string>();

        public ActionResult Index()
        {
            return View(_comments);
        }

        [HttpPost]
        public ActionResult AddComment(string comment)
        {
            _comments.Add(comment);
            if (Request.IsAjaxRequest())
            {
                ViewBag.Comment = comment;
                return PartialView();
            }
            return RedirectToAction("Index");
        }
    }

AddComment.cshtml

<li>@ViewBag.Comment</li>

1) Ajax Request인 경우 : xhr이 호출되어 page refresh 없이 Response만 element에 추가되어 보여진다. 

 

2) JavaScript 동작하지 않은 경우 : index로 redirect 되어 updated comments를 보여주기 위해 full-page refresh가 된다.