Populate jquery modal dialog with MVC partial view async, and show in center of screen

I'm trying to use the jquery modal dialog to show a partial view async when clicking on something. Pretty simple, and there are loads of questions on this, but I can't seem to get it work. I have had the modal displaying, but not in the center. And I've read it's because I'm populating the div after the dialog is displayed, therefore the position is relative to the empty div, not the populated one - and I've proved this to be the case by showing some static content, and it centers fine.

So now, I'm trying to get the partial view first, then show the dialog in the load() callback, but it's not working. I get an error on the 'dialog('open')' line, because the dialog method is undefined. Here's my code:

(P.S. I'm new to javascript/jQuery, so sorry if it's pretty obvious)

<script type="text/javascript">

    $(function () {
        $('#my-dialog').dialog({
            autoOpen: false,
            width: 400,
            resizable: false,
            modal: true
        });
    });

    $(document).ready(function() {
        $('#show-modal').click(function() {
            $('#my-dialog').load("@Url.Action("MyActionOnController")", function() {
                $('#my-dialog').dialog('open');
            });

            return false;
        });
    });

</script>

<div id="my-dialog"></div>

<a href="#" id="show-modal">Click Me </a>

Help appreciated!

Edit I've changed the code to match Darin's and uploaded an image showing what the problem appears to be?

Your code looks fine and it worked when I tested it. Here's my full test case:

Controller:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult MyActionOnController()
    {
        // TODO: You could return a PartialView here of course
        return Content("<div>Hello world</div>", "text/html");
    }
}

View (~/Views/Home/Index.cshtml):

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Test</title>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" type="text/css" media="all" /> 
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#my-dialog').dialog({
                autoOpen: false,
                width: 400,
                resizable: false,
                modal: true
            });

            $('#show-modal').click(function() {
                $('#my-dialog').load("@Url.Action("MyActionOnController")", function() {
                    $(this).dialog('open');
                });
                return false;
            });

        });
    </script>
</head>
<body>
    <div id="my-dialog"></div>
    <a href="#" id="show-modal">Click Me </a>
</body>
</html>

OK, I found the problem:

The partial view I was returning for my modal dialog was created using the MVC scaffolding for an edit view, which by default includes some jQuery scripts which were already included in the layout page, which must have been causing the problem.

All working nicely now!

Possible scope issue?

You're effectively declaring two document.ready functions. Just put all of the code inside:

$(function () {

    });

来源：https://stackoverflow.com/questions/6846139/populate-jquery-modal-dialog-with-mvc-partial-view-async-and-show-in-center-of

标签

jquery

asp.net-mvc

jquery-ui-dialog