2013-07-20

ASP.NET Web API is a framework that makes it easy to build HTTP services that reach a broad range of clients, including browsers and mobile devices. ASP.NET Web API is an ideal platform for building RESTful applications on the .NET Framework.

In this article, we will use Web API with Empty Web Forms application for CURD on list of Customer Information. We will be using Visual Studio 2012 and .Net 4.5.

Create Empty Web Forms application

Open Visual Studio 2012, Go To New -> Project. Select Visual C# -> Web from the left hand navigation and select project type as ASP.Net Web Forms Application. Enter the project name as AB_CustomerWebAPI



Model

Right Click the Project in the Solution Explorer, Select Add -> New Folder from the Context Menu. The name of the class will be “Model”. Then do it again to add class “Customer” under Model Folder


DbContext

Right Click the Model Folder in the Solution Explorer, Select Add -> Class from the Context Menu. The name of the class will be “CustomerContext”.

Database Connection string

add following line to web.config file of project

The Repository

Right Click the Model Folder in the Solution Explorer, Select Add -> Class from the Context Menu. The name of the class will be “CustomerRepository”.

The WebAPI Controller

Right Click the Project in the Solution Explorer, Select Add -> New Folder from the Context Menu. The name of the class will be “Api”. Then do it again to add class “CustomersController” under Api Folder


Adding Web API Route in Global.asax

For the controller to handle requests of a particular type, we will have to define a route in the Global.asax file.

Open global.asax file and add the following code in the “Application_Start” method

Now run Web Form Application (F5)

The URL will be something like http://localhost:xxxxx/Default.aspx where xxxxx will be port number.

To Test the WebAPI, we will have to use the URL as defined in the Route. Enter the following URL in the browser http://localhost:xxxxx/api/Customers/ (Replace xxxxx with your port number)

Now database created in your Solution Explorer (App_Data/Database.mdf)

Add some data to Customer table

WebAPI with jQuery (CURD)

Get all Customers:

Web Api URL: api/Customers

Search Customer:

Web Api URL: api/Customers/id

Add Customer:

Delete Customer:

Web Api URL: api/Customers

Update Customer:

In the “Default.aspx” file, we will use the following code for the body section to display the data

Thanks

Download

Note: There is a file embedded within this post, please visit this post to download the file.

Show more