Subtitles section Play video
In this video we will create a sample
ASP.NET Web API application and consume them using different types of a clients
For that first click on file new project
Select ASP.NET MVC 4 Web Application
Put a nice name
My
First
Web API
and say okay
And here is the ASP.NET MVC code project dialogue box
Select Web API and say okay
So here it is what we have Web API Project Template includes
a sample Web API called values with it.
If you are a ASP.NET MVC developer then you may find
lot's of features in Web API as similar to MVC
They are not exactly same
but
as a ASP.NET developer you can definitely views your knowledge here
but if you are not a ASP.NET MVC developer then
this things are going to be new for you
but it's not going to be difficult for you
Let's look at the some common features
In MVC we have something called as MVC controller
Whereas in Web API we have something called as API controller
The difference between these two controllers are
In API controller action methods are actually HTTP methods like Get, post,Put and Delete
Even we can overload these methods if required
We look into this method in details shortly but before that let's discuss about one more features i.e. Routes
Let's take a look at MVC default routes and try to understand how MVC request work
For that expand this app_start folder
We have route config.cs file here
open it
here it is MVC default routes
When request comes to MVC
it takes the URL and parses the first three segments of the URL
and the first segment is contoller
It find the class with this name
then we have action and it literally find the method inside this controller with this name
and we also have default or optional id parameter here
just like this in Web API
we have default Web API Routes
Just to keep it separate from MVC routes
Web API routes are prefix with the word API
we can change this name to anything like Invoice API,Customer API or may be facebook API
as per our requirement
then we have controller and we have optional id parameter
The beauty here is we don't have actions here
the reason behind that is action are actually HTTP methods
and depending on the type of client request for example
if it's a get request then get methods get called if it's a post request then post methods get called and so on
Let me close these both the files and move toward controller
What I will do is
I will put a break point here and exit to the application
okay
Now as per the route config I have to put API has prefix here and my controller name is values controller
So values and press enter
oh great breakpoint is here
If I press F5
I get the XML representation of my string array is it that simple
So let's look at the same request using Fiddler
For the those who don't know what is Fiddler is
Fiddler is a Web Debugging Tool which locks all HTTP traffic between our computer and the internet
it also let us make request and also let us modify the HTTP address as per our convenience
You can pause the video and copy the URL and download the fiddler to your computer
okay let me open fiddler
what I will do is
click on this composer tab
and we'll make a new get request to our Web API and click on a execute okay we get success message
Now let's look at the output we got
when we click on the raw what we can see here is
We are getting JSON representation of our string data
If you remember when we made the request using chrome we got XML representation where as in case of fiddler we are getting it as JSON
The reason behind that is we have something called as accept
Accept is a feeding HTTP header
It specify what kind of response a client can accept
Default
what we say
default accept value for chrome is XML whereas for fiddler it is
JSON
but
but in fiddler we can change that like this
Accept:application/acceptXML and say execute
okay we got a success
now if I click on raw what i can see
I am getting a XML representation of my string variable
If I click on compose
and change this XML back to JSON and click on execute what I can see I am again getting the JSON
This thing
this term is called as or this concept is called as content negotiation
depends on the client request server is returning the format
When client say I want XML it gives XML
When client say JSON it gives JSON
Even if we want we can written our own custom format like visiting card anything or image it may be anything
depends on the clients
depends on our requirement we can change the accept value and client
and if it is supported in the server it will return the same format
Now let's try to create something more interesting
First of all in this video we only talk about get method
we will try to cover post put and delete method in further coming videos
So let me remove this
okay
and let's create a small class called customer inside our model
And let's create two properties inside this
First one is int property called customer id
let make it i capital okay and let's create a second property a string property called customer name that's simple
Next we will move back to our controller i.e value controller
and just instead of returning this string what we will do is we will say he will written customer
say import
okay
and here I will say customer okay fine now I will say if i==1 than return
new customer customer id =1, customer name sukesh marla else
else
if i ==2 then return oh what happen oh sorry
its id
okay if i==2 then return new customer
customer id=2, customer name=new customer fine
okay or else I will return null okay simple
and again what we will do is
here we will write something like this new list of customer
here i will say this enter
and this okay
we are ready with our controller
we just created two get methods inside it
one returning list and second returning a single customer
now lets consume this web API
we will consume this Web API first using google chrome second using fiddler and third we will write JQuery and try to consume the same
So let's start with google chrome
what we will do is we will just run this application
okay
okay it's there
say /API/value okay we got it
we got the XML representation our list of customer
This is because entering a url and pressing enter
that mean we are actually making get request to our Web API
let me put break point here and run it again okay
see break point is getting hit here
when I say continue I am getting the XML okay
Now let me try with an another get method over loaded get method
okay where ever i put 1
I am getting Sukesh Marla in return
let me put breakpoint there
and let me try with second parameter say 2
I will press enter
okay it's there
say F10 okay
Id is not matching now id is matching we are getting new customer return okay that's it
We got the new customer here
If I parse something else other than 1 and 2
then I ma getting okay id is not matching again id is not matching I am getting null
okay we are getting nothing
that's it
It is that simple
we just consumed our Web API using google chrome
Now we will try the same using fiddler
for that let me launch fiddler once again
Fiddler is here let click on composer and let make a get request to our Web API
here is the Web API
and we got JSON representation of our list of customer now
If we change the except we did earlier
to application/xml and say execute
and if we check the result
here it is
we got the xml representation
Similarly we can make request to our another customer
another get method
and
output is here
in xml format
you can see we have sukesh marla is here
If you change the except I to JSON back
then we will get the result in JSON format
So it's that simple
we can use fiddler for the testing purpose
because we can test it for various format and all
Now the final demonstration where we will try to consume or Web API using JQuery
For that we have a small Web Application
called Web API test with us
with a simple button and a JQuery support
Here we have Jquery or Javascript Handller for the button and
our task is to write a code which will consume the Web API and display the result
So let's start coding
In Jquery we have something called as $.ajax which we can use to consume Web API
it has parameters
like url which will accept
which will take the Web API url
then we have type which will tell which kind of
Which method we are going to invoke
like get post or something else
next it has data type
what kind of format we are expecting in return
we expecting JSON for now
next we have a call back method called success
which get called when the result is return from web API
it has a parameter called data
Now let's start with
Okay what we will do is
we will put a alert and say data.customername
Now let's put a break point in our Web API
here and let's run this application
Now you notice as soon as if we click on this button we are getting break point here
If you notice the value of id is now 1
so definitely we are going to get this customer in return when I say F5 I am getting in alert sukesh marla which is because of
this code block
Similarly if we try to consume
previous get method which is going to return
list of customer then definitely we are suppose to make a loop on customers
we can do it like this
data, it has a function called as function key, customer then
what we have to do is we have to say alert
one we have customer.customer name then nothing that's it
Now if I press Ctrl F5 here
and try to click this button
I am getting sukesh marla and new customer as well
So here we finish our simple demonstration of how to create and consume ASP.NET Web API
hope you enjoyed
if you have any query you can write to us and we try to reply with the best possible way we can
Thank You