mettre à jour un champ du model après actions jquery.

**ncheboi** · 20/04/2011, 14h44

Salut.
J'ai un système de vote où un utilisateur peut voter pour un cours.
Voici la page principale:

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
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<iitgovern.ViewModels.Vote.CourseVoteViewModel>>" %>
 
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	IITGovern - Vote in
</asp:Content>
 
 
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
 
    <h2>On going votes</h2>
 
    <table>
        <tr>
            <th>Course</th>
            <th>
                Total Votes
            </th>
            <th></th>
        </tr>
 
    <% foreach (var item in Model) { %>
 
        <tr>
            <td>
                <%: item.Course.course_name %>
            </td>
            <td>
                <%: item.TotalVotes %>
            </td>
            <td>
                <% Html.RenderPartial("VoteStatus",item); %>
            </td>
        </tr>
 
    <% } %>
 
    </table>
 
</asp:Content>

Et voici la page partiel votestatus:

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
 
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<iitgovern.ViewModels.Vote.CourseVoteViewModel>" %>
 
<script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
<script src="/Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
    function showUnvote() {
        $("#unvotemsg").css("display", "block");
        $("#votemsg").css("display", "none");
    }
    function showVote() {
        $("#votemsg").css("display", "block");
        $("#unvotemsg").css("display", "none");
    }
</script>
 
<div id="votebox">
    <% if (Request.IsAuthenticated)
       { %>
        <% if (Model.Course.HasUserVoted(Context.User.Identity.Name))
           { %>
                <script type="text/javascript">$(showUnvote);</script>
        <% }
           else
           { %>
                <script type="text/javascript">$(showVote);</script>
        <% } %>
            <div id = "unvotemsg" style="display: none;">
                You have voted !
                <%= Ajax.ActionLink("Undo vote",
                        "UndoVoteForCourse",
                        new { id = Model.Course.course_id },
                        new AjaxOptions { OnSuccess = "showVote"})%>
            </div>
            <div id = "votemsg" style="display: none;">
                <%= Ajax.ActionLink("Vote for this course",
                                    "VoteForCourse",
                                    new { id = Model.Course.course_id },
                                    new AjaxOptions { OnSuccess = "showUnvote"})%>
           </div>
    <% }
       else
       { %>
            <%: Html.ActionLink("Logon to vote for course","Logon","Account") %>
    <% } %>
</div>

Grosso modo, selon si l'utilisateur a voté, ou non j'affiche la div qui faut. Puis une fois qu'il vote, je cache la #votemsg et montre #unvotemsg...

Ca marche mais le souci est que je souhaite aussi que:

Code :

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

1
2
3
4
 
<td>
      <%: item.TotalVotes %>
</td>

de la page principale soit changé sans avoir à recharger toute la page...
Comment faire?

**mermich** · 21/04/2011, 12h03

Salut,

Dans ton action retourne le code html que tu voudra injecter dans ton td, et utilise UpdateTargetId sur ton action ajax:

Code :

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

1
2
3
4
5
 
<%= Ajax.ActionLink("Vote for this course",
 "VoteForCourse",
 new { id = Model.Course.course_id },
 new AjaxOptions { OnSuccess = "showUnvote", UpdateTargetId= "plop"})%>

**ncheboi** · 21/04/2011, 13h19

Nickel merci... J'ai un autre souci par contre, voici 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
32
33
34
35
36
37
38
39
40
41
42
 
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<iitgovern.ViewModels.Vote.CourseVoteViewModel>" %>
 
<script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
<script src="/Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
    function showUnvote(id) {
        $("#unvotemsg"+id).show();
        $("#votemsg"+id).hide();
    }
    function showVote(id) {
        $("#votemsg"+id).show();
        $("#unvotemsg"+id).hide();
    }
</script>
 
<div class="votebox">
    <%  if (Model.Course.HasUserVoted(Context.User.Identity.Name))
        {
    %>
            <script type="text/javascript">$(showUnvote(<%: Model.Course.course_id %>));</script>
    <%  }
        else
        { %>
            <script type="text/javascript">$(showVote(<%: Model.Course.course_id %>));</script>
    <%  } %>
 
        <div id = "unvotemsg<%: Model.Course.course_id %>" style="display: none;">
            You have voted !
            <%= Ajax.ActionLink("Undo vote",
                    "UndoVoteForCourse",
                    new { id = Model.Course.course_id },
                    new AjaxOptions { OnSuccess = "showVote(180)",UpdateTargetId = ("votes" + Model.Course.course_id) })%>
        </div>
        <div id = "votemsg<%: Model.Course.course_id %>" style="display: none;">
            <%= Ajax.ActionLink("Vote for this course",
                     "VoteForCourse",
                     new { id = Model.Course.course_id },
                     new AjaxOptions { OnSuccess = "showUnvote(180)", UpdateTargetId = ("votes" + Model.Course.course_id) })%>
        </div>
</div>

C'est assez tordu donc je vais essayer d'être clair.
Alors j'ai un tableau à deux colonnes, une contient le nom d'un cours, et la deuxième contient le contrôle ci-dessus. En gros, le code ci-dessus est dans un <td>...

Bref, j'utilise des fonctions javascript qui manipule ces <td> via leurs id.. Etant donné que j'ai plusieurs td, il faut qu'ils aient chacun une id différente. Du coup, c'est ce que j'essaye de faire ci dessus.
Là où ça coince c'est au niveau des lignes 21 et 25. Je souhaite faire un appel à la fonction javascript showUnVote(id). Avec mon code ci-dessus ça ne marche pas. Par contre, quand je fais:

Code :

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

1
2
 
<script type="text/javascript">$(showUnvote(180));</script>

(et idem pour showVote), ça marche...
Pourtant sous firebug, avec le code que j'ai au dessus, il me dit bien que la fonction showUnVote(180) a été appelé (en gros <%: Model.Course.course_id %> vaut bien 180)....

Bref, du coup, je n'y comprends rien. J'espere que vous avez pu me suivre!

**mermich** · 22/04/2011, 13h56

Salut,

Et au niveau de la source générée ca donne quoi ?

**ncheboi** · 23/04/2011, 15h04

Envoyé par mermich

Salut,

Et au niveau de la source générée ca donne quoi ?

Voila ce que j'ai:

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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
 
 
<script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
    <script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
    <script src="/Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        function showUnvote(id) {
            $("#unvotemsg" + id).show();
            $("#votemsg" + id).hide();
        }
        function showVote(id) {
            $("#votemsg" + id).show();
            $("#unvotemsg" + id).hide();
        }
    </script>
 
    <table>
        <tr>
            <th>Course</th>
            <th>
                Total Votes
            </th>
            <th></th>
        </tr>
 
 
 
        <tr>
            <td>
                Operating System
            </td>
            <td id = votes180 >
                0
            </td>
            <td>
 
 
<div class="votebox">
 
 
            <script type="text/javascript">$(showVote(180));</script>
 
 
        <div id = "unvotemsg180" style="display: none;">
            You have voted !
            <a href="/Vote/UndoVoteForCourse/180" onclick="Sys.Mvc.AsyncHyperlink.handleClick(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, updateTargetId: 'votes180', onSuccess: Function.createDelegate(this, showVote(180)) });">Undo vote</a>
        </div>
        <div id = "votemsg180" style="display: none;">
            <a href="/Vote/VoteForCourse/180" onclick="Sys.Mvc.AsyncHyperlink.handleClick(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, updateTargetId: 'votes180', onSuccess: Function.createDelegate(this, showUnvote(180)) });">Vote for this course</a>
        </div>
 
</div>
            </td>
        </tr>
 
 
 
        <tr>
            <td>
                Software Engineering
            </td>
            <td id = votes181 >
                0
            </td>
 
            <td>
 
 
<div class="votebox">
 
            <script type="text/javascript">$(showVote(181));</script>
 
 
        <div id = "unvotemsg181" style="display: none;">
            You have voted !
            <a href="/Vote/UndoVoteForCourse/181" onclick="Sys.Mvc.AsyncHyperlink.handleClick(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, updateTargetId: 'votes181', onSuccess: Function.createDelegate(this, showVote(180)) });">Undo vote</a>
        </div>
        <div id = "votemsg181" style="display: none;">
 
            <a href="/Vote/VoteForCourse/181" onclick="Sys.Mvc.AsyncHyperlink.handleClick(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, updateTargetId: 'votes181', onSuccess: Function.createDelegate(this, showUnvote(180)) });">Vote for this course</a>
        </div>
</div>
            </td>
        </tr>
 
 
 
    </table>

**mermich** · 26/04/2011, 13h44

Re,

Désolé pour le délai, week end toussa...

En regardant ton code, je ne vois pas d'anomalies en particulier, sur la source générée tes id sont corrects. Par contre ce que tu peux essayer, c'est d'enlever le display none sur tes divs:

Code :

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

1
2
3
 
<div id = "unvotemsg" style="display: none;">
<div id = "votemsg" style="display: none;">

=> qui fait peut être un doublon avec jquery (même si j'y crois pas).

mettre à jour un champ du model après actions jquery.

ASP.NET MVC

Discussions similaires

Partager

Partager