Tuesday, 26 July 2011

How to use Ajax in MVC

we can post data and update a page without refreshing whole page by ajax.
there are 2 ways to do that .
first start with our view model.after adding our view model ,and the view for showing comment editor and all comments.

public class CommentViewModel
    {
        [Required]
        public string Name { get; set; }
        [Required]
        public string Message { get; set; }
    }



@using MvcHandy_Ajax.Models
@model  IEnumerable<CommentViewModel>

 <div>
 <h1>Way 1</h1>
@Html.Partial("CommentEditor1",new CommentViewModel())
</div>
 <div>
 <h1>Way 2</h1>
@Html.Partial("CommentEditor2",new CommentViewModel())
</div>
<ul id="all-comments">
@Html.DisplayFor(x => x)
</ul>



way 1: completely old fashion
 
$(function () {
    $("#create-comment-button").click(function () {
        var form = $(this).closest('form');
        $.ajax({
            type: 'POST',
            url: "Home/Create",
            data: form.serialize(),
            success: function (result) {
                $("#all-comments").append(result);
                form.find('input').val('');
                form.find('input').text('');
            }
        });
        return false;
    });  
});




@model MvcHandy_Ajax.Models.CommentViewModel

<script src="@Url.Content("~/Scripts/scripts.js")" type="text/javascript"></script>


<form method="post" id = "comment-editor-1"  action="">

<ul>
    <li>
        @Html.LabelFor(x => x.Name)
        @Html.EditorFor(x => x.Name)
        @Html.ValidationMessageFor(x => x.Name)
    </li>
    <li>
        @Html.LabelFor(x => x.Message)
        @Html.EditorFor(x => x.Message)
        @Html.ValidationMessageFor(x => x.Message)
    </li>
</ul>
<button id="create-comment-button" type="submit" >Submit</button>

 </form>


way 2: using ASP.Net Ajax.Beginform



@model MvcHandy_Ajax.Models.CommentViewModel
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<script type="text/javascript">
    function Cleanform() {
        var form = $('#comment-editor-2');
        form.find('input').val('');
        form.find('input').text('');
    }
</script>

@using (Ajax.BeginForm("Create", "Home", new AjaxOptions() { InsertionMode = InsertionMode.InsertAfter, UpdateTargetId = "all-comments", OnSuccess = "Cleanform" }, new { @id = "comment-editor-2" }))
{
<ul>
<li>
    @Html.LabelFor(x => x.Name)
    @Html.EditorFor(x => x.Name)
    @Html.ValidationMessageFor(x => x.Name)
</li>
<li>
    @Html.LabelFor(x => x.Message)
    @Html.EditorFor(x => x.Message)
    @Html.ValidationMessageFor(x => x.Message)
</li>
</ul>
<button id="create-comment-button" type="submit" >Submit</button>
}

Post a Comment