MVC3- PartialViewResult as a Modal Dialog

Today we will see how we can display partial view result as a modal dialog

The partial view

 @model ReloadPartial.Models._UserModel  

 @using (Html.BeginForm("Validation","Home", FormMethod.Post, new { id = "UsrValidation" }))  

 {  

   <h3>  

     @Html.ValidationSummary()  

   </h3>  

   @Html.Raw("User Name:")  

   @Html.TextBoxFor(m => m.UserName)  

   <br />  

   @Html.Raw("Email:")  

   @Html.TextBoxFor(m => m.Email)  

   <br />  

   <input type="button" value="!!Action!!" onclick="SubmitForm();" />  

 }  

Now lets see the controller  implementation

 public PartialViewResult Validation(_UserModel model)  
     {  
       ModelState.Clear(); //important to see changes in UI  
       if (ModelState.IsValid)  
       {  
         //Can perform any action 
       }  
       return PartialView("_User",model);  
     }  

JavaScript

 <script language="javascript" type="text/javascript">  
   function SubmitForm() {  
     //select and serialize our small form  
     var frm = $("#UsrData").serialize();  
     // get form action  
     var action = $("#UsrData").attr("action");  
     $.ajax({  
       url: action, // or '@(Url.Action("Validation"))',  
       cache: false,  
       async: true,  
       type: "POST",  
       data: frm, //data to post to server  
       error: function (html) { alert(html); }, //something goes wrong...  
       success: function (data) {  
         showDialog(data);  
       }  
     });  
   }  
 function showDialog(data) {  
    $("#UsrData").html(data);  
   $("#UsrData").dialog({  
     modal: true,  
     title: "Details",  
     resizable: false,  
     open: true,  
     height: 150,  
     width: 200,  
     position: 'center',  
     buttons: [{ text: "Ok", click: function () {  
       $(this).dialog("close");  
       $(this).html('');  
     }  
     }]  
   });  
 }  
 </script