Remplir le dialog modal jQuery avec une vue partielle MVC asynchrone et l’afficher au centre de l’écran

J’essaie d’utiliser la boîte de dialog modale jQuery pour afficher une vue partielle asynchrone lorsque vous cliquez sur quelque chose. C’est assez simple et il y a beaucoup de questions à ce sujet, mais je n’arrive pas à le faire fonctionner. J’ai eu l’affichage modal, mais pas au centre. Et j’ai lu que c’est parce que je renseigne la div après l’affichage de la boîte de dialog. Par conséquent, la position est relative à la div vide, pas à celle remplie – et j’ai prouvé que c’était le cas en affichant du contenu statique, et ça se passe bien.

Alors maintenant, j’essaie d’abord d’obtenir la vue partielle, puis d’afficher la boîte de dialog dans le rappel load (), mais cela ne fonctionne pas. Je reçois une erreur sur la ligne ‘dialog (‘ open ‘)’, car la méthode de dialog est indéfinie. Voici mon code:

(PS je suis nouveau sur javascript / jQuery, donc désolé si c’est assez évident)

 $(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; }); });  
 Click Me

Aide appréciée!

Modifier J’ai modifié le code pour qu’il corresponde à celui de Darin et téléchargé une image montrant le problème.

wtf

Votre code a l’air bien et cela a fonctionné lorsque je l’ai testé. Voici mon cas de test complet:

Manette:

 public class HomeController : Controller { public ActionResult Index() { return View(); } public ActionResult MyActionOnController() { // TODO: You could return a PartialView here of course return Content("Hello world
", "text/html"); } }

Afficher (~ / Vues / Accueil / Index.cshtml):

 @{ Layout = null; }     Test       
 Click Me

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

La vue partielle que je revenais pour ma boîte de dialog modale a été créée à l’aide de l’échafaudage MVC pour une vue d’édition, qui inclut par défaut des scripts jQuery qui étaient déjà inclus dans la page de présentation, ce qui doit probablement être à l’origine du problème.

Tout fonctionne bien maintenant!

Problème de scope possible?

Vous déclarez effectivement deux fonctions document.ready . Il suffit de mettre tout le code à l’intérieur:

 $(function () { });