Google Charts with MVC3

In this blog I am going to talk about how to add the powerfull Google Charts to your MVC 3 Application. Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.

Step 1: Create a new project

Go to File –> New Project –> Web –> Asp.Net MVC 3 Application

Step 2:Javascript files and libraries

add the following javascript files to head of your page

Step 3: Add Client Javascript and Html

Note here we are making an ajax request to “/Home/GetData” to get data from server and assign data to google chart api

Step 4: Add ServerSide

That’s all. You can download the sample from here

Working examples using Signalr and MVC3

In this tutorial  I am going to talk about a real examples that we need to implement in most of projects.

Step 1: Create Application

Go to File –> New Project –> Web –> Asp.Net MVC 3 Application “Internet Application” (Make sure it’s .Net Framework 4).

Step 2: Add SignalR Package

Right click on references and click Manage NuGet Packages. Search for SignalR and click install. Or use NuGet package manager concole and install the SignalR package using

Step 3: Add Hub

Create a new Class named Chat in a new folder in the solution “Name it as u want”

Note the attribute HubName above the class name, that attribute is for naming the hub during calls as we going to see later

Step 4: Add Sending Functions

You can notice that the function has three parameters a required parameter message,two optional parameters clientId and group so if we need to send message to all users live in the application we can send only message to send function and leave, if we need to send message to only one user all we have to do is to add client id with message if we want to send a message to a specific group send group name with message only

Step 5: Change user Id

the main problem for us now is the client id, Because it is changeable with each single request to the page so we need to identify users so we can add to helpers the following helper class that will help us to resetting the connection id in hub

because i am using membership to login and security i used membership.GetUser function to get user id. Remember id here is a Guid so if you are using your own implementation and not using membership you have to generate a unique Guid id for each person.

Step 6: Register new user id to Application

Now we have to register the newly generated user id to the application we are going to add the following code in Global.asax

Now in application start and while user opened a new session to your application the new Id we just made will be assigned to him and we can ue it to identify each user and send.

Step 7: Adding user to group

To add user to group i used action method in my HomeController to do that work

Step 8: Add client code

Append javascript references to the head of the page as follows

As you can notice there is a /signalr/hubs file included but its not in the project because its dynamically generated file in run time

Append the following javascript

I added commented lines above each line to declare how it works.

Append the following Html to your page

You can download the sample code from here