web-dev-qa-db-fra.com

Chargement d'une vue partielle dans jquery.dialog

Je suis complètement nouveau sur mvc et j'essaie de créer une application factice pour apprendre mvc 3. J'ai travaillé sur l'exemple du magasin de musique et maintenant j'essaie de l'étendre légèrement dans une application plus réelle. Avec l'exemple chaque fois que vous voulez un nouvel élément, vous êtes redirigé vers la vue Créer, ce qui est bien, mais je veux au lieu de faire un post pleine page, je veux utiliser le jquery.dialog pour ouvrir une popup modale qui permettra à l'utilisateur de 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>

Les problèmes avec ceci sont que la vue partielle est chargée à chaque fois pas via ajax et je ne sais pas vraiment où je devrais placer la vue partielle. Shoukld que ce soit dans l'emplacement partagé ou dans le dossier avec les autres vues? Comment mettre à jour la classe de contrôleur pour répondre à la vue partielle?

Désolé si c'est facile à faire, je mvc 3 jours :)

asp.net-mvc-3razor
44
Diver Dan

Essayez quelque chose comme ceci:

<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 du contrôleur qui retournerait le partiel:

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

Pour améliorer la réponse de Darin, nous pouvons déplacer le code de chargement div dans l'événement click click. De cette façon, tous les algorithmes de position de la boîte de dialogue fonctionnent sur le nouveau texte et la boîte de dialogue est donc 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;">
9
Marco