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

{



@Html.ValidationSummary()



@Html.Raw("User Name:")

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




@Html.Raw("Email:")

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






}

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

   
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

Published by Nirbhay

Technology Geek,Blogger,Reviewer

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: