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

Question

Я совершенно новый для 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 он находится в общем местоположении или в папке с другими видами? Как обновить класс контроллера для частичного просмотра?

Извините, если это легко сделать, им 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

Чтобы улучшить Дарин ответ, мы можем переместить код ДИВОЙ загрузки в случае нажатия кнопки. Таким образом, алгоритмы диалога всех положений диалогового окна работают над новым текстом, поэтому диалог устанавливается правильно.

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