Problème avec Update Panel, Timer et Send Boutton

**youtpout978** · 28/04/2012, 21h24

Bonjour,

je vous explique mon problème je développe un tchat en asp.net c# qui marche avec yaf (yet another forum), pour pouvoir le placé dans ma master page,j'ai fini le développement de mon contrôle que j'ai mis dans ma masterpage mais j'ai un problème avec l'envoie d'un nouveau message.

Mon tchat se met à jour toutes les 5 secondes en récupérant la liste des connectés et les 20 derniers messages mais dès que j'envoie un message le tchat ne se met plus à jour et le timer s'arrête (en debug je vois que l'update n'est plus appelé) et si je clique comme un acharné sur le bouton d'envoie de message je vois bien mes messages apparaître et le timer remarche normalement.

Quel est le problème?

Partie aspx:

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
89
90
91
92
93
94
95
96
97
98
99
100
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Tchat.ascx.cs" Inherits="UserControl_Tchat" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit.HTMLEditor"
    TagPrefix="cc1" %>
<%@ Register Src="~/UserControl/TextEditeur.ascx" TagPrefix="uc" TagName="TextEditeur" %>
<%@ Register TagPrefix="Yaf" Namespace="YAF.Core" %>
<script type="text/javascript">
    // Is is absolutely necessary that this JavaScript be on the page below the ScriptManager tag.
    // Otherwise, the Sys object won't be available and an exception will occur.
    var scrollTop;
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_initializeRequest(InitializeRequest);
    prm.add_endRequest(EndRequest);
 
    function InitializeRequest(sender, args) {
        scrollTop = document.getElementById('DivText').scrollTop;
    }
 
    function EndRequest(sender, args) {
        resize();
        document.getElementById('DivText').scrollTop = scrollTop;
    }
 
    function AddSmiley(text) {
        document.getElementById('<%=this.TextBox1.ClientID %>').value += text;
    }
 
    function ShowSmiley() {
        var divEmoticone = document.getElementById('emoticone');
        divEmoticone.hidden = !divEmoticone.hidden;
    }
 
    function ClearText() {
 
        var textbox = document.getElementById('<%=this.TextBox1.ClientID %>');
        textbox.value = '';
        textbox.focus();
    }
</script>
<asp:UpdatePanel runat="server" ID="UPTchat" UpdateMode="Conditional">
    <%--  <Triggers>
        <asp:AsyncPostBackTrigger ControlID="BtnSend" />
        <asp:AsyncPostBackTrigger ControlID="TimerTchat" EventName="Tick" />
    </Triggers>--%>
    <ContentTemplate>
        <asp:Timer ID="TimerTchat" runat="server" Interval="5000" OnTick="TimerTchat_Tick" />
        <div id="DivText" class="tchat">
            <table style="background-color: White;">
                <tr>
                    <td style="width: 100%; vertical-align: top">
                        <div class="tchatMessage">
                            <asp:Repeater ID="RepeaterTchat" runat="server" OnItemDataBound="RepeaterTchat_ItemDataBound">
                                <ItemTemplate>
                                    <asp:Label ID="lblUser" runat="server"></asp:Label>
                                    <asp:Label ID="lblMessage" runat="server"></asp:Label>
                                </ItemTemplate>
                                <SeparatorTemplate>
                                </SeparatorTemplate>
                            </asp:Repeater>
                        </div>
                    </td>
                    <td class="tchatConnecte">
                        <asp:ListBox ID="ListConnecte" runat="server" Width="150" Height="200" CssClass="test">
                        </asp:ListBox>
                    </td>
                </tr>
                <tr style="width: 100%">
                    <td style="width: 100%" colspan="2">
                    </td>
                </tr>
                <tr>
                    <td style="width: 100%;">
                        <asp:TextBox ID="TextBox1" CssClass="tchatEditeur" runat="server"></asp:TextBox>
                    </td>
                    <td>
                        <asp:Button ID="BtnSend" runat="server" Text="Envoyer" OnClick="BtnSend_Click" />
                        <asp:Button ID="BtnClear" runat="server" Text="Effacer" OnClientClick="ClearText();" />
                    </td>
                </tr>
                <tr>
                    <td style="width: 100%;" colspan="2">
                        <asp:ImageButton ID="ImageButton1" OnClientClick="ShowSmiley();" runat="server" ImageUrl="~/Images/BtnEmoticone.png" />
                        <div id="emoticone" hidden="hidden" style="z-index: 50; background-color: #FFFFFF;
                            background-repeat: repeat;">
                            <asp:Repeater ID="RepeaterEmoticone" runat="server" OnItemDataBound="RepeaterEmoticone_ItemDataBound">
                                <ItemTemplate>
                                    <asp:ImageButton ID="btnEmoticone" runat="server" />
                                </ItemTemplate>
                            </asp:Repeater>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </ContentTemplate>
</asp:UpdatePanel>
<%--<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UPTchat">
    <ProgressTemplate>
        <asp:Image ID="ImageUpdate" ImageUrl="~/Images/sorcier.png" runat="server" />
    </ProgressTemplate>
</asp:UpdateProgress>--%>

partie c#:

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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using crazyModel;
using YAF.Core;
using System.Web.Security;
 
public partial class UserControl_Tchat : System.Web.UI.UserControl
{
    private Tchat tchat = new Tchat();
    List<yaf_Smiley> Smileys;
    YafContext context;
    private int nbMessage = 20;
 
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            context = YafContext.Current;
            if (context == null)
                context = new YafContext();
 
            // on peut envoyé un message que si on est connecté
            if (!Page.User.Identity.IsAuthenticated)
            {
                TextBox1.Enabled = false;
                TextBox1.Text = "Vous devez être connecté pour pouvoir poster.";
                ImageButton1.Enabled = false;
                BtnClear.Enabled = false;
                BtnSend.Enabled = false;
            }
 
            // on récupère la liste des smiley et on les affiches
            Smileys = tchat.GetSmiley();
            RepeaterEmoticone.DataSource = Smileys;
            RepeaterEmoticone.DataBind();
            ViewState["Smileys"] = Smileys;
 
            // on met à jour le tchat avec les derniers messages
            Update();
        }
        // on récupère les smiley stocké dans le viewstate
        Smileys = ViewState["Smileys"] as List<yaf_Smiley>;
        //if (Smileys != null)
        //{
        //    foreach (var item in Smileys)
        //    {
        //        string url = "~/Images/emoticons/" + item.Icon;
        //        ImageButton imgBtn = new ImageButton();
        //        imgBtn.ImageUrl = url;
        //        imgBtn.AlternateText = item.Code;
        //        imgBtn.ToolTip = item.Emoticon;
        //        imgBtn.OnClientClick = "javascript:AddSmiley('" + item.Code + "')";
        //        PlaceHolder1.Controls.Add(imgBtn);
        //    }
        //}
    }
 
    protected void RepeaterTchat_ItemDataBound(object sender, RepeaterItemEventArgs e)
    {
        // on rempli le repeater avec les données du tchat
        if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
        {
            ((Label)e.Item.FindControl("lblUser")).Text = ((yaf_ShoutboxMessage)e.Item.DataItem).UserName + " : ";
            ((Label)e.Item.FindControl("lblMessage")).ToolTip = ((yaf_ShoutboxMessage)e.Item.DataItem).PostedSince;
            ((Label)e.Item.FindControl("lblMessage")).Text = ((yaf_ShoutboxMessage)e.Item.DataItem).Message + "<br/>";
        }
    }
 
    // permet de récupérer les messages du tchat et de les afficher
    private void LireMessage()
    {
        //int dernierMessageTchat = tchat.IdDernierMessage();
        //List<yaf_ShoutboxMessage> listMessage = RepeaterTchat.DataSource as List<yaf_ShoutboxMessage>;
        //int dernierMessage = -1;
        //if (listMessage != null)
        //{
        //    dernierMessage = listMessage.Max(sh => sh.ShoutBoxMessageID);
        //}
 
        //if (dernierMessage != dernierMessageTchat)
        //{
        List<yaf_ShoutboxMessage> listMessage = tchat.LireMessage(nbMessage);
        RepeaterTchat.DataSource = AddSmileyInMessage(listMessage);
        RepeaterTchat.DataBind();
        //}
    }
 
    // permet de récupérer la liste des connectés et de les afficher
    private void RecupererConnecte()
    {
        ListConnecte.DataSource = tchat.ListeConnecte();
        ListConnecte.DataBind();
    }
 
    // a chaque tick on met à jour le tchat et la liste des connectés
    protected void TimerTchat_Tick(object sender, EventArgs e)
    {
        Update();
    }
 
    // permet de remplacer les tags des smileys par leur image dans le tchat
    private List<yaf_ShoutboxMessage> AddSmileyInMessage(List<yaf_ShoutboxMessage> listeMessage)
    {
        List<yaf_ShoutboxMessage> messages = new List<yaf_ShoutboxMessage>();
        Smileys = ViewState["Smileys"] as List<yaf_Smiley>;
        if (Smileys != null)
        {
            foreach (var message in listeMessage)
            {
                if (string.IsNullOrWhiteSpace(message.Message))
                {
                    continue;
                }
 
                foreach (var smiley in Smileys)
                {
                    message.Message = message.Message.Replace(smiley.Code, "<Img alt=\"" + smiley.Emoticon + "\" src=\"" + Request.ApplicationPath + "/Images/emoticons/" + smiley.Icon + "\" />");
                }
                messages.Add(message);
            }
        }
        return messages;
    }
 
    // met à jour le tchat
    private void Update()
    {
        LireMessage();
        RecupererConnecte();
    }
 
 
    protected void BtnSend_Click(object sender, EventArgs e)
    {
        try
        {
            TimerTchat.Enabled = false;
            string texte = TextBox1.Text;
            // permet d'ajouter un nouveau message au tchat
            if (!string.IsNullOrWhiteSpace(TextBox1.Text))
            {
                yaf_ShoutboxMessage message = new yaf_ShoutboxMessage();
                context = YafContext.Current;
                if (context != null)
                {
                    message.UserName = context.PageUserName;
                    message.UserID = context.PageUserID;
                    message.Date = DateTime.Now;
                    message.BoardId = context.PageBoardID;
                    message.IP = HttpContext.Current.Request.UserHostAddress;
                    message.Message = TextBox1.Text;
                    if (tchat.EcrireMessage(message))
                    {
                        TextBox1.Text = "";
                        Update();
                    }
                    else
                    {
                        TextBox1.Text += " Envoi échoué";
                    }
                }
            }
        }
        catch (Exception ex)
        {
 
            TextBox1.Text = "Erreur: " + ex.Message;
        }
        finally
        {
            TimerTchat.Enabled = true;
        }
 
 
    }
 
    protected void RepeaterEmoticone_ItemDataBound(object sender, RepeaterItemEventArgs e)
    {
        // on rempli le repeater avec la liste des smileys
        if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
        {
            yaf_Smiley smiley = e.Item.DataItem as yaf_Smiley;
            ImageButton imgBtn = (e.Item.FindControl("btnEmoticone")) as ImageButton;
            if (smiley != null && imgBtn != null)
            {
                string url = "~/Images/emoticons/" + smiley.Icon;
                imgBtn.ImageUrl = url;
                imgBtn.AlternateText = smiley.Code;
                imgBtn.ToolTip = smiley.Emoticon;
                imgBtn.OnClientClick = "javascript:AddSmiley('" + smiley.Code + "')";
 
            }
 
 
        }
    }
}

**Immobilis** · 29/04/2012, 00h59

Hello,

Mon UC inline:

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
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Tchat.ascx.cs" Inherits="WebApplication.uc.Tchat" %>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <Triggers>
    </Triggers>
    <ContentTemplate>
        <asp:Timer ID="Timer1" runat="server" Interval="3000" OnTick="Timer1_Tick">
        </asp:Timer>
        <asp:Repeater ID="Repeater1" runat="server" DataSource="<%#Messages %>">
            <HeaderTemplate>
                <div>
            </HeaderTemplate>
            <ItemTemplate>
                <div>
                    <span>User:
                        <%# DataBinder.Eval(Container.DataItem, "User") %></span> <span>Message:
                            <%# DataBinder.Eval(Container.DataItem, "Miaw")%></span>
                </div>
            </ItemTemplate>
            <FooterTemplate>
                </div>
            </FooterTemplate>
        </asp:Repeater>
        <div>
            <ul>
                <li>
                    <asp:TextBox ID="txtNom" runat="server"></asp:TextBox></li>
                <li>
                    <asp:TextBox ID="txtMessage" runat="server"></asp:TextBox></li>
                <li>
                    <asp:Button ID="Button1" runat="server" Text="Send" OnClick="Button1_Click" /></li>
            </ul>
        </div>
    </ContentTemplate>
</asp:UpdatePanel>

Mon UC behind

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
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
 
namespace WebApplication.uc
{
    public partial class Tchat : System.Web.UI.UserControl
    {
        public class Message
        {
            public string User { get; set; }
            public string Miaw { get; set; }
        }
 
        public static List<Message> Messages;
 
        protected override void OnInit(EventArgs e)
        {
            base.OnInit(e);
            if (Messages == null)
            {
                Messages = new List<Message>();
                Messages.Add(new Message() { User = "toto", Miaw = "Hello guys" });
                Messages.Add(new Message() { User = "titi", Miaw = "Hello toto" });
            }
        }
 
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                DataBind();
            }
        }
 
        protected void Button1_Click(object sender, EventArgs e)
        {
            try
            {
                Timer1.Enabled = false;
 
                Messages.Add(new Message() { User = txtNom.Text, Miaw = txtMessage.Text });
                Repeater1.DataBind();
            }
            catch (Exception ex)
            {
 
                throw;
            }
            finally
            {
                Timer1.Enabled = true;
            }
 
        }
 
        protected void Timer1_Tick(object sender, EventArgs e)
        {
            Messages.Add(new Message() { User = "Timer1", Miaw = "Timer1 " + (sender as Timer).Interval });
            Repeater1.DataBind();
        }
    }
}

Ma page inline

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
    CodeBehind="Tchat.aspx.cs" EnableEventValidation="false" Inherits="WebApplication.Tchat" %>
 
<%@ Register Src="uc/Tchat.ascx" TagName="Tchat" TagPrefix="uc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <uc1:Tchat ID="Tchat1" runat="server" />
</asp:Content>

Ma page behind

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
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
 
namespace WebApplication
{
    public partial class Tchat : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
 
        }
    }
}

Et aucun soucis.

A+

**youtpout978** · 29/04/2012, 01h50

je testerai ta solution et te tiendrai au courant

**youtpout978** · 29/04/2012, 13h52

en testant avec ton code ça marche bien mais je comprends pas pourquoi avec le mien ça merde, pourtant j'ai bien l'ajout de la donnée en base et si j'appuie plusieurs fois sur le boutton envoyer mon repeater se met bien à jour.

Il semble que le repeater se met pas à jour toutes les 3secondes comme il devrait le faire.

**Immobilis** · 29/04/2012, 14h09

Tu devrais peut-être déjà éclaircir ton code en déplaçant du code dans le fichier inline. Je pense à RepeaterEmoticone_ItemDataBound et RepeaterTchat_ItemDataBound.

Pour List<yaf_Smiley> Smileys, tu pourrais éviter aussi d'utiliser le viewstate et utiliser une variable statique. Cette liste est à mon avis la même pour tout les internautes et je ne vois pas pourquoi tu l'envois au client.

AddSmileyInMessage pourrait passer dans une fonction statique dans une classe à part appelée sur le PreRender. Tu gagnerais en lisibilité.

**youtpout978** · 06/05/2012, 12h32

une erreur bête:

Code :

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

1
2
3
4
    function EndRequest(sender, args) {
        resize();
        document.getElementById('DivText').scrollTop = scrollTop;
    }

le resize qui n'avait rien à faire ici (encore la magie du copier coller)

merci pour ton aide immo

Problème avec Update Panel, Timer et Send Boutton

ASP.NET

Discussions similaires

Partager

Partager