Call Web Api from Javascript

This short article shows you the missing part of the complete sample of Getting Started with ASP.NET Web API 2.

When I was searching for how to call Web API on Google the below link was returned.

When I look the page I was kind of happy that I can download the Completed Project by clicking the Download Completed Project button.


It brought me to the following link when I click on the Download Completed Project.

I downloaded the project and everything is good except. You need to continue from the section Calling the Web API with Javascript and jQuery in the tutorial link above.

Create the index.html then paste in the code. The sample is now completed.

<!DOCTYPE html>

<html xmlns=””&gt;


    <title>Product App</title>





        <h2>All Products</h2>

        <ul id=”products” />



        <h2>Search by ID</h2>

        <input type=”text” id=”prodId” size=”5″ />

        <input type=”button” value=”Search” onclick=”find(); />

        <p id=”product” />



    <script src=””></script>


    var uri = ‘api/products’;


    $(document).ready(function () {

      // Send an AJAX request


          .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($(‘#products’));





    function formatItem(item) {

      return item.Name + ‘: $’ + item.Price;



    function find() {

      var id = $(‘#prodId’).val();

      $.getJSON(uri + ‘/’ + id)

          .done(function (data) {



          .fail(function (jqXHR, textStatus, err) {

            $(‘#product’).text(‘Error: ‘ + err);







About chanmingman

Since March 2011 Microsoft Live Spaces migrated to Wordpress ( till now, I have is over 1 million viewers. This blog is about more than 50% telling you how to resolve error messages, especial for Microsoft products. The blog also has a lot of guidance teaching you how to get stated certain Microsoft technologies. The blog also uses as a help to keep my memory. The blog is never meant to give people consulting services or silver bullet solutions. It is a contribution to the community. Thanks for your support over the years. Ming Man is Microsoft MVP since year 2006. He is a software development manager for a multinational company. With 25 years of experience in the IT field, he has developed system using Clipper, COBOL, VB5, VB6, VB.NET, Java and C #. He has been using Visual Studio (.NET) since the Beta back in year 2000. He and the team have developed many projects using .NET platform such as SCM, and HR based applications. He is familiar with the N-Tier design of business application and is also an expert with database experience in MS SQL, Oracle and AS 400.
This entry was posted in Uncategorized and tagged , , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.