Remplir le dialogue modal de jquery avec la vue partielle asynchrone de MVC, et montrer au centre de l'écran

Je suis en train d'utiliser la boîte de dialogue modale jquery pour afficher une vue partielle asynchrone lorsque l'on clique sur quelque chose. Assez simple, et il ya des tas de questions sur ce sujet, mais je n'arrive pas à le faire fonctionner. J'ai eu la modale de l'affichage, mais pas dans le centre. Et je l'ai lu, c'est parce que je suis le remplissage de la div après la boîte de dialogue est affichée, par conséquent, la position est relative à la div vide, pas l'peuplée - et je l'ai prouvé à être le cas en montrant quelques contenu statique, et les centres d'amende.

Alors maintenant, je vais essayer d'obtenir la vue partielle d'abord, puis afficher la boîte de dialogue dans le load() de rappel, mais cela ne fonctionne pas. J'obtiens une erreur sur le dialogue " ("ouvert")' ligne, car la boîte de dialogue méthode n'est pas défini. Voici mon code:

(P. S. je suis nouveau sur javascript/jQuery, donc désolé si c'est assez évident)

<script type="text/javascript">

    $(function () {
        $('#my-dialog').dialog({
            autoOpen: false,
            width: 400,
            resizable: false,
            modal: true
        });
    });

    $(document).ready(function() {
        $('#show-modal').click(function() {
            $('#my-dialog').load("@Url.Action("MyActionOnController")", function() {
                $('#my-dialog').dialog('open');
            });

            return false;
        });
    });

</script>

<div id="my-dialog"></div>

<a href="#" id="show-modal">Click Me </a>

Aide appréciée!

Modifier j'ai modifié le code pour correspondre à Darin et téléchargé une image montrant ce que le problème semble être?

Remplir le dialogue modal de jquery avec la vue partielle asynchrone de MVC, et montrer au centre de l'écran

source d'informationauteur David Masters

  1. 13

    Votre code a l'air bien et ça fonctionnait quand je l'ai testé. Voici mon test complet de l'affaire:

    Contrôleur:

    public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult MyActionOnController()
    {
        //TODO: You could return a PartialView here of course
        return Content("<div>Hello world</div>", "text/html");
    }
}

    Vue (~/Views/Home/Index.cshtml):

    @{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Test</title>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" type="text/css" media="all" /> 
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#my-dialog').dialog({
                autoOpen: false,
                width: 400,
                resizable: false,
                modal: true
            });

            $('#show-modal').click(function() {
                $('#my-dialog').load("@Url.Action("MyActionOnController")", function() {
                    $(this).dialog('open');
                });
                return false;
            });

        });
    </script>
</head>
<body>
    <div id="my-dialog"></div>
    <a href="#" id="show-modal">Click Me </a>
</body>
</html>
  2. 2

    OK, j'ai trouvé le problème:

    La vue partielle, j'étais de retour pour mon boîte de dialogue modale a été créée en utilisant l'architecture MVC échafaudage pour une modification en vue, ce qui inclut par défaut certains scripts jQuery qui étaient déjà inclus dans la mise en page, qui doit avoir été à l'origine du problème.

    Tout fonctionne parfaitement maintenant!

  3. 0

    Possible problème de portée?

    Vous êtes effectivement déclarer deux document.ready fonctions. Il suffit de mettre tout le code à l'intérieur:

    $(function () {

    });