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:

  1. 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".

      • Select MVC4 Application

    • Click on the "OK" button.

      • Select Web API

    • From the MVC4 project window select "Web API".
  2. 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.
    API Controller
    1. public class ValuesController : ApiController
    2. {
    3. // GET api/values
    4. public string Get()
    5. {
    6. return "Can you Read This Example?";
    7. }
    8. }
  1. Now we create a View in which we create an AJAX call. This file exists in the Home Folder.

    Index View
    1. <html>
    2. <head runat="server">
    3. <meta name="viewport" content="width=device-width" />
    4. <title>Ground Control</title>
    5. <!-- jQuery Reference to handle AJAX call -->
    6. <script src="@Url.Content("~/Scripts/jquery-1.8.2.js")"></script>
    7. <!-- Our script to actually fire the call itself -->
    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.