+ Répondre à la discussion
Affichage des résultats 1 à 3 sur 3
  1. #1
    Membre actif
    Homme Profil pro
    Développeur .NET
    Inscrit en
    décembre 2007
    Messages
    691
    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 : 691
    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 :
    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 :
    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 :
    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 :
    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 :
    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
    691
    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 : 691
    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 :
    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
    691
    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 : 691
    Points : 187
    Points
    187

    Par défaut

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

    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
    <!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 :
    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 :
    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 :
    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 :
    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;
            }
        }
    }

Liens sociaux

Règles de messages

  • Vous ne pouvez pas créer de nouvelles discussions
  • Vous ne pouvez pas envoyer des réponses
  • Vous ne pouvez pas envoyer des pièces jointes
  • Vous ne pouvez pas modifier vos messages
  •