In Focus
MUST READ: Authors How to improve your Writing Skills
Ask a Question
TECHNOLOGIES
ANSWERS
BLOGS
VIDEOS
INTERVIEWS
BOOKS
Basics of AngularJS: Part 1
NEWS
CHAPTERS
CAREER ADVICE
C#CornerSearch
ARTICLE
How to Create Web API in ASP.Net MVC
By Saineshwar Bageri on Nov 24, 2014
This article explains what the Web API is and its basics.
Download Files: WebAPIBasic.rar
JOBS
TRENDING UP
READER LEVEL:
44.0 k
Contribute
15
This article explains what the Web API is and its basics.
01
Basics of AngularJS: Part 1
02
Google+ Authentication in ASP.Net
03
How to Configure SharePoint Server in
Windows Azure
04
How to Create Nodejs Module and
Publish Over to Npm
05
AngularJS Shopping Cart Using MVC
and WCF Rest Service
06
Learn Simple MVVM and Command
Bindings in 15 Mins
07
Basics of AngularJS: Part 2
08
jQuery Validation Plugin to Validate
Web Forms
09
Simplify JavaScript Object Oriented
Programming Model: Part 1
10
ASP.Net SignalR: Building a Simple
Real-Time Chat Application
View All
Follow @csharpcorner
The preceding image is from: http://forums.asp.net/t/1903769.aspx?When+to+use+web+api
Let's start with a definition first.
Web API
The 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.
The ASP.NET Web API is an ideal platform for building Restful applications on the .NET Framework. Referred
from Microsoft.com.
Why to use the Web API
Currently most mobile devices, browsersand tablets are the medium for accessing most of the internet and
in this also people are using mobile apps the most and to provide data to apps we are now going to use the
Microsoft new technology called Web API.
When to use it
If you want to expose the data/information of your application to your clients and other people then that
other people can use your data and interact with the data/information you expose to them.
For example, a mobile application requires a service.
HTML 5 requires a service.
Desktop PC and tablets require services.
Currently most device apps require Web API services.
The ASP.Net Framework leverages both web standards such as HTTP, JSON and XML and it provides a
simple way to build and expose REST based data services.
Some core concepts of ASP.Net MVC are similar to the ASP.Net Web API such as routing and controllers.
Requirements
We are using Visual Studio 2012 for a demo application.
Building a Web API
Let's start with creating a Web API project.
Start Visual Studio and select New project from the Start page or from the File menu select "File" > "New"
> "Project...".
In the template pane select Installed Templates and expand the Visual C# menu. Inside that Visual C# select
Web. In the list of projects select ASP.Net MVC 4 Web Application.
And name the project WebAPI_Basic.
For reference see the following snapshot.
After adding, a new dialog will popup.
Inside the project template select Web API and in the view engine select Razor.
A new project is created now.
Let's begin with adding Web API Controller
Now let's begin with adding a Web API Controller. It is nearly similar to adding a Controller in ASP.NET MVC.
Rightclick on the Controller folder and add a new Web API Controller with the name CarDetailsController
and in the template select API Controller with an empty read / write action.
After adding the Controller you will see the code as in the following snapshot.
You can keep this Web API controller anywhere in the application.
If you want to follow the convention then create the new folder in the root your of application with the
name API.
Inside that you can add a Web API controller.
You have successfully added a Web API controller to your application.
Now you can run the application and test it.
For testing I am passing http://localhost:32359/api/cardetails/1 for calling the method get.
Wow, it's working!
It's easy to configure it as aWeb API.
The ASP.Net MVC and ASP.Net Web API makes heavy use of convention for configuration to lighten the
work load for creating the services.
For example, add a decorating method with attributes to make it easy to do CRUD operations.
Else it will make it difficult to understand and code.
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
[HttpPut]
publicvoidPut(intid,[FromBody]stringvalue)
{
}
[HttpPost]
publicvoidPost([FromBody]stringvalue)
{
}
[HttpDelete]
publicvoidDelete(intid)
{
The HTTP actions and their corresponding CRUD operations are:
GET Read
Retrieves the representation of the resource.
PUTUpdate
Update an existing resource.
POST Create
Create new resource.
DELETE Delete
Delete an existing resource.
Now let's begin with how to create a CRUD operation with the WEB API.
Let's start by adding a Model.
To add the model rightclick on the model folder and add a class with the name CarsStock.
After adding the Model CarsStock.cs now let's start with adding properties to the class.
After adding the model properties now I will consume the HTTP service developed using the ASP.NET Web
API in a simple cshtml page with jQuery and Ajax.
For that in the View folder I will add a folder named Car and inside that folder will add a CarStock named
view. To add it just rightclick on the View folder and select View.
The following snapshot shows how I had added the view.
After adding the view you will get a blank view because we are not using any tightly coupled model here.
Then add a Controller with the name CarController. Call this view Carstock for the demo of consuming the
Web API.
In this I called the view CarStock.
After adding the Controller and View now let us move back towards the Web API and make some changes
that we have already created with the name CarDetailsController.
Let's get to the first method in CarDetailsController.
1. GET IEnumerable
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
[HttpGet]
publicIEnumerable<CarsStock>GetAllcarDetails()
{
CarsStockST=newCarsStock();
CarsStockST1=newCarsStock();
List<CarsStock>li=newList<CarsStock>();
ST.CarName="MarutiWaganor";
ST.CarPrice="4Lakh";
ST.CarModel="VXI";
ST.CarColor="Brown";
ST1.CarName="MarutiSwift";
ST1.CarPrice="5Lakh";
ST1.CarModel="VXI";
ST1.CarColor="RED";
li.Add(ST);
li.Add(ST1);
returnli;
}
This method is used to get a list of data.
In this method I have used the Model CarsStock and created a list of CarsStock List<CarsStock>.
And returning it.
2. GET by id
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
publicIEnumerable<CarsStock>Get(intid)
{
CarsStockST=newCarsStock();
CarsStockST1=newCarsStock();
List<CarsStock>li=newList<CarsStock>();
if(id==1)
{
ST.CarName="MarutiWaganor";
ST.CarPrice="4Lakh";
ST.CarModel="VXI";
ST.CarColor="Brown";
li.Add(ST);
}
else
{
ST1.CarName="MarutiSwift";
ST1.CarPrice="5Lakh";
ST1.CarModel="VXI";
ST1.CarColor="RED";
li.Add(ST1);
}
returnli;
}
In this GET method you can retrieve records for the database by passing an id.
3. POST
01.
02.
03.
04.
05.
[HttpPost]
publicvoidPostCar([FromBody]CarsStockcs)
{
In this POST method you can post data CREATE to the database. In this I am using the Carstock
model to post the data.
4. PUT
01.
02.
03.
04.
05.
[HttpPut]
publicvoidPutcar(intid,[FromBody]CarsStockcs)
{
In this PUT method you can UPDATE the data UPDATE to the database. I am using the Carstock
model to update the data.
5. DELETE
01.
02.
03.
04.
05.
[HttpDelete]
publicvoidDeletecar(intid)
{
In this DELETE method you can delete data DELETE from the database. I am using an id to delete the data.
Here is a snapshot of all the methods and models after adding the attributes to it.
Now let's move to the view and do CRUD operations from there.
For getting a list of data I have created a function in jQuery.
1. Calling GET IEnumerable List from Ajax and getting data from the Web API.
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
<scriptlang="ja"type="text/javascript">
functionAllcarDetails(){
$.ajax({
type:"GET",
url:"http://localhost:32359/api/Cardetails",//URI
dataType:"json",
success:function(data){
debugger;
vardatadatavalue=data;
varmyJsonObject=datavalue;
contentType:"application/json";
$.each(myJsonObject,function(i,mobj){
$("#Cartbl").append('<tr>
<tdwidth="50px">'+mobj.CarName+
'</td><tdwidth="50px">'+mobj.CarModel+
'</td><tdwidth="50px">'+mobj.CarPrice+
'</td>'+'</td><tdwidth="50px">'
+mobj.CarColor+'</td></tr>');
});
},
error:function(xhr){
alert(xhr.responseText);
}
});
2. Calling PostCar Method using Ajax and posting data to the Web API.
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
functionPostData()
{
varcardetails=
{
CarName:"Ertiga",
CarModel:"LXI",
CarPrice:"5000000",
CarColor:"blue"
};
$.ajax({
type:"POST",
data:JSON.stringify(cardetails),
url:"http://localhost:32359/api/Cardetails",
dataType:"json",
contentType:"application/json",
});
3. Calling the PUTcar method using Ajax and updating the data of the Web API.
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
functionPutData(){
varcardetails=
{
CarName:"Ertiga",
CarModel:"LXI",
CarPrice:"5000000",
CarColor:"blue"
};
vart=JSON.stringify(cardetails);
varid="0";
$.ajax({
url:'http://localhost:32359/api/Cardetails/'+id,
type:"put",
contentType:"application/json;charset=utf8",
data:t,
dataType:"json",
});
}
4. Calling the Delete car method using Ajax and to delete data of the Web API.
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
functiondeleteData1()
{
varid=0;
$.ajax({
url:'http://localhost:32359/api/CarDetails/'+id,
type:'DELETE',
success:function(data){
},
error:function(data){
alert('Problemindeletingcar:'+data.responseText);
}
});
}
5. Calling GET by ID from Ajax and getting data from the Web API by id.
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
functionGetCarById(){
varid=1;
$.ajax({
url:'http://localhost:32359/api/CarDetails/'+id,
type:'GET',
dataType:"json",
success:function(data){
vardatavalue=data;
varmyJsonObject=datavalue;
varCarModel=myJsonObject[0].CarModel;
varCarName=myJsonObject[0].CarName;
varCarColor=myJsonObject[0].CarColor;
varCarPrice=myJsonObject[0].CarPrice;
$('<tr><td>'+CarModel+'</td><td>'+CarName+
'</td><td>'+CarColor+'</td>'+'</td>
<td>'+CarPrice+'</td></tr>').appendTo('#Cartbl');
},
error:function(xhr){
alert(xhr.responseText);
}
});
}
After completing all the functions of Ajax I am now displaying the view CarStock.
In the carstock view I have just added 5 buttons and on the click event of every button a different function
of the Web API is called.
The following snippet is debugged in Firebug.
Final Output
Here in this view I have consumed a Web API for Demo.
I know that now all my web developer friends must have a basic understanding of what the Web API is.
Saineshwar Bageri
I am Software Developer and MVP from c-sharpcorner working on .Net Web Technology (
Asp.net , C# , Sqlserver , MVC , Windows ,Console Application, javascript , jquery , json ,
ORM Dapper) and also freelance ... Read more
Personal Blog:http://dotnet-sai.blogspot.in
Rank
112
1.3m
Readers
Bronze
Member
Time
RELATED ARTICLES
Implement ASP.Net Web API 2 in ASP.Net MVC
5
ASP.Net MVC 5 Web API Consuming at Client
Side
Create Read Operation in Web API Using MVC 4
Introducing ASP.Net Web API 2- Adding
Controller: Day 2
Difference Between MVC and Web API
Introduction To New Release Candidates For
MVC 5.1 and Web API 2.1
How ASP.Net Web API Works
Display Data in ASP.NET Web API MVC 4 View
Introducing ASP.Net Web API 2: Day 1
Create and Consume Web API in MVC 4
View Previous Comments >>
COMMENTS
10 of 15
Great work Saineshwar.
Nov 24, 2014
Dinesh Beniwal
5 12.8k 4.2m
Post Reply
Nice sai...
Nov 25, 2014
Pranit Dange
626 1 0
Post Reply
Congratz..Nice Article
Nov 25, 2014
Prashant Pande
621 6 0
Post Reply
Saineshwar Bageri sir can you explain how to consume services without ajax calls, might be i
mean to ask , call PUT,POST,DELETE services in MVC controller.
Nov 27, 2014
Rajeev Ranjan
142 1.2k 295.2k
Post Reply
Nicely explained about Web API.
Dec 02, 2014
Pradip Pandey
239 633 232.4k
Post Reply
Nice Article...
Dec 11, 2014
Anjani Pandey
625 2 0
Post Reply
Great work...
Dec 18, 2014
Humayun Kabir Mamun
470 158 0
Post Reply
Congratulations Sai, one more articles of the day on ASP.NET
Jan 14, 2015
Dinesh Beniwal
5 12.8k 4.2m
Post Reply
thanks Dinesh Beniwal sir once again on Asp.net
Jan 14, 2015
Saineshwar Bageri
112 1.5k 1.3m
Post Reply
Great ...... Congrates :)
Jan 14, 2015
Anjani Pandey
625 2 0
Type your comment here and press Enter Key....
COMMENT USING
Post Reply
MVPs
MOST VIEWED
PHOTOS
CONTACT US
LEGENDS
NOW
PRIZES
CODE SNIPPETS
CONSULTING
PRIVACY POLICY
TERMS & CONDITIONS
REVIEWS
TRAINING
SITEMAP
SURVEY
CERTIFICATIONS
STUDENTS
Hosted By CBeyond Cloud Services
DOWNLOADS
MEMBERS
MEDIA KIT
ABOUT US
LINKS
IDEAS
REPORT ABUSE
2015 C# Corner. All contents are copyright of their authors.
