Friday, February 22, 2013

Self hosted ASP.Net Web API OData service

In my previous post I showed how to create ASP.Net Web API OData application. In this post I'll show, how to host an ASP.Net Web API OData service in a console application.

First create a console application using .net 4.5. Add two nuget packages, which are

  • Microsoft.AspNet.WebApi.Selfhost
  • Microsoft.AspNet.WebApi.OData
Create a new model class called Student.
Also create StudentFacade class like below. 
First we have to write our EDM model. To do that add a new method to Program class like below. 
Using ODataConventionModelBuilder, we define which entity sets that should be exposed to the out side world. 
Now we have to configure our OData route.  MapODataRoute is an extension method. We have to add using staement for System.Web.Http.OData. Since we are going to do a self hosted service, we have to use HttpSelfHostConfiguration class for the OData configuration.
Now we have to create a sever and host the service in there.
Below is the Program class up to now.
Now run the application and go to http://localhost:53543/odata/ using browser. You can see the service document for this particular service. 
To view other metadata of the service, access the http://localhost:53543/odata/$metadata URL. 
Now we need to access Student data set. Go to  http://localhost:53543/odata/student URL. But you'll get 404 message.
Reason is though you have exposed the entity sets, there must be an ODataController to expose data from entity sets.
We have to define an ODataController like below.
Run the program again and go to  http://localhost:53543/odata/student URL. You'll see a list of students.

Thursday, February 21, 2013

OData using ASP.Net Web API

OData is a data access protocol in the web. This OData protocol supports for both XML and JSON formats.

In this post I'll explain how to create an OData end point using ASP.Net web API.

Create mvc application using .net 4.5. Install Microsoft.AspNet.WebApi.OData nuget package.
Create a model class called Student.
Build the solution and add StudentController to the project. Add code like below.
Open App_Start folder and edit WebApiConfig.cs file to configure the OData end points. Add the following code.
ODataConventionModelBuilder needs to know the collections that we need to expose to the outside world. So we are configuring that in here.
In above code "Student" is name of the entityset. Name of the controller must match the name of the entityset. Particular end point can have multiple entity sets.
The first parameter is the route name. The second parameter is the URI prefix for the endpoint. Then for the Student entityset the URI is http:/hostname/odata/Student. For an application there can be more than one OData endpoint. After we run the code, the results would be look like below.

Pagination using OData Web API

Using OData Web API, we can have server driven paging. The only thing that we have to do is pass PageSize argument for QueryableAttribute.
After that the results will be look like below.
In JSON result there's a new thing called odata.nextLink. Using that we can fetch the next page.

Monday, February 18, 2013

SignalR with PersistentConnection

In my previous post I explained about how to use Hub connections in SignalR. In this post I'll show how to use PersistentConnection with SignalR.

Create an empty web application. Install Microsoft.AspNet.SignalR through nuget.
Create MessageConnection class like below. You should override OnReceived method. When message received to the MessageConnection, that message will broadcast to all clients.
Now we have to map this class to route table. So add Global.asax file and in Application_Start method map the MessageConnection class like below. We have to pass two parameters : Name for the connection and routing URL.
Add OnlineConnection.html file. When we enter a value in txtMessage text box, and press btnSend, that message will go to server and result will show in the message div.
We need to add two java script libraries. Jquery and SignalR. When web page is loaded, we need to define the connection. This is a PersistentConnection and we have mapped URL as "/message". Because we mapped the URL like that in Global.asax. When the the SignalR MessageConnection  started, we have to bind click function to the btnSend. In click function we send data to MessageConnection. This will broadcast  received messages. So in java script, when message received, we append that text to message div.
You can find the source of this demo in GitHub.

Saturday, February 16, 2013

Real-time Communication with SignalR

HTTP is designed for Request Response. It's not designed for real-time communication. But now HTML 5 has provided Web Sockets for real time communication. But Web Sockets is still in draft state.

Techniques for Real Time Communication

  • Forever frame
  • Periodic polling
  • Long polling
But there are lots of disadvantages of the above techniques. Also those techniques are not actually real time. That may contain even a minor delay of real-time communication. And also wasting of server and client resources.

What is SignalR?

"SignalR is an open-source .NET library for building web applications that require live user interaction or real-time data updates."

In this post I'll create a sample real-time application using SignalR Hubs. It's about, when a client send a message to the server, all the clients connected to that server will get the message in real time.

Create empty web application using .net 4.5. After that Install Microsoft.AspNet.SignalR through nuget.
Add Global.asax for the project. In the Application_Start method map the hubs like below.
Create a hub class called NotificationHub. In SignalR, Hubs  provide a higher level RPC framework over a PersistentConnection. 
I have set the hub name as notification using HubNameAttribute. When a client call the SendNotifications method, the message will send to all clients who has connected to the hub. Now the hub class is completed.
We need to design the web page for this. Add Notification.html page to the project.
We need to add some java script reference for the page.

  • Jquery library(jquery-1.6.4.min.js)
  • SignalR Library(jquery.signalR-1.0.0-rc2.min.js)
  • SignaR java script proxy for the hubs. This is a virtual path (/signalr/hubs)
  • Notification.js. The file that we are going to write our java scripts.

When ever a user type message in txtNotification and press SendNotification button, this will go to server and server will send that message to all clients which have connected to the hub. All messages retrieved from the server will be displayed in the messages div.
Now we have to write the java script code for access the notification Hub. Add Notification.js file in the Scripts folder.

After the web page has loaded event, add a reference to the server side hub by adding,
var hub = $.connection.notification;

In the NotificationHub, when SendNotifications method get called, it will call to client's SendDetails method. So we need to write relevant java script code for SendDetails method like below.
After the hub is started we need to enable the click function like below. When the button get clicked we need to call sendNotifications method in the hub.
Below is the full Notification.js code.
Run the Notification.html file. Enter some values and send. This will show the sent values in the messages div.
Open a new browser window using the same URL. Send messages from that browser window also. Those messages will reflect in the both browser windows in real time. Open several browsers and try send messages.
You can find the source of this demo in GitHub.