Загрузка частичного представления в jquery.dialog

Question

Я совершенно новичок в mvc и пытаюсь создать фиктивное приложение для изучения mvc 3. Я пробежался по примеру музыкального магазина и теперь немного пытаюсь расширить его в более реальное приложение.С примером, когда вы захотите создать новый элемент, вы будете перенаправлены в представление «Создать», и это нормально, но вместо полной публикации поста я хочу использовать jquery.dialog, чтобы открыть модальное всплывающее окно, которое позволит пользователювставьте новый элемент.

пока у меня есть

  <script type="text/javascript">

    $(function () {

        $('#dialog').dialog({
            autoOpen: false,
            width: 400,
            resizable: false,
            title: "hi there",
            modal: true,
            buttons: {
                "Close": function () {
                    $(this).dialog("close");
                }
            }
        });
        $('#my-button').click(function () {
        $('#dialog').dialog('open');
        });}); </script>

     <div id="dialog" title="Create Album" style="overflow: hidden;">
    @Html.Partial("_CreateAlbumPartial")</div>

Проблемы с этим - частичное представление загружается каждый раз не через ajax, и я действительно не знаю, где я должен размещать частичное представление,Shoukld это будет в общей папке или в папке с другими видами?Как мне обновить класс контроллера для обслуживания частичного представления?

Извините, если это легко сделать, я через 3 дня в mvc:)

Answer 1

Попробуйте что-то вроде этого:

<script type="text/javascript">
    $(function () {
        $('#dialog').dialog({
            autoOpen: false,
            width: 400,
            resizable: false,
            title: 'hi there',
            modal: true,
            open: function(event, ui) {
                //Load the CreateAlbumPartial action which will return 
                // the partial view _CreateAlbumPartial
                $(this).load("@Url.Action("CreateAlbumPartial")");
            },
            buttons: {
                "Close": function () {
                    $(this).dialog("close");
                }
            }
        });

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

Мы использовали функцию открытия, которая запускается при открытии диалога, и внутри мы отправляем AJAX-запрос к действию контроллера, который возвращает частичное:

public ActionResult CreateAlbumPartial()
{
    return View("_CreateAlbumPartial");
}

Answer 2

Чтобы улучшить ответ Дарина, мы можем переместить код загрузки div в событие нажатия кнопки.Таким образом, все алгоритмы положения диалогового окна работают с новым текстом, и поэтому диалог размещается правильно.

<script type="text/javascript">
   $(function () {
        $('#dialog').dialog({
            autoOpen: false,
            width: 400,
            resizable: false,
            title: 'hi there',
            modal: true,           
            buttons: {
                "Close": function () {
                    $(this).dialog("close");
                }
            }
        });

        $('#my-button').click(function () {
            //Load the CreateAlbumPartial action which will return 
            // the partial view _CreateAlbumPartial
            $('#dialog').load("@Url.Action("CreateAlbumPartial")", 
                    function (response, status, xhr) {
                        $('#dialog').dialog('open');
                    });   
        });
    });
</script>
<div id="dialog" title="Create Album" style="overflow: hidden;">