In this post, you can learn about how to use WebApi with MVC and jquery. I have defined , , and methods using class to use it in jquery at client side and MVC controller.
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.
We already know about WCF services and web services that both are soap based services and they use HTTP as the transport level protocol. That means they use HTTP protocol just to tunnel the soap messages across the internet. But all clients are not handled to suitable the soap messages. SOAP messages are internally XML and handling XML which might be complicated for some clients. And the best example non soap based client is JQUERY. Now to overcome this problem we introduced WCF rest services. If you are conversant with REST, please go through WCF REST services site and first learn it there.
REST is an architectural style which says to use the existing features of the web in a more efficient and simpler way. If you want to know about the features and to learn them, those are HTTP verbs like , , and . In REST, every stuff is unique to identify, not always in XML for communication you can pass XML, JSON so on. Use this feature for this we are calling HTTP rest service.
For use of WCF rest service, it requires lots of configuration settings which is a bit complicated. The main intention behind services is building service oriented architecture not to support REST. Now Microsoft simplified this and finally it came with the solution, created part of ASP.NET called ASP.NET Web API. It is part of ASP.NET technology for creating REST services.
MVC with API:
With MVC 4 application with selection of Web API Template, this includes a sample web API call . Here you will find lots of features which are the same as MVC. It means not exactly the same but its code patterns are similar. If you are not an MVC developer, these things may be difficult for you; otherwise it's very easy to understand.
Let's discuss something about this. In MVC, there is an added MVC Controller whereas in web API, there is an added API controller. In API controller, action methods are HTTP verbs like , , and even we can overload this methods.
Let's discuss about another feature - that's file:
Let's discuss about MVC Routes how MVC is implemented with Web API. You will get folder and open it. When request comes to MVC, it takes the URL and passes through its three segments. The first name is controller, it finds controller by its name. Next is action then it finds the methods with this name. And also, we have default id with option . Just like this, we have file:
Just like this in default name is . Just to keep separate with MVC routes web API routes template defined first is API. We can change it to , so on as per our requirement. Next is controller and id option . The main thing is that it doesn't have action here; we only have HTTP methods depending on client requirements. If it is a request, the method will call and request, then method will call and so on.
Let's create a class inside folder.
As per the API, my API controller name is Values on top of the picture. I have changed instead of returning changed to list.
I have commented the default return values. I have also added where I have defined it in class. When you will run the application, browse through the you will get data with XML in chrome browser. You can get JSON representation of data from request of method. For this, I have designed it in page. This is just as content negotiation. Depending on the client request, it returns the data. When client says XML, it returns XML and JSON even say we return our own custom format like visiting card, class or anything.
In this above code, I have collected JSON data by the code of JSON format and designed it to our HTML page. One of the things we can show as MVC format by the call of Web API get method where you will get complete information to view the downloaded project. if you will run in chrome browser then get to see like below image. It will return HTTP XML values.
Call the Post Method of Web API:
Now, we will write a code which will consume the web API by the way of JQuery and MVC. Now I am writing a post method in Web API to insert data.
Now our main purpose to use Web API in client side using MVC. For this, I have added a script in MVC using jquery link. You will get to see to post data using JQuery with MVC. For this, I have coded it into . You will get to see below: