Cargando una vista parcial en jquery.dialog

Question

Soy completamente nuevo en mvc y trato de crear una aplicación ficticia para aprender mvc 3. He trabajado en el ejemplo de la tienda de música y ahora estoy intentando extenderlo ligeramente en una aplicación más real del mundo. Con el ejemplo cada vez que desee un nuevo elemento, se lo redirecciona a la vista Crear, que está bien; sin embargo, en lugar de volver a hacer una publicación de página completa, quiero utilizar el jquery.dialog para abrir un menú emergente modal que permita al usuario para insertar un nuevo elemento

Hasta ahora he

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

Problemas con esta es la vista parcial se carga cada vez que no a través de ajax y yo no sé realmente donde debería estar poniendo la vista parcial. ¿Debería estar en la ubicación compartida o en la carpeta con las otras vistas? ¿Cómo actualizo la clase del controlador para adaptarme a la vista parcial?

Lo siento si estos son fáciles de hacer, im 3 días en MVC :)

Answer 1

Pruebe algo como esto:

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

se utilizó la función de apertura que se activa cuando se abre el cuadro de diálogo y en el interior enviamos una petición AJAX a una acción de controlador que devolver el parcial:

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

Answer 2

para mejorar la respuesta Darin, podemos mover el código div carga en el evento de clic de botón. De esta forma, todos los alghorithms de posición del diálogo funcionan en el nuevo texto, por lo que el diálogo se coloca correctamente.

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