Caricamento di una vista parziale in jquery.dialog

Question

Sono completamente nuovo in mvc e sto provando a creare un'applicazione fittizia per imparare mvc 3. Ho lavorato a modo mio attraverso l'esempio del negozio di musica e ora sto cercando di estenderlo leggermente in un'applicazione più reale del mondo. Con l'esempio ogni volta che si desidera qualsiasi nuovo elemento si viene reindirizzati alla vista di creazione che va bene tuttavia io voglio invece di fare un post della pagina intera indietro Voglio usare il jquery.dialog per aprire un popup modale che consentirà all'utente inserire un nuovo elemento.

Finora ho

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

Problemi con questa è la vista parziale viene caricato ogni volta non attraverso ajax e io davvero non so dove dovrei ponendo la vista parziale. Shoukld si trova nella posizione condivisa o nella cartella con le altre viste? Come si aggiorna la classe controller per soddisfare la vista parziale?

Scusate se questi sono facili da fare, im 3 giorni in :) MVC

Answer 1

provare qualcosa di simile:

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

Abbiamo usato la funzione di apertura che viene attivato quando la finestra è aperta e all'interno inviamo una richiesta AJAX ad un'azione di controllo, che sarebbe tornato il parziale:

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

Answer 2

per migliorare Darin risposta, siamo in grado di spostare il codice div carico in caso pulsante di scatto. In questo modo tutti gli algoritmi della posizione della finestra di dialogo funzionano sul nuovo testo, quindi la finestra di dialogo viene posizionata correttamente.

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