Delegates And Events – Part 2 of 3

19. November 2020 12:42 by Parakh in Visual C#  //  Tags: ,   //   Comments
This post explains the concept of delegates in a lucid manner, giving simple to understand code examples.

In my last post, I explained the concept of events, delegates, and event handlers at a high level. In this post, let’s take a look at delegates. Why delegates and not events, because among them, they are the tricky ones and can be understood in relative isolation.

Delegates form the glue connecting the events and event handlers and are instrumental in conveying to all the subscribed event handlers about the firing of an event. What I will try to show in this post are the following:
1. High-level conceptual coverage of delegates,
2. Technical overview of delegates,
3. How a delegate can execute a connected method, aka an event handler

High-Level Overview:

Consider the following scenario where you have a pipeline going out from a pumping station and connected to that pipeline are houses and industries. Houses will use the supplied water for cleaning, cooking, etc. while the industries will use the same water for chemical and other manufacturing purposes. Water Pumping station supplying water to homes and industries


 

The pumping station here is synonymous with an event firing when an action of interest takes place. The water is the information conveyed by the event, and the houses and industries are the event handlers which process the supplied water, aka the information in the desired form. Delegates form the plumbing connecting the events and event handlers.

Before we move any further, we must understand what is a callback mechanism.

Callback Mechanism

Essentially, a callback mechanism that lets us chain pieces of code together in such a way that the first piece calls the second. The call can be made in two ways:

1) Synchronous callbacks, in which the first code (calling code) waits for the second code (called code) to finish the work and deliver the result, and, only after that resumes execution.
E.g. You can have a windows form application which has a button which upon clicking starts execution of a long running process. While the process is running the windows form will remain unresponsive.

2) Asynchronous callbacks, where the first code calls the second code but does not wait for it to finish the work. The work by the second piece of code is carried out on a different thread.

Callback mechanism is known by different names in different programming languages. In C, it is known as function pointers, and in C# it is called “delegates”.

In C#, delegates form the plumbing that allows one code to call another code synchronously or asynchronously. Adding to that is the fact that they are type-safe, i.e. you can only call methods that comply with the delegate’s signature and return type. In this post we will focus only on the synchronous calling via delegates

Use cases for delegates

Delegates can be used in two scenarios:

1. To broadcast changes in an object’s state
2. To broadcast fulfillment of a condition

Delegates behind the scenes are a special type of class, which means that we need to create an object of delegate type to use it for callback purposes.

Let’s dive into practical examples that show the use cases in action.

Broadcast changes in an object’s state


Consider human beings and their sensitiveness to ambient temperature. We can create a class “Human” and broadcast the response of its object to different temperatures.

public class Human
    {
        // Basic properties
        public int Id { get; set; }
        public string Name { get; set; }
        public float MinTemp { get; set; }
        public float MaxTemp { get; set; }
 
        //Delegate declaration
        public delegate void TemperatureSensationHandler(string message);
 
        // Member variable of the declared delegate
        public TemperatureSensationHandler temperatureSensationMembers;
 
        public Human()
        {
        }
 
        // User defined constructor
        public Human(int id, string name, float minTemp, float maxTemp)
        {
            Id = id;
            Name = name;
            minTemp = MinTemp;
            maxTemp = MaxTemp;
        }
 
        public void TemperatureSensation(float temperature)
        {
            if (temperatureSensationMembers!= null)
            {
                if (temperature > MaxTemp)
                {
                    temperatureSensationMembers("I am feeling hot");
                }
                else if (temperature < MinTemp)
                {
                    temperatureSensationMembers("I am feeling cold");
                }
                else
                {
                    temperatureSensationMembers("I am feeling normal");
                }
            }         
        }
    }

 

In the code above, we have a class "Human" with four properties, of which two are of importance - MinTemp and MaxTemp. The method TemperatureSensation accepts a float type parameter and depending upon where the value stands in the spectrum between MinTemp and MaxTemp, broadcasts an appropriate message. In the following code, we create an object of the Human class and test the functionality of delegate declared in the Human class.

class Program
    {
        static void Main(string[] args)
        {
            Human human = new Human() 
{ Id = 1, Name = "Parakh", MinTemp = 25.5f, MaxTemp = 45.0f };
 
            human.temperatureSensationMembers += OnTemperatureSensationEvent;
            human.TemperatureSensation(100);
            human.TemperatureSensation(30);
            human.TemperatureSensation(10);
            Console.ReadLine();
        }
 
        public static void OnTemperatureSensationEvent(string message)
        {
            Console.WriteLine(message);
        }
    }

 

In the code above we created an object of the Human class and instantiated it with some data. Then, we enrolled in the delegate object a method that matched the delegate’s signature and return type. Then we invoked the TemperatureSensation method on the human object which then broadcasted the messages to the delegate’s subscribed members.

The above code when executed yields the following outputBoradcast changes in an object's state

Now there’s one flaw in the code above. Delegate class at the .Net framework level overrides the “+” and “-“ operators, allowing the subscription and unsubscription of complying methods. It means that having direct access to the delegate object is sensitive and a developer should not be able to empty a delegate object’s invocation list by using the “-“ operator repeatedly.

We thus encapsulate the subscription and unsubscription of the methods to the delegate object via methods.

public class Human
    {
        // Basic properties
        public int Id { get; set; }
        public string Name { get; set; }
        public float MinTemp { get; set; }
        public float MaxTemp { get; set; }
 
        //Delegate declaration
        public delegate void TemperatureSensationHandler(string message);
 
        // Member variable of the declared delegate
        private TemperatureSensationHandler temperatureSensationMembers;
 
        //Registration and un-registration methods
        public void RegisterTempSensationHandlerMethods(TemperatureSensationHandler methodToRegister)
        {
            temperatureSensationMembers += methodToRegister;
        }
 
        public void UnRegisterTempSensationMethods(TemperatureSensationHandler methodToUnregister)
        {
            if (temperatureSensationMembers != null)
            {
                temperatureSensationMembers -= methodToUnregister;
            }
        }
 
        public Human()
        {
 
        }
 
        // User defined constructor
        public Human(int id, string name, float minTemp, float maxTemp)
        {
            Id = id;
            Name = name;
            minTemp = MinTemp;
            maxTemp = MaxTemp;
        }
 
        public void TemperatureSensation(float temperature)
        {
            if (temperatureSensationMembers!= null)
            {
                if (temperature > MaxTemp)
                {
                    temperatureSensationMembers("I am feeling hot");
                }
                else if (temperature < MinTemp)
                {
                    temperatureSensationMembers("I am feeling cold");
                }
                else
                {
                    temperatureSensationMembers("I am feeling normal");
                }
            }         
        }
    }

With the modified code, we now can register and un-register the methods without exposing the delegate object to a developer.

The code above yields the same output.

Boradcast changes in an object's state

Broadcast of fulfilment of a condition


Some conditions warrant broadcast of information when they materialize. Examples would include intimation upon sending or receiving a message, dispatch, and delivery of a physical item in case of e-commerce applications, etc.

Here we will take an example of checking out a book from a library.

We have four classes - Book, Member, Author, and Library. The idea in this example is to broadcast a message upon execution of certain activities like searching for a book, searching for member records, and successful or unsuccessful checking out of a book.

public class Author
   {
        public int AuthorId { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
    }
 
public class Book
    {
        public int BookId { get; set; }
        public string ISBN { get; set; }
        public string Title { get; set; }
        public Author Author { get; set; }
        public int PageCount { get; set; }
        public bool IsCheckedOut { get; set; }
    }
 
public class Member
    {
        public int MemberId { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public int NumberOfBooksCheckedOut { get; set; }
        public List<Book> BooksCheckedOut { get; set; }
    }
 
    public class Library
    {
        public int LibraryId { get; set; }
        public List<Book> Books { get; set; }
        public List<Member> Members { get; set; }
        public Library()
        {
            LibraryId = 1;
            Books = new List<Book>()
                        {
                            new Book()
                            {
                                BookId = 1, 
                                Title = "Alice in Wonderland", 
                                IsCheckedOut = false, 
                                PageCount = 200,
                                Author = new Author() 
                                { 
                                    AuthorId = 1, 
                                    FirstName = "Lewis", 
                                    LastName = "Carroll"
                                }
                            },
                            new Book()
                            { 
                                BookId = 2, 
                                Title = "Bad Blood", 
                                IsCheckedOut = false, 
                                PageCount = 350,
                                Author = new Author()
                                { 
                                    AuthorId = 2, 
                                    FirstName = "John", 
                                    LastName = "Carreyrou"
                                }
                            },
                            new Book()
                            { 
                                BookId =  3, 
                                Title = "The Dream Machine", 
                                IsCheckedOut = false, 
                                PageCount = 250,
                                Author = new Author()
                                { 
                                    AuthorId = 3, 
                                    FirstName="Mitchell", 
                                    LastName = "Waldrop"
                                }
                            },
                            new Book()
                            { 
                                BookId = 4, 
                                Title = "The Structure of Scientific Revolution", 
                                IsCheckedOut = false,
                                PageCount = 500, 
                                Author = new Author()
                                { 
                                    AuthorId = 4, 
                                    FirstName = "Thomas", 
                                    LastName=  "Kuhn"
                                }
                            },
                            new Book()
                            { 
                                BookId =5,
                                Title = "Sapiens: A Brief History of Humankind", 
                                IsCheckedOut = false,
                                PageCount = 450, 
                                Author =new Author() 
                                { 
                                    AuthorId = 5, 
                                    FirstName = "Yuval", 
                                    LastName = "Hariri"
                                }
                            }
                        };
            Members = new List<Member>()
                        {
                            new Member()
                            { 
                                MemberId = 1, 
                                FirstName = "Parakh", 
                                LastName = "Singhal", 
                                NumberOfBooksCheckedOut = 0
                            },
                            new Member()
                            { 
                                MemberId = 2, 
                                FirstName = "Prateek", 
                                LastName = "Mathur", 
                                NumberOfBooksCheckedOut = 0
                            },
                            new Member()
                            { 
                                MemberId =3, 
                                FirstName = "Sumant", 
                                LastName = "Sharma", 
                                NumberOfBooksCheckedOut = 0
                            }
                        };
 
        }
 
        //Delegate which can accept methods having a string parameter
        public delegate void CheckoutHandler(string message);
 
        private CheckoutHandler checkOutHandlerMembers;
 
        public void RegisterCheckOutHandlerMembers(CheckoutHandler methodToRegister)
        {
            checkOutHandlerMembers += methodToRegister;
        }
 
        public void UnRegisterCheckOutHandlerMembers(CheckoutHandler methodToUnregister)
        {
            if (checkOutHandlerMembers != null)
            {
                checkOutHandlerMembers -= methodToUnregister;
            }
        }
 
        public void CheckOutBook(int MemberId, int bookId)
        {
            //The operation of search will be printed out by the program only 
            //if there are members to the delegate type
            if (checkOutHandlerMembers != null)
            {
                checkOutHandlerMembers("Searching for book and Member records");
            }
 
            Book bookToBeCheckedOut = Books.Find(book => book.BookId == bookId);
            Member MemberCheckingOut = Members.Find(Member => Member.MemberId == MemberId);
 
            //The operation of success in finding the book and Member will
            //only be printed if there are members to the delegate type
            if (bookToBeCheckedOut != null &&
                MemberCheckingOut != null && 
                checkOutHandlerMembers != null)
            {
                checkOutHandlerMembers("Book and Member records found.");
            }
 
            if (bookToBeCheckedOut.IsCheckedOut == false)
            {

//The final result, whether the book can be checked

//out needs to be printed whether

                //there are any members to the delegate type. 
                //That's why if-else statement with duplicate
                //console writes
                if (checkOutHandlerMembers != null)
                {
                    checkOutHandlerMembers("Congratulations, the book is available");
                }
                else
                {
                    Console.WriteLine("Congratulations, the book is available");
                }
            }
            else
            {
                if (checkOutHandlerMembers != null)
                {

checkOutHandlerMembers("Apologies, but the book is already

checked out to an existing Member.");

                }
                else
                {

Console.WriteLine("Apologies, but the book is

already checked out to an existing Member.");

                }
            }
        }
    }
}

 

The model created above is consumed in the console application.

class Program
    {
        static void Main(string[] args)
        {
            Library library = new Library();
            library.RegisterCheckOutHandlerMembers(OnCheckingOutEvent);            
            library.CheckOutBook(1, 1);
            
            Console.ReadLine();
        }
 
        public static void OnCheckingOutEvent(string message)
        {
            Console.WriteLine(message);
        }
    }

 

When executed the following output appears:

Broadcast of fulfillment of a conditionIn the output shown above, the program emitted certain messages related to the searching of the member and book details and successful checkout of the book. Now, remember, the domain is responsible for emitting the information, but what we do with the information is entirely in the hands of the developer. We can compose an email or an SMS and embed the emitted message or have it logged in a log file or a database.

Summary

Delegates help in separating the act of broadcasting information and how that information is consumed.
I hope this post helped in laying a strong foundation by presenting the concept of delegates in an easy to understand manner.

References

  1. Pro C# 8 with .NET Core 3 by Andrew Troelsen and Phil Japikse
  2. CLR via C# by Jeffrey Richter

Delegates And Events–Part 1 of 3

19. November 2020 09:45 by Parakh in Visual C#  //  Tags: , ,   //   Comments
This post attempts at explaning the concept of delegates and events in C# as it relates to real life, in as simple a manner as possible.

In my experience, if there’s one topic in C# that baffles the programmers the most, it is the topic of events and delegates. And the root of the state of confusion is not the lack of attempt on the programmer’s part, but the way the books on programming languages explain the concept – in a dry academic sense, devoid of any relatability to real life.

This blog post is my attempt to explain the concept of events and delegates in an easy way.

Events in real life are occurrences where something of importance happened to an entity. Let me elaborate on that. Consider a normal human being. Events in the life of a normal human being would be:
1. Birth
2. First day of school
3. Graduation from school
4. First day of college
5. Graduation from college
6. First pay-check
7. Getting married
8. First child
…and so on. The aforementioned occurrences would normally be considered important, hence endowed with a special term, events.

Whenever an event occurs, there’s something done. Birth of a child is celebrated, graduation from school is celebrated with a farewell party, marriages are celebrated with near and dear ones, etc.

This is what is the inspiration for the abstraction, aptly called events in modern object-oriented programming languages. Events are important occurrences in the life-span of an entity. An entity can be a button in a Windows Form, a dropdown on a web page, or some kind of a custom activity in a user-defined object like a domain class. Correspondingly, the event would be pressing a button, changing the selected element in a dropdown or value of a property in a domain class.

Whenever some event occurs or gets fired, something is done. That something is done in some defined code, called the event handler. An event handler is essentially a method, with details of what needs to be done when the event is fired.

Now that we have understood the concept of events and event handlers, let’s understand the concept of delegates. Delegates are like the consciousness that pushes us to do something when an event occurs. Essentially, a delegate is the glue that ties an event and an event handler together.

To summarise:
When something of importance happens -> Event
What we do in case of an event -> Event Handler
The glue connecting the event and event handler –> Delegate

I hope that this post was able to sow the idea of events and delegates your mind in a non-technical and relatable way. In future posts, I will shed more light on the topic.

DALHelper – A convenient way to connect to SQL Server in .net applications.

DALHelper is an elegant and easy way to connect to SQL Server databases and only write minimum possible pertinent code.

Visit DALHelper.Codeplex.com for source code, ready to use assembly and related documentation.

Brief description

The DALHelper is a project that was born out of my needs to connect to SQL Server database for my projects. I generally work on projects and design them using domain model and to keep them flexible, understandable and fast, I prefer to connect to the database using ADO.NET. Writing ADO.NET commands to connect to database can become monotonous and repetitive. Using Microsoft's Enterprise Library's Data Access Application Block is one solution, but I generally find it requiring a bit more effort than should be invested. Of course it gives you the freedom to change your supporting back end database. Generally back end databases in applications do not change, especially in enterprise environments and small applications for which the express version of SQL Server can be sufficient, and if you work with such applications then, I believe DALHelper can make your life a bit easier.

NOTE: This library cannot be used with any other database other than SQL Server, as it is built upon SQL Server specific ADO.NET commands.

The library contains various helper methods that can simplify the task of doing CRUD (Create, Read, Update and Delete) on a SQL Server database in a .NET application. The library can be used with any .NET compliant language, is open sourced and will remain that way.

DALHelper touches upon the following technologies:
1. Visual C# 4.0
2. .NET Framework 4.0
3. ADO.NET technology, part of .NET framework, used to connect to databases.
4. Code Contracts, Microsoft’s implementation of Design by Contact paradigm.

The DALHelper library has been designed to be provided with the connection string to the database once via property injection and then perform various operations as desired by the user with the help of the methods provided in the library. Some of the best practices that have been followed while the methods were designed are the following:

1. The methods follow a pattern in their signature and are easy to use.

2. The methods provided in the library are overloaded, thus providing you just the signature that you need in order to accomplish what you desire, without cluttering up your code.

3. The names of the methods are very much self-explanatory in context what they service they are supposed to provide.

The variety of methods available should fit majority of the requirements found in any small to medium scale enterprise application. Every method available in the library allows you to execute a SQL query or a stored procedure.


Every method available in the library has two overloads:

1. Without parameters, and

2. With parameters

Every method available in the library has the signature of the format:

1. SQL text: Is the SQL query or stored procedure that needs to be executed.

2. SQLTextType: An enum which signifies whether the SQL text parameter is a SQL query or a stored procedure. By default, the choice is that of a stored procedure.

3. List<SqlParameter>: An optional generic list of SQL parameters type that might be required by the SQL query or stored procedure. The parameters can be of both input and output type.

Brief description of methods available in the library:

1. ExecSQL


The ExecSQL method can be used to execute a SQL statement or a stored procedure without returning any value. Available in two overloads:
public void ExecSQL(string sqlText, SQLTextType sqlTextType = SQLTextType.Stored_Proc)
public void ExecSQL(string sqlText, SQLTextType sqlTextType = SQLTextType.Stored_Proc, List<SqlParameter> parameterCollection = null)

 

2. GetRowsAffected

 

The GetRowsAffected method can be used to execute a SQL query or a stored procedure and return the total number of rows affected by execution. Available in two overloads:
public int GetRowsAffected(string sqlText, SQLTextType sqlTextType = SQLTextType.Stored_Proc)
public int GetRowsAffected(string sqlText, SQLTextType sqlTextType = SQLTextType.Stored_Proc, List<SqlParameter> parameterCollection = null)

 

3. GetDataTable

 

The GetDataTable method can used to execute a SQL query or a stored procedure and return the result set in a data table. Available in two overloads:
public DataTable GetDataTable(string sqlText, SQLTextType sqlTextType = SQLTextType.Stored_Proc)
public DataTable GetDataTable(string sqlText, SQLTextType sqlTextType = SQLTextType.Stored_Proc, List<SqlParameter> parameterCollection = null)

 

4. GetDataView


The GetDataView method can be used to execute a SQL query or a stored procedure and return the result set as a data view. Available in two overloads:
public DataView GetDataView(string sqlText, SQLTextType sqlTextType = SQLTextType.Stored_Proc)
public DataView GetDataView(string sqlText, SQLTextType sqlTextType = SQLTextType.Stored_Proc, List<SqlParameter> parameterCollection = null)

 

5. GetDataSet


The GetDataSet method can be used to execute a SQL query or a stored procedure and return the result set(s) in a dataset. Available in two overloads:
public DataSet GetDataSet(string sqlText, SQLTextType sqlTextType = SQLTextType.Stored_Proc)
public DataSet GetDataSet(string sqlText, SQLTextType sqlTextType = SQLTextType.Stored_Proc, List<SqlParameter> parameterCollection = null)

DALHelper is an excellent way to implement repository architecture style and simple CRUD implementations.

Future Roadmap

In future I plan, to extend this library into a framework, supporting various data sources such as XML, Excel, CSV files etc.

Helpful Links

Some of the links that might be helpful in understanding the programming concepts and technologies that have gone in making of this library:
Visual C#:

1. http://msdn.microsoft.com/en-us/vstudio/hh341490.aspx

.NET Framework:

1. http://www.microsoft.com/net

2. http://msdn.microsoft.com/en-US/vstudio/aa496123

ADO.NET:

1. http://msdn.microsoft.com/en-us/library/e80y5yhx.aspx

Code Contracts:

1. http://research.microsoft.com/en-us/projects/contracts

2. http://msdn.microsoft.com/en-us/devlabs/dd491992.aspx

Dependency Injection:

1. http://en.wikipedia.org/wiki/Dependency_injection

2. http://msdn.microsoft.com/en-us/magazine/cc163739.aspx

SignalR Sample Application 2 – Draggable Element

26. February 2013 23:09 by Parakh in .NET Framework, SignalR, Visual C#, jQuery  //  Tags: , , , ,   //   Comments
This post builds upon the basics of SignalR presented in the last post and delves into making another example using SignalR, jQuery and ASP.NET Web forms.

The last post showcased an elementary application, that was meant to prime up the reader on the basics of the SignalR library. This post builds upon the last post and makes a bit more involved web application,that uses jQuery UI library. The SignalR programming unto itself will remain simple. If you are new to SignalR, please first go through introduction to SignalR.

Intention:

Make a draggable visual element which when dragged across in a client browser, should replicate motion in other client browser(s).

To do this, we will take help of jQuery UI library which builds upon jQuery library. As I have already covered the basic steps involved in making a basic application in my last post, I will keep the instructions concise.

1. Make an empty ASP.NET Web forms website.

2. Add a SignalR Hub class with the name “MoveShape” and declare a public method “Move” which accepts two integer parameters x and y, which we will use to pass the screen coordinates. Here is what the code should look like:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR.Hubs;
 
 
public class MoveShape : Hub
{
    public void Move(int x, int y)
    {
        Clients.Others.shapeMoved(x, y);
    }
}

Explanation of code:

The Move method will receive two integer values signifying the screen coordinates of the visual element on screen. The method will invoke method “shapeMoved” available on the client side and pass on the two coordinates, it received originally. These coordinates will then be used on the client side to position the visual element accordingly.

3. Add a Global.asax class and register hubs in the “Application_Start” method.

4. Add a css file with the following code. Note that the code is relatively simple and a lot of it is simply providing visual enhancement. It can be a lot simpler for this example.

body
{
    background: #261201;
    margin: 0;
    padding: 0;
    font-family: Sans-Serif;
    font-style: normal;
    font-size: 1em;
    font-weight: normal;
    font: Calibri, Verdana, Helvetica;
    color: #F2E7AE;
}
 
h1, h2, h3, h4, h5
{
    color: #A62103;
}
 
#container
{
    margin: 0.25em;
    padding: 0.5em;
}
#header
{
    margin-bottom: 0.25em;
    padding-left: 0.25em;
    border-bottom: 1px solid #EEE;
}
 
#draggable
{
    margin:1em;
    padding:1em;
    color: #A62103;
    background-color:#F2E7AE;
    width:100px;
    height: 50px;
    border: 3px solid #A62103;
    cursor:move;
}
 

Explanation of code:

The code having the id of draggable is the code that will make up the visual element in the form of a rectangle with a cream colored background.

5. Add an HTML file with the following code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Draggable Item</title>
    <link href="Style/Brown.css" rel="stylesheet" />
    <script src="Scripts/jquery-1.9.0.js"></script>
    <script src="Scripts/jquery.signalR-1.0.0-alpha1.min.js"></script>
    <script src="Scripts/jquery-ui-1.10.0.custom.min.js"></script>
    <script src="signalr/hubs"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var hub = $.connection.moveShape;
            var draggableShape = $('#draggable');
 
            hub.client.shapeMoved = function (x, y) {
                draggableShape.css({ left: x, top: y });
                draggableShape.html("Drag Me!!<br />x: " + x + "<br />y: " + y);
            };
 
            $.connection.hub.start().done(function () {
                draggableShape.draggable({
                    drag: function () {
                        var position = draggableShape.offset();
                        $(this).html("Drag Me!!<br />x: " + position.left + "<br />y: " + position.top);
                        hub.server.move(position.left, position.top);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <div id="container">
        <div id="header">
            <h3>Making draggable item using jQuery.</h3>
        </div>
        <p>
            Drag the box around and SignalR synchronizes the motion in all open browser windows.
        </p>
        <div id="draggable">Drag Me!!</div>
    </div>
</body>
</html>

Explanation of code:

In the HTML code we have referenced all the required JavaScript files including the jQuery library, jQuery UI library and the SignalR JavaScript client. Notice that I am using the latest stable version of jQuery and jQuery UI library available at the time of writing this post. In the jQuery code, I am making the hub available at the client side, which will be used to program the methods that need to be executed at the client side. I am caching the visual element that will be made draggable, as reading the DOM repeatedly will lead to an efficient code. The method shapeMoved receives two integer parameters and uses those to change the css properties of x and y coordinates of the draggable elements in all the clients. Once the hub is instantiated, we make the div element bearing the id “draggable”, draggable with the help of the in-built function available in jQuery UI, and declare the drag property to record the x and y coordinates in the client view portal and execute the move function (which corresponds to the Move() method available at the server side code). The coordinates are also showed in the visual element just for referential purposes.

In the end the code hierarchy should look like in the following image:

code hierarchy 2

 

 

 

 

 

 

 

 

 

 

 

 

Now run the website in Debug mode and you will be able to observe a box which when moved in in client browser also moves in other client browser(s).

Browsers 2

 

 

 

 

 

 

 

 

 

 

 

This post was a bit heavy on the jQuery code, not so much on SignalR code, but shows the vast potential of the library. Anywhere, where you might require real time functionality between server and client(s), you can use SignalR.

Source code:

Draggable source code

 

 

Thanks for reading.

Relevant Links:

1. Building Real-time Web Apps with ASP.NET SignalR

2. www.asp.net/signalr

3. https://github.com/SignalR/SignalR

SignalR Sample Application – Hello World

In my last post, I described the simplicity that SignalR brings to table when we want to include real time asynchronous communication between server and client(s) in our application. In this post I will make a simple application, the proverbial ‘Hello World’ kind of application to introduce the basic concepts of this new library.

The following are the pre-requisites for the application:

1. Visual Studio 2012

2. .NET Framework 4.5

3. ASP.NET and Web Tools 2012.2

The best thing about the web tools update 2012.2 is the included template that makes adding SignalR capabilities to your project amazingly easy. Our website will be based on ASP.NET Web forms and will use JavaScript client, which comes in the form of a jQuery plugin. So let’s start.

1. Fire up your Visual Studio and make a new empty ASP.NET Web forms web site.

2. Right click on the website and add a SignalR Hub class and provide “HelloWorld” as the name for the hub class. This will add the following items in the website:

a) App_Code folder – which will house our hub class and the App_Start folder which contains the RegisterHubs.cs file, housing the code that maps the hubs available at application startup.

b) Scripts folder which houses all the JavaScript files, including the bundled jQuery library and the JavaScript client based upon the jQuery library.

c) Bin folder housing all the necessary assemblies that co-ordinate things on the server side. This also contains the JSON serializer Json.NET.

d) packages.config which lists all the external dependencies.

Now we will have to change this setup a little bit in order to make it work in a web forms website. Remove the App_Start folder and the containing RegisterHubs.cs file from it. The App_Start folder is something that the MVC website can use to execute code at application startup. Web form website uses Global.asax to do just the same. I believe this a template error, and will be corrected out in future releases.

Delete App_Start folder and it's contents

 

 

 

 

 

 

 

 

 

 

 

 

3. Add a Global.asax file to the solution. The HTML portion of your Global.asax file should look like this:

<%@ Application Language="C#" Inherits="Global" CodeBehind="~/App_Code/Global.asax.cs"%>
 
<script runat="server">
</script>

 

and the code behind portion should look like this:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Routing;
using Microsoft.AspNet.SignalR;
 
/// <summary>
/// Summary description for Global
/// </summary>
public class Global:System.Web.HttpApplication
{
    void Application_Start(object sender, EventArgs e)
    {
        // Code that runs on application startup
        RouteTable.Routes.MapHubs();
    }
 

Explanation of code:

Note that we are required to include System.Web.Routing and Microsoft.Aspnet.SignalR namespaces and make the Global class inherit from System.Web.HttpApplication class.The purpose of having RouteTable.Routes.MapHubs is to map the hubs available to the client to a special default address: /signalr/hubs. If you want to configure the availability of hubs to a special address then you will have to provide custom address in the MapHubs as a string parameter. e.g. RouteTable.Routes.MapHubs(“~/signalr2”).

4. Now head over to the hub class and add the following code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR.Hubs;
 
public class HelloWorld : Hub
{
    public void Hello()
    {
        Clients.All.hello();
    }        
}
 

 

Explanation of code:

The main thing to notice here is the inclusion of the namespace Microsoft.Aspnet.SignalR.Hubs and derivation of the hub class HelloWorld from parent class Hub. From the perspective of the client and server model, this is the class that aptly serves as a hub and will receive all the communication from the client(s) and further the same to other client(s) or take some action on the server side. In code, we are declaring that there is a server side method called “Hello” which when executed will execute a method called “hello”, available to all the clients.

5. Now add an HTML page and add the following code in it.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Hello World! with SignalR</title>
    <script src="Scripts/jquery-1.7.1.min.js"></script>
    <script src="Scripts/jquery.signalR-1.0.0-alpha1.min.js"></script>
    <script src="/signalr/hubs" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
 
            //defining hub which will have client and server side methods defined.
            var hub = $.connection.helloWorld;
 
            //defining what the client side "hello" method should do when called.
            //by the server side code.
            hub.client.hello = function () {
                $('#AddText').append('Hello World!<br />');
            }
 
            //starting the hub and specifying what should server side code should be
            //called when a certain client side event occur.
            $.connection.hub.start().done(function () {
                $('#SubmitButton').click(function () {
                    hub.server.hello();
                });
            });
        });
    </script>
</head>
<body>
    <div id="AddText"></div>
    <input type="button" id="SubmitButton" value="Say Hello" />
</body>
</html>

 

Explanation of code:

Here we reference all the necessary JavaScript libraries among which are the jQuery library and SignalR JavaScript client based on jQuery. There is one special JavaScript reference “/signalr/hubs” which is the JavaScript that is dynamically generated at client side and referenced by DOM at runtime. The body of the HTML document consists of a div element bearing id “AddText” to which we will add text “Hello World!” each time the button “Say Hello” is pressed. The jQuery code for this example is very simple. In it we declare the name of the hub class. Note that we are using camel casing as per JavaScript coding conventions to refer to our server side hub class. Thus “helloWorld” at client side is “HelloWorld” at server side. We then define that the client side “hello” method which is actually adding the text “Hello World!” and a line break to the div element “AddText”. We then start the connection and when done, observes the click event of the “Say Hello” button. When the click event happens on the client side, we execute the server side method “Hello” of the hub class, which in turns executes the “hello” method available at all the clients. This adds text to the div element at all clients.

Speaking diagrammatically, this is what we are aiming to do:

Client-Server Model

 

 

 

 

 

 

 

 

 

 

 

 

 

 

In the end the code hierarchy should look like in the following image with all the code in the right place.

Code hierarchy

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

6. As the last step start debug and run the website in IIS Express. Open the website in multiple different browsers and press the “Say Hello” button. It will add text “Hello World!” in all the browsers simultaneously in real time.

Multiple browsers

 

 

 

 

 

 

 

 

 

 

 

Website running in IE9 and Firefox, receiving instructions from server in real time.

The code example presented here has been deliberately kept simple to prime the reader of the basic concepts of this new library.

In a nut shell we achieved:

1. Real time communication between server and client(s).

2. Auto negotiation of protocol (WebSocket, forever frames, long polling etc.) between the client(s) and server.

3. Simple, unified programming interface built upon C# (server side) and jQuery (client side in ASP.NET).

Download code:

SignalR sample application download

 

 

 

In the next post I will demonstrate a more involved example, utilizing jQuery UI. Stay Tuned.

Month List

ParakhSinghal@Twitter.com

Note: For Customization and Configuration, CheckOut Recent Tweets Documentation