IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

ASP.NET MVC Discussion :

Vue partielle et jQuery


Sujet :

ASP.NET MVC

Mode arborescent

Invité Vue partielle et jQuery 01/07/2013, 14h01
Invité Apres quelques modification,... 01/07/2013, 16h29
Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Invité
    Invité(e)
    Par défaut 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 C# : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 html : Sélectionner tout - Visualiser dans une fenêtre à part
    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 html : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    Dernière modification par Invité ; 01/07/2013 à 14h35.

Discussions similaires

  1. [UI] Vue partielle et jQuery
    Par Invité dans le forum jQuery
    Réponses: 0
    Dernier message: 01/07/2013, 14h17
  2. Menu - Vue partielle - Treeview
    Par antrax2013 dans le forum ASP.NET MVC
    Réponses: 2
    Dernier message: 09/11/2010, 14h35
  3. [1.x] Rester dans un vue partielle pour l'affichage des erreurs
    Par undercrash dans le forum Symfony
    Réponses: 3
    Dernier message: 13/08/2010, 01h33
  4. Construction de vue partiel
    Par lesanglier dans le forum Ruby
    Réponses: 1
    Dernier message: 21/04/2010, 11h28
  5. [ASP.NET MVC] Codebehind d'une vue partielle
    Par Nadd dans le forum ASP.NET
    Réponses: 2
    Dernier message: 02/10/2009, 13h59

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo