Vue partielle et jQuery

Bonjour,
Je suis en train de réaliser une encapsulation/abstraction du jQuery Dialog. Le but étant de pouvoir créer une popup avec un minimum de lignes.
Pour cela j'ai crée un type de Model contenant toutes les informations basiques que l'on peut utiliser pour initialiser le Dialog:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
   public class AbstractDialog
   {
      public String Name { get; set; } // "Iddentifiant du Dialog"
      public String FormId { get; set; } // Iddentifiant du form
      public String SaveController { get; set; } // Controller auquel on envoi le post
      public String SaveAction { get; set; } // Methode du controller auquel on envoi le post
      public String LoadedView { get; set; } //Vue a charger dans le Dialog
      public int Width { get; set; }
      public int Height { get; set; }
      public bool AutoOpen { get; set; }
      public bool Modal { get; set; }
      public FormMethod FormMethod { get; set; }
   }

Je l'initialise de cette manière à l'appel de la methode (ceci est un test):

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
public ActionResult LoadDialog(string Name)
      {
         var model = new AbstractDialog()
         {
            AutoOpen = false,
            FormId = "Form-" + Name,
            Name = Name,
            FormMethod = FormMethod.Post,
            SaveController = "Home",
            SaveAction = "SaveFirstDialog",
            Height = 500,
            Width = 500,
            Modal = true,
            LoadedView = "Home/LoadFirstDialog"
         };
         return PartialView("AbstractDialog", model);
      }

Dans mon index j'ai ces quelques lignes:

Code:

1
2
3
4
5
6
7
8
<div id="DialogPlacement">
</div>
<script type="text/javascript">
   $(function () {
      console.log("Load Dialog");
      $("#DialogPlacement1").load("/Home/LoadDialog?Name=Dialog"); // Appel la methode du controller vue plus haut
   });
</script>

Voila la vue partielle sensée générer la popup

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
@model AbstractRazorDialog.Models.AbstractDialog
@{
 Layout = null;
}
<a role="button" aria-disabled="false">Open</a>
@using (Html.BeginForm(Model.SaveAction, Model.SaveController, Model.FormMethod, new { id = Model.FormId }))
{
   <div id="Dialog-@Model.Name">
   </div>
}
<script type="text/javascript">
   $(function () {
      var Dialog = "#Dialog-@Html.Raw(Model.Name)";
      console.log(Dialog);
      $(Dialog).dialog({
         autoOpen: ("@Model.AutoOpen" == "False" ? false : true),
         width: parseInt("@Model.Width"),
         height: parseInt("@Model.Height"),
         modal: ("@Model.Modal" == "False" ? false : true),
         buttons: {
            "Valider": function () {
               if ($("#@Html.Raw(Model.FormId)").validate().form()) {
                  $.post("@Html.Raw(Model.SaveController)/@Html.Raw(Model.SaveAction)", $("#@Html.Raw(Model.FormId)").serialize(), function (data) {
                     $("#Dialog-@Html.Raw(Model.Name)").dialog("close");
                  });
               }
            },
            Cancel: function () { $(this).dialog("close"); }
         }
      });
      console.log("#Dialog-@Html.Raw(Model.Name)");
      
      $("#Dialog-@Html.Raw(Model.Name)").load("@Html.Raw(Model.LoadedView)");
   });
</script>

Mais au moment de l'initialisation j'ai un : "Uncaught TypeError: Object [object Object] has no methode 'dialog'"
Jusqu'a présent j'ai toujours su contourner le problème a l'apparition de cette erreur, mais aujourd'hui je ne voit pas de deuxieme methode pour atteindre mon but.
Merci pour toute aide.
Je posterai les sources pour les intéressés une fois fini :ccool: