Create a Web API and Consume it in Windows Store App Using GridView

Introduction

To perform database binding we consume the WebAPI in Windows 8 apps, but first we have to create the webapi so that we can consume it. To create the Webapi use the following steps.

Step 1

First open the Visual Studio 2012 RC, then click on File -> New -> Project. A window is shown; in this select web from the Visual C# installed pane and then "ASP.Net MVC 4 Web Application" from the center pane. Give the name of the project as "EmployeeWebApi" and click ok.



Step 2

Then a new Project ASP.Net MVC 4 window is opened. In this select web API and click ok.



Step 3

Now to create the webapi first add a model class by right-clicking on the Model folder which resides in the Solution Explorer at the right hand side and then click add then class as:


Step 4

A window is shown; in this select class and give the name of the class as "employee.cs" then click ok.



Step 5

Now add the code in the employee.cs file as:

namespace EmployeeWebApi.Models
{
public class employee

{

public int Employee_Id { get; set; }

public string Employee_Name { get; set; }

public string Employee_Address { get; set; }

public long Employee_Contact { get; set; }

public long Employee_Salary { get; set; }

}

}

Step 6

Add a controller by right-clicking on the controller folder which is created in the Solution Explorer and click add then controller as:




Step 7

An add controller window is sahown; in this give the name of the controller as EmployeeController and select Empty API Controller from the available templates and then click ok as:



Step 8

Now add the code in the controller as:

using EmployeeWebApi.Models;

namespace EmployeeWebApi.Controllers

{

public class EmployeeController : ApiController

{

employee[] employee = new employee[]

{

new employee{Employee_Id=1,Employee_Name="Richa",Employee_Address="Noida",Employee_Contact=12567,Employee_Salary=5000},

new employee{Employee_Id=2,Employee_Name="Megha",Employee_Address="Delhi",Employee_Contact=98754,Employee_Salary=5435},

new employee{Employee_Id=3,Employee_Name="Gaurav",Employee_Address="Noida",Employee_Contact=33333,Employee_Salary=4233},

new employee{Employee_Id=4,Employee_Name="Suyash",Employee_Address="Delhi",Employee_Contact=5555,Employee_Salary=2342},

new employee{Employee_Id=5,Employee_Name="Manish",Employee_Address="Noida",Employee_Contact=84576,Employee_Salary=4555},

new employee{Employee_Id=6,Employee_Name="Manish",Employee_Address="Noida",Employee_Contact=84576,Employee_Salary=4555},

new employee{Employee_Id=7,Employee_Name="Ram",Employee_Address="Delhi",Employee_Contact=6456,Employee_Salary=4555},

new employee{Employee_Id=8,Employee_Name="Rajesh",Employee_Address="Gaziyabad",Employee_Contact=8865,Employee_Salary=4555},

new employee{Employee_Id=9,Employee_Name="Deepak",Employee_Address="Hapur",Employee_Contact=34242,Employee_Salary=4555},

new employee{Employee_Id=10,Employee_Name="Naveen",Employee_Address="Gaziyabad",Employee_Contact=86756,Employee_Salary=4555},

new employee{Employee_Id=11,Employee_Name="Rakesh",Employee_Address="Noida",Employee_Contact=8564,Employee_Salary=4555}

};

public IEnumerable<employee> GetAllEmployee()

{

return employee;

}

}

}

Step 9

Now run your application by pressing F5; the output will look like:



This shows that our API is loaded successfully. Now to view our API, paste the URL as:
http://localhost:1191/api/employee
The output is displayed in JSON format as:



Step 10

Now to consume this web API in Windows Store apps first close this project and open a new project by clicking File -> New -> Project. In the window that appears select Windows Store from the Visual C# installed pane and select blank page from the center pane then give the name of the project as "EmployeeDetail" and click ok.



Step 11

Add the class by right-clicking on the project in the Solution Explorer and click Add -> Class as:



Step 12

A window is shown. In this select class and give the name of the class that you want to give then click add as:



Step 13

Add the code in the class1.cs file as:

{

class Class1

{

public int Emp_Id { get; set; }

public string Emp_Name { get; set; }

public string Emp_Address { get; set; }

public long Emp_Contact { get; set; }

public long Emp_Salary { get; set; }