Pages

Thursday, December 13, 2012

Hello World App Using ASP.NET SignalR


Introduction

ASP.NET SignalR is an async signaling library for .NET to help build real-time, multi-user interactive web applications. In this article we will see, how do create a basic application using ASP.NET SignalR.

Previously SignalR was a standalone entity, now it's integrated as part of ASP.NET framework. You can check the following fall update.

http://www.microsoft.com/en-us/download/details.aspx?id=35493

Procedure

We can check the following documentation to understand the basics about SignalR.

https://github.com/SignalR/SignalR/wiki

We will create a simple application that the user can drag and drop the Div/Box and the same position of the box will be updated to all clients. First we need to add a reference for the SignalR dlls; we can use the Nuget package also to add the references.

http://nuget.org/packages/microsoft.aspnet.signalr

ASP.NET-SignalR.jpg

The same Nuget Package can also install the required JavaScript files and we added the "Jquery.UI" plug-in for the demo application.

Nuget-Package.jpg

We will create a simple "Hub" to broadcast the required actions (method) from the server as explained below. Please note that we need to add the "Microsoft.AspNet.SignalR.Hubs" namespace and the application namespace should be unique across the application files.

Microsoft.AspNet.SignalR.Hubs.jpg

We will prepare the client, just added a HTML page and the following JavaScript references and div tag.

JavaScript-references-and-div-tag.jpg

We don't have the manual reference for "signalR/hubs" js, it'll automatically be created at runtime and does the all magic. We'll add the following JavaScript to complete our functionalities.

manual-reference-for-signalR-hubs.jpg

In the preceding script we have three parts:

  1. We need to create a connection to the server and the same "Hub" name should be used in this connection statement.
  2. We can define the client side event called "shapemoved" and do the actions at the client side. Here we set the CSS property to the "shape" div. If we notice the "Hub" code we are calling this client side event from the server.
  3. The final one to do is we need to call a server side method "action" which is a "Hub" method. We called the "action" method in the client side "drag" function.
That's all, now we will see the result in action, if we drag the box in one browser and it's automatically updated in other clients.
result-in-action-Nuget-Package.jpg

Summary

ASP.NET SignalR is a new library for ASP.NET developers that make it incredibly simple to add real-time web functionality to your applications. What is "real-time web" functionality? It's the ability to have your server-side code push content to the connected clients as it happens, in real-time.
 

Hello World App Using Client Web Part in SharePoint 2013

Introduction

In this article we will see how to create and use a "Client Web Part" using the Office Napa Tool. In the previous article, we covered the basic App development using Napa Tool.
Steps

First we will navigate to the "Napa office 365 Development Tools" and select any existing App or create a new one.

Image1.jpg


Image2.jpg

Image3.jpg

Once your application opens, select the "ClientWebPart.aspx".

Image4.jpg

Add the following code to develop a simple application that will just list the latest 10 tweets.

Image5.jpg

Add the "JS" event to populate the tweets.

Image6.jpg

Create a new site page (wiki page) in our SharePoint 2013 site and edit the page.

In Edit mode navigate to the Ribbon ->Insert -> click App part

Image7.jpg

Select the SharePoint App and add it to our page.

Image8.jpg

Image9.jpg

We will ensure that the web part will work fine. Now it will load the tweets.

Image10.jpg

Summary

Using "Client Web Part" we easily add any "App Functionality" to our pages.