Show MVC3 View in JQuery Dialog

Its possible to show an asp.net mvc3 view in a jQuery Dialog window. Suppose you have a listing of your
data displaying on your page and would like to show details for a particular record or id you would need to
call jQuery Dialog to load your view without having to go back and forth.
See below code which does exactly that

[code]
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script type="text/javascript">
$(function () {
$(‘#dialog’).dialog({
autoOpen: false,
width: 600,
resizable: false,
title: ‘My Account Details’,
modal: true,
open: function (event, ui) {
//Load View

$(this).load("/Account/GetDetails");
},
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});

$(‘#my-button’).click(function () {
$(‘#dialog’).dialog(‘open’);
});
});
</script>
<div id="dialog" title="Create Album" style="overflow: hidden;"></div>
[/code]

Get Free Email Updates!

Signup now and receive free offers, discounts & coupon codes

I will never give away, trade or sell your email address. You can unsubscribe at any time.

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge