CODEWITHSUNDEEP
c#asp.netsignalr
test
test

Reputation: 2618

Simple chat application signal r

I am trying to modify a simply chat application for learning purposes. The only change i made was to change a button to a serverside control. The problem i have is that the first time i broadcast a message, it works, and the Clients.addNotification(msg) is called. Yet the second time, although the javascript works, at its final step, the javascript undos all the changes and the Clients.addNotification(..) is never called :/ It only works for the first time! I have to rebuild my project to see it working again (a page refresh won't work)

public class Chat : Hub
{
    public void Send(string message)
    {
        // Call the addMessage method on all clients
        Clients.addNotification(message);
    }
}

My aspx page:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Client1.aspx.cs" Inherits="WebApplication1.WorkingWithHubs.Client1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="../Scripts/jquery-1.6.4.js" type="text/javascript"></script>
    <script src="../Scripts/jquery.signalR.min.js" type="text/javascript"></script>
    <script src="/signalr/hubs" type="text/javascript"></script>
    <script type="text/javascript">
            $(function () {
            // Proxy created on the fly
            var chat = $.connection.chat;

            // Declare a function on the chat hub so the server can invoke it
            chat.addNotification = function (message) {
                $('#messages').append('<li>' + message + '</li>');

                var labelValue = $('#total').val();
                $('#total').val(parseInt(labelValue, 10) + 1);

            };

            $("#btn").click(function () {
                // Call the chat method on the server
                chat.send($('#msg').val());
            });

            // Start the connection
            $.connection.hub.start();
        });
    </script>
</head>
<body>

    <form id="form1" runat="server">
    <asp:ScriptManager ID="scriptManager" runat="server" />
    <div>
        <asp:UpdatePanel ID="updatePanel" runat="server">
            <ContentTemplate>
                <input type="text" id="msg" runat="server" />
                <asp:Button ID="btn" runat="server" Text="BroadCast" OnClick="btn_click" ClientIDMode="static" />
                <input type="text" id="total" value="0" />
                <ul id="messages">
                </ul>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

My code behind:

public partial class Client1 : System.Web.UI.Page
    {
        public List<String> list = new List<String>();

        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void btn_click(object sender, EventArgs e)
        {
            list.Add(msg.Value);

        }
    }

Once this example work I will shift the code to another application I am working on so that notifications can be immediately pushed to all clients.

I am a very beginner and I would appreciate all your help! Thanks a lot guys!

EDIT:

when checking out the network tab (on my chrome), for the first click I get a 'send' (signalR) and Client1.aspx and all works fine, for the second click onwards, I only get Client1.aspx, and no send whatsoever :/

Upvotes: 2

Views: 6048

Answers (1)

test
test

Reputation: 2618

for a quick and dirty solution, just place the update panel ONLY around the button, and remove 

$("#btn").click(function () {
            // Call the chat method on the server
            chat.send($('#msg').val());
        });

and instead, insert the following in the beginning

$('#form1').delegate('#btn', 'click', function () {
            chat.send($('#msg').val());
        });

Thanks to my friends shifty and red_square :)

Upvotes: 2

Related Questions