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

Я совершенно новый для mvc и пытаюсь создать фиктивное приложение для изучения mvc 3. Я проработал свой путь в примере с музыкальным магазином, и теперь я пытаюсь расширить его в более реальном мире. С примером, когда вы хотите какой-либо новый элемент, вы перенаправляетесь на Create, но это хорошо, но я хочу вместо того, чтобы делать полный пост страницы назад. Я хочу использовать 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 он находится в общем местоположении или в папке с другими видами? Как обновить класс контроллера для частичного просмотра?

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

Ответ 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");
}

Ответ 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;">