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 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 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 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 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
Tidak ada komentar:
Posting Komentar