Bind A Google Chart With WebGrid in Web API

Introduction

This article describes how to bind Google Chart in a WebGrid. Here we add a WebGrid that shows a chart of the state population.

Procedure for creating the application.

Step 1

First we create a Web API application as in the following:

• Start Visual Studio 2013.
• From the Start Window select "New Project".
• From the new project window select "Installed" -> "Visual C#" -> "Web" -> "Visual Studio 2012".
• Select "ASP.NET MVC4 Web Application" and click the "OK" button.
  
  
  
  
• From the "MVC4 project" window select "Web API".
  
  
  
  
• Click on the "OK" button.

Step 2

Add a Model folder as in the following:

• In the "Solution Explorer".
• Right -click on the "Model folder".
• Select "Add" -> "class".
• From the add item window select "Installed" -> "Visual C#".
• Select "Class" and click on the "Add" button.
  
  

Add the following code:

Step 3

Now in the "Controller" we add the code that uses all the variables of the Model class. This file exists:

• In the "Solution Explorer".

• Expand the "Controller" folder.

• Select the "HomeController".
  
  

Add the following code: