Learn ASP.NET Web API 2(Call WEB API with Java script and Jquery) Part 2

Rama Sagar
Posted by in ASP.NET Web API category on for Beginner level | Points: 250 | Views : 8865 red flag
Rating: 5 out of 5  
 1 vote(s)

Nowadays there are broad range of clients like browsers, mobiles, iPhone and tablets using HTTP services. These HTTP services can be built by a Asp.net Web API framework…It contains MVC features like routing, controllers, action, results, filter but it is not a MVC Framework. It is a part of the core ASP.NET platform and can be used with MVC and other types of Web applications like ASP.NET Web Forms. It can also be used as a stand-alone Web services application

Introduction

In this article we will see the walk through of how to call the Web API with JavasScript and jQuery

Objective


In this context, we'll add an HTML page that uses AJAX to call the web API. We'll use jQuery to make the AJAX calls and also to update the page with the results.

Before we proceed have a look at How to create a web API as this was the continuation of it. 

Now lets create a UI by adding a HTML page right-click the project and select Add, then select New Item.




In the Add New Item dialog, select the Web node under Visual C#, and then select the HTML Page item. Name the page "index.html".




 Add below HTML to the page

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Students Application</title>
</head>
<body>

    <div>
        <h2>Students</h2>
        <ul id="Students" />
    </div>
    <div>
        <h2>Search by Student ID</h2>
        <input type="text" id="StutId" size="5" />
        <input type="button" value="Search" onclick="find();" />
        <p id="student" />
    </div>

    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>
    <script>
        var uri = 'api/Students';

        $(document).ready(function () {
            // Send an AJAX request
          //  Here to get a list of Students, we are sending an HTTP GET request to "/api/students".
            $.getJSON(uri)
                .done(function (data) {
                    // On success, 'data' contains a list of products.
                    $.each(data, function (key, item) {
                        // Add a list item for the product.
                        $('<li>', { text: formatItem(item) }).appendTo($('#Students'));
                    });
                });
        });

        function formatItem(item) {
            return item.Name + ': Marks'+" "+ item.Marks;
        }
       // To get a student by ID, send an HTTP GET  request to "/api/Students/id", where id is the student ID.
        function find() {
            var id = $('#StutId').val();
            $.getJSON(uri + '/' + id)
                .done(function (data) {
                    $('#student').text(formatItem(data));
                })
                .fail(function (jqXHR, textStatus, err) {
                    $('#student').text('Error: ' + err);
                });
        }
    </script>
</body>
</html>
getJSON function sends an AJAX request. For response contains array of JSON objects. The done function specifies a callback that is called if the request succeeds. In the callback, we update the DOM with the student information.


Now lets debug the Application and test


  Lets search by ID 4
  
   

Conclusion

In this article we have learned how to call web API through JavaScript and jQuery.

Reference

http://msdn.microsoft.com/en-us/library/hh833994(v=vs.108).aspx

Page copy protected against web site content infringement by Copyscape

About the Author

Rama Sagar
Full Name: RamaSagar Pulidindi
Member Level: Silver
Member Status: Member,MVP
Member Since: 12/30/2012 1:51:40 AM
Country: India
ramasagar
http://www.ramasagar.com
A Software Profesional working in Microsoft .NET technologies since year 2008, and I work for Dake ACE. I am passionate about .NET technology and love to contribute to the .NET community at Dot Net Funda

Login to vote for this post.

Comments or Responses

Posted by: Sheonarayan on: 11/16/2013 | Points: 25
Awesome Rama. Great post.

5 from me.

Login to post response

Comment using Facebook(Author doesn't get notification)