A day with .Net

My day to day experince in .net

Append rows to table using SignalR,Jquery and ASP.NET

Posted by vivekcek on October 25, 2012

1. Create an ASP.NET website project in VS2012.

2. Use the Nuget package manager to add SignalR.

3. Create a class named signal in App_Code.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using SignalR;
using SignalR.Hubs;
/// <summary>
/// Summary description for signal
/// </summary>
[HubName("signals")]
public class signal:Hub
{
    public void GetList()
    {
        Employee emp = new Employee();
        emp.ID = "1";
        emp.Name = "Vivek";
        Address adrs = new Address();
        adrs.Value = "poomala";
        emp.Address = adrs;
        List<Employee> emps = new List<Employee>();
        emps.Add(emp);
        Caller.PostReslt(emps);
        System.Threading.Thread.Sleep(2000);

        emp = new Employee();
        emp.ID = "2";
        emp.Name = "chanthu";
        adrs = new Address();
        adrs.Value = "poomala";
        emp.Address = adrs;

        emps = new List<Employee>();
        emps.Add(emp);
        Caller.PostReslt(emps);
    }
    
    public class Employee
    {
        public string ID;
        public string Name;
        public Address Address;
    }
    public class Address
    {
        public string Value;
    }
}

4. Add a Webform named Default.aspx and paste the below code.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.7.2.js" type="text/javascript"></script>
    <script src="Scripts/jquery.signalR-0.5.3.min.js" type="text/javascript"></script>
    <script src="<%=ResolveClientUrl("~/signalr/hubs") %>"></script>
    <script type="text/javascript">
        $(function () {
            var proxy = $.connection.signals;

            proxy.PostReslt = function (data) {

                for (i = 0; i < data.length;i++)
                {
                    var tbl = $('#tbl');
                    var row = $('<tr></tr>');
                    var col = $('<td></td>').text(data[i].ID)
                    var col1 = $('<td></td>').text(data[i].Name)
                    var col3 = $('<td></td>').text(data[i].Address.Value)
                    row.append(col);
                    row.append(col1);
                    row.append(col3);
                    tbl.append(row);
                }
               
            };

            $.connection.hub.start();

            $('#btn').click(

                function () {

                    proxy.getList();
                }
                );
        }
        );
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
        </div>
        <input type="button" id="btn" value="Send"/>
        <table id="tbl">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Address</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </form>
</body>
</html>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s