Best resource for Online free Education
In this article, I am going to discuss how to Consuming Web API Service From jQuery. We are going to work with the same example that we created in our previous article where we discussed Parameter Binding in WEB API. So please read our previous article before proceeding with this article.
Business Requirements:
When we click on the “Get All Employees†button, then we need to retrieve all the employees information and then display this information in an unordered list as shown in the image below. When we click on the “Clear†button then we need to clear the employees from the unordered list.
Lets discuss how to consuming ASP.NET Web API Service From jQuery
Modify the Employee Controller of our project as shown below where we create one action which will return the list of employees.
Then modify the WebApiConfig class which is present in the inside App_Start folder as shown below. Here we are changing the URI pattern to allow action name as part of the URL.
Lets add one Html Page to our project with the name HtmlPage1.html
Right-click on the project and then select Add => Html page as shown below
In the next pop up specify the name for the HTML page and then click on the Ok button as shown in the image below
Once you created the page then copy and paste the following code in it.
Thats it; now run the application and navigate to the following URL in the browser
http://localhost:xxxxx/htmlpage1.html (instead of xxxxx you need to provide the port number where your application is running). It will display the following page.
Once you click on Get All Employees button it will display the employees data as unordered list as shown below on the below page.
In this example, both the client (i.e. the HTML page that contains the AJAX code) and the ASP.NET Web API service are present in the same project so it worked without any problem. But, if they are present in different projects then this wouldnt work.
