How to implement Ajax.BeginForm in MVC OR How to validate MVC model data-annotation asynchronously

Here I am going to implement Ajax.BeginForm in MVC. It is replacement of Html.BeginForm html helper.

Html.BeginForm : Html helper post model to controller not asynchronously means your page post back and data-annotation validation fire.
Ajax.BeginForm : Ajax helper post model to controller asynchronously means your page doesn’t post back and data-annotation validation fire.

Step 1 : Add jquery.unobtrusive-ajax.min.js jquery reference to your view. And add 

 <add key="ClientValidationEnabled" value="true" />  
 <add key="UnobtrusiveJavaScriptEnabled" value="true" />  

This 2 key add to web.config under appSettings section.

Step 2 : Create first partialview ValidationSummary for show validation summary on the page.

 @using System.Web.Mvc.ViewUserControl  
 @Html.ValidationSummary("Please correct the errors and try again.")  

Step 3 : Create second partialview UserRegisterForm for registration form fields like Name, Age, Username, Password etc.

 @model EntityModel.UserModel  
 <div id="validationSummary">  
    @Html.RenderPartial("ValidationSummary");  
 </div>  
  <table width="455" border="0" cellspacing="0" cellpadding="10">  
               <tr>  
                 <td width="190">Username :<font class="Mandt">*</font></td>  
                 <td width="265">  
                   @Html.TextBoxFor(m => m.USR_Username, new { @class = "TextBox250", @autofocus = "autofocus" })</td>  
               </tr>  
               <tr>  
                 <td width="190">Password :<font class="Mandt">*</font></td>  
                 <td width="265">  
                   @Html.PasswordFor(m => m.USR_Password, new { @class = "TextBox250" })</td>  
               </tr>  
               <tr>  
                 <td width="190">Confirm Password :<font class="Mandt">*</font></td>  
                 <td width="265">  
                   @Html.PasswordFor(m => m.USR_Confirm_Password, new { @class = "TextBox250" })</td>  
               </tr>  
               <tr>  
                 <td>Email :</td>  
                 <td>  
                   @Html.TextBoxFor(m => m.USR_Email, new { @class = "TextBox250" })</td>  
               </tr>  
               <tr>  
                 <td>Phone :</td>  
                 <td>  
                   @Html.TextBoxFor(m => m.USR_Contact_No, new { @class = "TextBox250" })</td>  
               </tr>  
             </table>  

Step 4: Create view UserRegistration for User registration

 @using (Ajax.BeginForm("register",null, new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "myForm" }, new { id = "myForm" }))  
 @Html.RenderPartial("UserRegisterForm");  

You can get better idea of AjaxOptions from below link
http://msdn.microsoft.com/en-us/library/system.web.mvc.ajax.ajaxoptions(v=vs.118).aspx


Step 5: Create Controller method register
 

 [AcceptVerbs(HttpVerbs.Post)]  
 public ActionResult Register(UserModel user)  
 {  
   if (Request.IsAjaxRequest())  
   {  
     return PartialView("UserRegisterForm");  }  
   else  
   {  
     return View();  
   }  
 }  

If Ajax request then return partialview in UpdateTargetId html element otherwise whole view will be sent back.