AJAX et Vue partielle

**skwi6** · 05/12/2011, 10h08

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 :

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
 
 
@{
    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 :

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
 
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 :

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
 
@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

**NicoL__** · 05/12/2011, 17h08

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

**skwi6** · 05/12/2011, 17h19

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
<add key="ClientValidationEnabled" value="true"/>
    <add key="UnobtrusiveJavaScriptEnabled" value="true"/>

**NicoL__** · 05/12/2011, 18h49

Peut-être que me problème que ceci peut aider, je ne sais si cela change quelque chose :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
 @{ Html.RenderPartial("LogIn", new MvcFindIt.Models.LogOnModel()); }

**skwi6** · 06/12/2011, 09h39

Ca ne marche toujours pas

**skwi6** · 06/12/2011, 09h51

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

**skwi6** · 06/12/2011, 10h20

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.

**NicoL__** · 06/12/2011, 10h49

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**skwi6** · 06/12/2011, 11h09

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

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.

**NicoL__** · 06/12/2011, 13h49

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 ?

**skwi6** · 06/12/2011, 14h03

L'action login est appelé 2 fois.

**NicoL__** · 06/12/2011, 14h09

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.

**skwi6** · 06/12/2011, 14h13

Il y a bien une seule form. On dirait que le bouton submit a été ajouté à un nouvel event click.

**skwi6** · 06/12/2011, 14h19

J'ai trouvé, il faut exclure le script suivant et le placer au dessus du div qui va etre remplacé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

**skwi6** · 06/12/2011, 16h14

Merci pour ton aide

AJAX et Vue partielle

ASP.NET MVC

Discussions similaires

Partager

Partager