Chargement d'une vue partielle dans jquery.dialog

Question

Je suis complètement nouvelle mvc et en essayant de créer une application factice pour apprendre mvc 3. J'ai travaillé mon chemin à travers le magasin de musique exemple et maintenant je suis en train d'essayer de l'étendre à peu dans un monde plus réel de l'application. Avec l'exemple chaque fois que vous le souhaitez à tout nouvel élément, vous êtes redirigé vers le Créer une vue qui est très bien cependant je veux au lieu de faire une pleine page de message de retour je veux utiliser le jquery.boîte de dialogue pour ouvrir un modal popup qui va permettre à l'utilisateur d'insérer un nouvel élément.

jusqu'à présent j'ai

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

Des problèmes avec cela, c'est la vue partielle, est chargé, à chaque fois, non pas à travers l'ajax et je n'ai pas vraiment savoir où je dois placer la vue partielle. Shoukld à l'emplacement partagé ou dans le dossier avec les autres points de vue? Comment puis-je mettre à jour le contrôleur de classe pour répondre à la vue partielle?

Désolé si ceux-ci sont faciles à faire, im 3 jours en mvc :)

Answer 1

Essayez quelque chose comme ça:

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

Nous avons utilisé la fonction open qui est déclenchée lorsque la boîte de dialogue est ouverte et à l'intérieur, nous envoyons une requête AJAX à une action de contrôleur qui renverrait le partiel:

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

Answer 2

Pour améliorer la réponse de Darin, nous pouvons déplacer le code de chargement de div dans l'événement de clic sur le bouton. De cette façon, tous les algorithmes de la boîte de dialogue de la position fonctionnent sur le nouveau texte, de sorte que la boîte de dialogue est correctement placée.

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