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> }