AJAX et Vue partielle

Version imprimable

Bonjour,

Je rencontre un petit problème avec ma page de login.
En effet lorsque j'essaye de me logguer, j'arrive à appeler la méthode de mon controller, cependant je fais un full postback et ensuite au retour j ai uniquement la vue du login.

Ma vue annonce ou j'insère la vue 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
 
 
@{
    Layout = null;
}
@model List<MvcFindIt.Models.AnnnonceCarModel>
<!DOCTYPE html>
 
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Annonce.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
</head>        
<body>
<div id="registerPane" class="panelRegister">
        <div class="panelContentRegister">
            <div class="contentRegister">
                @Html.Partial("LogIn", new MvcFindIt.Models.LogOnModel())
            </div>
        </div>
        <div class="panelBar">
            <a href="javascript:void('0');" id="btBarOpen">S'identifier | S'enregistrer</a>
            <a href="javascript:void('0');" id="btBarClose" >Fermer</a>
        </div>
    </div>
</body>
</html>

Mon controller annonce :

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
 
public class AnnonceController : Controller
    {
        //
        // GET: /Annonce/
 
        public ActionResult Annonce()
        {
            return View();
        }
 
        public ActionResult LogIn(LogOnModel logOnModel)
        {
            if (ModelState.IsValid)
            {
                if (logOnModel.UserName.Equals("l"))
                {
 
                    return RedirectToAction("Annonce", "Annonce");
                }
                else
                {
                    ModelState.AddModelError("", "The user name or password provided is incorrect.");
                }
            }
 
            // If we got this far, something failed, redisplay form
            return PartialView(logOnModel);
        }
    }

Et ma vue 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
 
@model MvcFindIt.Models.LogOnModel
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
 
@using (Ajax.BeginForm("LogIn", "Annonce", new AjaxOptions { UpdateTargetId = "formRegister", InsertionMode = InsertionMode.Replace }))
{
    <div id="formRegister">
        <div class="lp">
            @Html.LabelFor(m => m.UserName)     
            @Html.TextBoxFor(m => m.UserName)
            @Html.ValidationMessageFor(m => m.UserName)
        </div>
        <div class="lp">
            @Html.LabelFor(m => m.Password)  
            @Html.PasswordFor(m => m.Password)
            @Html.ValidationMessageFor(m => m.Password)
        </div>
        <div class="remember">
            @Html.CheckBoxFor(m => m.RememberMe)
            @Html.LabelFor(m => m.RememberMe)
        </div>
        <input type="submit" value="Se connecter" />      
    </div>          
}

Savez vous d'où vient l'erreur ?

Merci

05/12/2011, 17h08
NicoL__

Le submit devrait se faire en ajax, il manque peut-être un fichier js.
Il faut vérifier dans la page sur le client que la "form" de la partial view login a bien été interprété pour faire de l'ajax avec, que je javascript est bien autorisé par exemple.
Sinon je pense que UpdateTargetId = "formRegister" n'est pas bon (mais je peux me tromper) à mon avis le UpdateTargetId ne peut être inclus dans sa propre partial view.
Je mettrais UpdateTargetId = "contentRegister".
05/12/2011, 17h19
skwi6
Pour l 'updateTargetId , si je mets "contentRegister" , ça ne marche pas non plus.
Ensuite pour les fichiers javascript j'ai mis ce que j'ai pu voir sur le net.

Ensuite j'ai aussi ajouté dans mon Web.config
Code:

1 2 3 <add key="ClientValidationEnabled" value="true"/> <add key="UnobtrusiveJavaScriptEnabled" value="true"/>
05/12/2011, 18h49
NicoL__
Peut-être que me problème que ceci peut aider, je ne sais si cela change quelque chose :
Code:

1 2 @{ Html.RenderPartial("LogIn", new MvcFindIt.Models.LogOnModel()); }
06/12/2011, 09h39
skwi6

Ca ne marche toujours pas :?
06/12/2011, 09h51
skwi6

Je crois que j'ai trouvé, il me manquait le fichier js suivant:

Code:

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
06/12/2011, 10h20
skwi6

J'ai 2 nouveaux problèmes:

-1/ Comment je peux faire une redirection lorsque je fais de l'ajax, c'est à dire lorsque l'utilisateur est valide je lui dis de retourner sur la page principale
-2/ J'ai créé un form en ajax avec InsertionMone = Replacement, or je m'aperçois qu'il ne remplace rien.J'ai donc testé de changé UpdateTargetId par "formRegister" qui se trouve dans la form , dans ce cas il y a bien remplacement mais du coup je me retrouve avec 2 form.Si je met l'id "contentRegister", dans ce cas j ai pas de replacement, or quand je regarde le retour de mon appel ajax j 'ai bien les bonnes données.
06/12/2011, 10h49
NicoL__

Réponses :
1/ Dans le controler à la place du redirectToAction

Code:

return JavaScript( "window.top.location.href ='" + Url.Action( "Annonce" ) + "';" );

2/ j'avais pas vue mais "contentRegister" est le nom de la classe CSS il faut ajouter un ID à ton div genre "contentRegisterId" et en faire référence dans UpdateTargetId
06/12/2011, 11h09
skwi6

Merci pour la redirection, ça marche très bien.

Ensuite il y avait effectivement une erreur de ma part sur le div, je pensais que j 'avais mis contentRegister dans l'attribut id au lieu de class :ccool:

Cependant, maintenant lorsque je clique sur envoyer ça me déclenche plusieurs fois la meme action.

C'est à dire que la 1ere fois que je clique dessus et que le login est incorrecte, j'ai bien les erreurs qui s'affichent sur la vue login mais quand je reclique sur envoyer j'aurais 2 fois l'action de l'envoie.
06/12/2011, 13h49
NicoL__

La page est posté 2 fois ? L'action Login est appelée 2 fois de suite ?
Je ne comprends pas bien. Ou encore ce sont les messages d'erreurs qui se cumulent ?
06/12/2011, 14h03
skwi6

L'action login est appelé 2 fois.
06/12/2011, 14h09
NicoL__

Il faut regarder le code de source de la page sur le client et voir s'il n y a pas de <Form/> imbriquées suite au premier appel ajax.
06/12/2011, 14h13
skwi6

Il y a bien une seule form. On dirait que le bouton submit a été ajouté à un nouvel event click.
06/12/2011, 14h19
skwi6
J'ai trouvé, il faut exclure le script suivant et le placer au dessus du div qui va etre remplacé :
Code:

1 2 <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
06/12/2011, 16h14
skwi6

Merci pour ton aide :ccool: