1. #1
    Membre actif
    Homme Profil pro
    Développeur .NET
    Inscrit en
    décembre 2007
    Messages
    694
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Développeur .NET

    Informations forums :
    Inscription : décembre 2007
    Messages : 694
    Points : 187
    Points
    187

    Par défaut bug entre asp.net mvc et jqueryui dialog form

    Bonjour.

    Pour le projet que je suis entrain de monter pour ma boite, je sais que je vais avoir besoin de pas mal de popup contenant des formulaires.

    voici mon layout :
    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
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    <!DOCTYPE html>
    <html lang="fr">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
            <meta charset="utf-8" />
            <title>@ViewBag.Title - Mon application ASP.NET MVC</title>
            <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
            <meta name="viewport" content="width=device-width" />
     
            <!-- CSS -->
            @Styles.Render("~/Content/_Unauthentificated")
            @RenderSection("css", required: false)
     
            <!-- modernizr -->
            @Scripts.Render("~/bundles/modernizr")
     
            <!-- jQuery -->
            <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
            <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
            <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
            @RenderSection("jquery", required: false)
     
            <!-- Scripts -->
            @Scripts.Render("~/bundles/_Unauthentificated/Layout", "~/bundles/jqueryval")
            @RenderSection("scripts", required: false)
        </head>
        <body>
            @Html.Partial("_UnauthentificatedHeaderPartial")
            @Html.Partial("_UnauthentificatedNavPartial")
            @Html.Partial("_UnauthentificatedFooterPartial")
     
            <div id="dialog-form"></div>
        </body>
    </html>
    voici un fichier javascript qui initialise une popup vide :
    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
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    $(function () {
     
        $("#dialog-form").dialog({
            autoOpen: false,
            closeOnEscape: true,
            modal: true,
            resizable: false,
            close: function () {
                $(this).empty();
            }
        });
     
        function DisplayPopup(Title, Url, Width, Height) {
            $("#dialog-form").dialog({
                                title: Title,
                                width: Width,
                                height: Height
                            })
                            .html("<div class=\"loading\"></div>")
                            .dialog("open")
                            .load(Url);
        }
     
        $("a.button.login").click(function () {
            DisplayPopup("Connexion", "/fr-FR/Account/Login", 500, 350);
            return false;
        });
     
    });
     
    $(document).ajaxStop(function () {
        $.validator.unobtrusive.parse('form');
    });
    voici ma vue partielle contenant mon formulaire de login :
    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
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    @model LivDevis.Models.LoginModel
     
    <script>
        $(function () {
     
            $("form").submit(function () {
     
                var UserName = $("input[type=text]#UserName").val();
                var Password = $("input[type=password]#Password").val();
                var RememberMe = $("input[type=checkbox]#RememberMe").is(':checked');
     
                var loginData = [];
                loginData.push({ "name": "login.UserName", "value": UserName });
                loginData.push({ "name": "login.Password", "value": Password });
                loginData.push({ "name": "login.RememberMe", "value": RememberMe });
     
                $.ajax({
                    url: "/fr-FR/Account/Login",
                    method: "post",
                    data: loginData,
                    success: function (error) {
                        alert(error);
                    }
                });
     
                return false;
     
            });
     
        });
    </script>
     
    <section id="center">
        <hgroup class="title">
            <h1>@*@ViewBag.Title.*@</h1>
        </hgroup>
     
        <section id="loginForm">
            <h2>@LivDevis.Resources.Views.Account.Login.UseLocalAccount</h2>
            <span>@ViewBag.Error</span>
            @using (Html.BeginForm("Login", "Account", FormMethod.Post, new { autocomplete = "off" })) {
                @Html.ValidationSummary(true)
     
                <fieldset>
                    <legend>@LivDevis.Resources.Views.Account.Login.ConnectionForm</legend>
                    <ol>
                        <li>
                            @Html.LabelFor(m => m.UserName)
                            @Html.TextBoxFor(m => m.UserName)
                            @Html.ValidationMessageFor(m => m.UserName)
                        </li>
                        <li>
                            @Html.LabelFor(m => m.Password)
                            @Html.PasswordFor(m => m.Password)
                            @Html.ValidationMessageFor(m => m.Password)
                        </li>
                        <li>
                            @Html.CheckBoxFor(m => m.RememberMe)
                            @Html.LabelFor(m => m.RememberMe, new { @class = "checkbox" })
                        </li>
                    </ol>
                    <input type="submit" value="@LivDevis.Resources.Views.Account.Login.Connecting" />
                </fieldset>
            }
        </section>
    </section>
    voici un extrait de mon controller :
    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
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    using LivDevis.ClassLibrary.Entities;
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Transactions;
    using System.Web;
    using System.Web.Mvc;
    using System.Web.Security;
    using DotNetOpenAuth.AspNet;
    using Microsoft.Web.WebPages.OAuth;
    using WebMatrix.WebData;
    //using LivDevis.Filters;
    using LivDevis.Models;
     
    namespace LivDevis.Controllers
    {
        //[Authorize]
        //[InitializeSimpleMembership]
        public class AccountController : BaseController
        {
            //
            // GET: /Account/Login
            //[AllowAnonymous]
            public ActionResult Login()
            {
                return PartialView("LoginPartial");
            }
     
            [HttpPost]
            public string Login(LoginModel login)
            {
                string response = string.Empty;
     
                if (ModelState.IsValid)
                {
                    // trying to connect the user
                    if (Membership.ValidateUser(login.UserName, login.Password))
                    {
                        if (WebSecurity.Login(login.UserName, login.Password, persistCookie: false))
                        {
                            return response;
                        }
                    }
                    // declare the connection attempt
                    else
                    {
                        LivDevis.ClassLibrary.Entities.User user = LivDevis.ClassLibrary.Entities.User.GetByUserName(login.UserName);
     
                        switch (user != null)
                        {
                            case true:
                                response = (!user.IsAuthorized) ? "Votre compte a été désactivé. Veuillez consulter un administrateur." : response;
                                response = (!user.IsActivated) ? "Ce compte n'a pas été activé. Veuillez consulter l'email de demande d'activation de compte." : response;
                                response = (user.IsActivated && user.IsAuthorized) ? "Erreur sur le mot de passe." : response;
                            break;
     
                            case false:
                                response = "Erreur sur le nom d'utilisateur";
                            break;
                        }
                    }
                }
     
                return response;
            }
        }
    }
    Alors maintenant, quels sont les bugs ?

    D'une part, lorsque je clique sur le bouton de connexion, mon formulaire n'est pas validé par le plugin "jqueryval", ça passe directement au submit !

    Deuxième bug, lorsque je procède au submit, je n'entre pas dans la méthode de mon controller, et j'obtiens une alerte contenant le contenu HTML de ma vue partielle.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    success: function (error) {
                        alert(error);
                    }
    Comment puis-je m'assurer que "jqueryval" fonctionne de nouveau, et corriger le submit ?

    Merci pour votre aide !

  2. #2
    Membre actif
    Homme Profil pro
    Développeur .NET
    Inscrit en
    décembre 2007
    Messages
    694
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Développeur .NET

    Informations forums :
    Inscription : décembre 2007
    Messages : 694
    Points : 187
    Points
    187

    Par défaut

    Bon, le premier bug est réglé. J'ai confondu "type" et "method" dans la méthode ajax :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    $.ajax({
                    url: "/fr-FR/Account/Login",
                    type: "POST",
                    data: loginData,
                    success: function (error) {
                        //$("span.error").html(error);
                        alert(error);
                    }
                });
    En revanche, j'ai toujours le problème que mon form procède au submit sans faire les vérifications avec "jqueryval".

  3. #3
    Membre actif
    Homme Profil pro
    Développeur .NET
    Inscrit en
    décembre 2007
    Messages
    694
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Développeur .NET

    Informations forums :
    Inscription : décembre 2007
    Messages : 694
    Points : 187
    Points
    187

    Par défaut

    j'ai réussi. voici l'ensemble de mon code :

    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
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    <!DOCTYPE html>
    <html lang="fr">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
            <meta charset="utf-8" />
            <title>@ViewBag.Title - Mon application ASP.NET MVC</title>
            <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
            <meta name="viewport" content="width=device-width" />
     
            <!-- CSS -->
            @Styles.Render("~/Content/_Unauthentificated")
            @RenderSection("css", required: false)
     
            <!-- modernizr -->
            @Scripts.Render("~/bundles/modernizr")
     
            <!-- jQuery -->
            <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
            <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
            <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
            @RenderSection("jquery", required: false)
     
            <!-- Scripts -->
            @Scripts.Render("~/bundles/_Unauthentificated/Layout")
            @RenderSection("Scripts", required: false)
        </head>
        <body>
            @RenderBody()
            <div id="dialog-form"></div>
        </body>
    </html>
    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
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    $(function () {
     
        $("#dialog-form").dialog({
            autoOpen: false,
            closeOnEscape: true,
            draggable: false,
            modal: true,
            resizable: false,
            close: function () {
                $(this).empty();
            }
        });
     
        function DisplayPopup(Title, Url, Width, Height) {
            $("#dialog-form").dialog({
                                title: Title,
                                width: Width,
                                height: Height
                            })
                            .html("<div class=\"loading\"></div>")
                            .dialog("open")
                            .load(Url);
        }
     
        $("a.button.login").click(function () {
            DisplayPopup("Connexion", "/fr-FR/Account/Login", 500, 350);
            return false;
        });
     
    });
     
    $(document).ajaxStop(function () {
        $.validator.unobtrusive.parse('form');
    });
    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
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    $(function () {
     
        $("section#loginForm form").submit(function () {
     
            var IsValid = $("form").valid();
     
            if (IsValid) {
                var UserName = $("input[type=text]#UserName").val();
                var Password = $("input[type=password]#Password").val();
                var RememberMe = $("input[type=checkbox]#RememberMe").is(':checked');
     
                var loginData = [];
                loginData.push({ "name": "login.UserName", "value": UserName });
                loginData.push({ "name": "login.Password", "value": Password });
                loginData.push({ "name": "login.RememberMe", "value": RememberMe });
     
                $.ajax({
                    url: "/fr-FR/Account/Login",
                    type: "POST",
                    data: loginData,
                    success: function (error) {
                        $("span.error").html(error);
                    }
                });
            }
     
            return false;
     
        });
     
    });
    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
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    @model LivDevis.Models.LoginModel
     
    @Styles.Render("~/Content/_Unauthentificated/Login")
     
    @Scripts.Render("~/bundles/jqueryval",
                    "~/bundles/_Unauthentificated/Login")
     
    <section id="loginForm">
        @using (Html.BeginForm("Login", "Account", FormMethod.Post, new { autocomplete = "off" }))
        {
            @Html.ValidationSummary(true)
     
            <fieldset>
                <legend>@LivDevis.Resources.Views.Account.Login.ConnectionForm</legend>
                <span class="error">@*@ViewBag.Error*@</span>
                <ol>
                    <li>
                        @Html.LabelFor(m => m.UserName)
                        @Html.TextBoxFor(m => m.UserName)
                        @Html.ValidationMessageFor(m => m.UserName)
                    </li>
                    <li>
                        @Html.LabelFor(m => m.Password)
                        @Html.PasswordFor(m => m.Password)
                        @Html.ValidationMessageFor(m => m.Password)
                    </li>
                    <li>
                        @Html.CheckBoxFor(m => m.RememberMe)
                        @Html.LabelFor(m => m.RememberMe, new { @class = "checkbox" })
                    </li>
                </ol>
                <input type="submit" value="@LivDevis.Resources.Views.Account.Login.Connecting" class="button tryit" />
            </fieldset>
        }
    </section>
    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
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    using LivDevis.ClassLibrary.Entities;
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Transactions;
    using System.Web;
    using System.Web.Mvc;
    using System.Web.Security;
    using DotNetOpenAuth.AspNet;
    using Microsoft.Web.WebPages.OAuth;
    using WebMatrix.WebData;
    //using LivDevis.Filters;
    using LivDevis.Models;
     
    namespace LivDevis.Controllers
    {
        //[Authorize]
        //[InitializeSimpleMembership]
        public class AccountController : BaseController
        {
            //
            // GET: /Account/Login
            //[AllowAnonymous]
            public ActionResult Login()
            {
                return PartialView("LoginPartial");
            }
     
            [HttpPost]
            public string Login(LoginModel login)
            {
                string response = string.Empty;
     
                if (ModelState.IsValid)
                {
                    // trying to connect the user
                    if (Membership.ValidateUser(login.UserName, login.Password))
                    {
                        if (WebSecurity.Login(login.UserName, login.Password, persistCookie: false))
                        {
                            return response;
                        }
                    }
                    // declare the connection attempt
                    else
                    {
                        LivDevis.ClassLibrary.Entities.User user = LivDevis.ClassLibrary.Entities.User.GetByUserName(login.UserName);
     
                        switch (user != null)
                        {
                            case true:
                                response = (!user.IsAuthorized) ? "Votre compte a été désactivé. Veuillez consulter un administrateur." : response;
                                response = (!user.IsActivated) ? "Votre compte n'a pas été activé. Veuillez consulter l'email de demande d'activation de compte." : response;
                                response = (user.IsActivated && user.IsAuthorized) ? "Erreur sur le mot de passe." : response;
                            break;
     
                            case false:
                                response = "Erreur sur le nom d'utilisateur";
                            break;
                        }
                    }
                }
     
                return response;
            }
        }
    }

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