Le chargement d'une vue partielle en jquery.dialogue

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.

pour l'instant 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 🙂

InformationsquelleAutor Diver Dan | 2011-01-26
  1. 78

    Essayer quelque chose comme cela:

    <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 d'ouverture qui est déclenché lorsque le dialogue est ouvert et à l'intérieur de nous envoyer une requête AJAX à l'action d'un contrôleur qui permettrait le retour partiel:

    public ActionResult CreateAlbumPartial()
{
    return View("_CreateAlbumPartial");
}
    • Grâce Darin, pourquoi ne le _layout.cshtml de style appliquée à la vue partielle? Je pensais qu'ils étaient destinées à être comme un asp.net usercontrol? C'EST aussi ok pour utiliser @Url.Le contenu lorsque la vue se trouve dans un autre dossier? cheers encore pour votre aide
    • vous pouvez désactiver cette en mettant: @{ Layout = null; } à l'intérieur de votre partielle ou par retour de PartialView("_CreateAlbumPartial") à l'intérieur de votre contrôleur de l'action
    • Génial sa venir tous les combinés lentement :)l'une ou l'autre méthode avez des problèmes de performance? ou sont-ils à la fois semblables
    • Merci. Pourriez-vous svp répondre à stackoverflow.com/questions/9413467/... trop?
    • Le bouton de fermeture ne fonctionne pas pour moi avec cet exemple. Quelqu'un d'autre a le même problème?
    • Darin, puis-je demander à propos d'un passage de paramètres à CreateAlbumPartial ? Si j'avais des paramètres à passer à l'Action, comment le feriez-vous ? Merci
    • vous pouvez utiliser un modèle de vue.
    • est ce que j'ai fait public ActionResult GetPatFormData(int id) { return PartialView("_PatDetails", vm); } et dans Jquery var url = '@Url.Action("GetPatFormData", "Pat")?id=' + patId; $("#PatDetailDialog").load(url, function (réponse, le statut, xhr) { $('#PatDetailDialog').la boîte de dialogue ("ouvrir");});
    • Ce JavaScript ne pas analyser dans JSFIDDLE?

    InformationsquelleAutor Darin Dimitrov
  2. 9

    Pour améliorer Darin réponse, nous pouvons nous déplacer à la div de chargement de code dans l'événement click du bouton.
    De cette façon, toutes les positions du alghorithms de la boîte de dialogue fonctionne sur le nouveau texte, et donc le dialogue est placé correctement.

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