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

bug entre asp.net mvc et jqueryui dialog form

ASP.NET MVC

Discussions similaires

Partager

Partager