Java script function for Dialog popup
After click the link popup the data which is return form that link.
link
@Html.ActionLink("Name", "Action","Controller",new {//data need to pass as query string}, new {
// html attributes
class = "LinkClassName", dialog-title = "this is tiltle name ",
dialog-id = "dailog id" ....
});
$(".LinkClassName").live("click", function (e) {
e.preventDefault();
.append($loading) // this is for load image for fully loaded
.addClass("dialog") // css class for loading
.attr("id", $(this) // div id
.attr("dialog-id")) // poup id
.attr("dialog-path", $(this).attr("data-dialog-path")) // after close page refresh
.appendTo("body") // attached div content to the body
.dialog({
title: $(this).attr("data-dialog-title"), // popup dialog title
close: function () { $(this).remove() }, // close finction
modal: true, /
resizable: false,
width: '400px'
}).load(this.href); // href is the url
});
more details available here.(http://jqueryui.com/)
Form submit using Ajax
var form = $("#yourFormId");
$.ajax({
url: '@Url.Action("ActionName","ControllerName")',
data: form.serialize(),
type: 'POST',
success: function (data) {
$("#targetUpdateDiv").html(data);
}
});