Create AJAX Call in ASP.Net Web API

Introduction

In this article we will use the Ajax calls and HttpRequests to the domains to create an AJAX request that would be considered cross-domain between these two applications. First we will create a simple action in the Web API controller "Values Controller". And the second process is to create a view that will perform an AJAX call to this project and retrieve the message from the controller.

Now let's create an application:

Create a Web API application:
- Start Visual Studio 2013.
- From the Start window select "New Project" .
- Select "Installed" -> "Template" -> "Visual Studio 2012" and then select "ASP.NET MVC4 Web Application".
- Click on the "OK" button.
- From the MVC4 project window select "Web API".
No we add a action in the "ValuesController". This file exists in the Controller Folder that exists in the Solution Explorer. Select this class and write this code of line.
1. public class ValuesController : ApiController
2. {
3. // GET api/values
4. public string Get()
5. {
6. return "Can you Read This Example?";
7. }
8. }

Now we create a View in which we create an AJAX call. This file exists in the Home Folder.
1. <html>
2. <head runat="server">
3. <meta name="viewport" content="width=device-width" />
4. <title>Ground Control</title>
5. 
6. <script src="@Url.Content("~/Scripts/jquery-1.8.2.js")"></script>
7. 
8. <script type="text/javascript">
9. //When the page loads
10. $(function () {
11. //Fire this AJAX call
12. $.ajax({
13. url: "http://localhost:3035/api/values",
14. type: "GET",
15. success: function (data) {
16. alert(data);
17. },
18. error: function (event) {
19. //If any errors occurred - detail them here
20. alert("Operation Failes(Error generated)");
21. }
22. });
23. });
24. </script>
25. </head>
26. <body>
27. </body>
28. </html>

In the code above we defined the port "3035", we can easily set it through the project property depending on your choice.

In the Solution Explorer.
Right-click on the project and select "properties".
In the property window select the the "Web" and the in the project URL set the desired URL.
Now click on the "Override application root URL" and paste the preceding URL and click on the "create virtual directory" button.
Now execute the application. When the page loads it retrieves the message and displays it in the alert box.

Create AJAX Call in ASP.Net Web API

Reactions

Comments