bug entre asp.net mvc et jqueryui dialog form

thor76160 · 19/12/2012, 10h25

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 !

thor76160 · 19/12/2012, 10h53

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".

thor76160 · 19/12/2012, 17h22

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

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email