Заполнение модального диалога jquery с частичным представлением MVC async и отображение в центре экрана

Я пытаюсь использовать диалоговое окно jquery modal для отображения частичного представления async при нажатии на что-то. Довольно просто, и на это много вопросов, но я не могу заставить его работать. У меня было модальное отображение, но не в центре. И я прочитал его, потому что я заполняю div после отображения диалогового окна, поэтому позиция относительно пустого div, а не заполненного, и я доказал, что это так, показывая некоторый статический контент, и он отлично расположен.

Итак, теперь я пытаюсь сначала получить частичный вид, а затем показать диалог в обратном вызове load(), но он не работает. Я получаю сообщение об ошибке в строке диалога ('open') ', потому что метод диалога undefined. Здесь мой код:

(P.S. Я новичок в javascript/jQuery, поэтому извините, если это довольно очевидно)

<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>

Помогите оценить!

Изменить. Я изменил код, чтобы он соответствовал Дарину и загрузил изображение, показывающее, что проблема выглядит?

Ответ 1

ОК, я нашел проблему:

Частичное представление, которое я возвращал для моего модального диалога, было создано с помощью MVC-лесов для редактирования, которое по умолчанию включает некоторые скрипты jQuery, которые уже были включены в страницу макета, что должно было вызвать проблему.

Теперь все работает красиво!

Ответ 2

Ваш код выглядит хорошо, и он работал, когда я его тестировал. Вот мой полный тестовый пример:

Контроллер:

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

Просмотр (~/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>

Ответ 3

Возможная проблема с возможностями?

Вы эффективно объявляете две функции document.ready. Просто поместите весь код внутри:

$(function () {

    });