Introducing ASP.Net Web API 2- Adding Controller: Day 2

Introduction

I have started an article series. The first part Introducing ASP.NET Web API 2 provided a basic introduction to ASP.NET Web API 2 and how to add an ADO.NET Entity Data Model to work with the model.

In this article, we'll learn to add a controller using the Web API 2 Empty Controller and call the controller using jQuery. So, follow the sections described below:

Adding Web API 2 Controller
Working with Controller
Adding Web Form
Calling Web API using jQuery

Adding Web API 2 Controller

So far we have added a model, therefore now we need to have a controller to communicate with the model. We will add the Web API 2 controller here. So, just use the following procedure.

Step 1: In the Solution Explorer, right-click on the Controllers folder and go to Add and select the Controller.

Adding Controller in Application

Step 2: In the next Add Scaffold wizard, select the Web API from the left pane and choose the Web API 2 Controller- Empty from the right pane. Click on Add.

Adding Web API 2 Empty Controller

Step 3: Now specify the controller name in the Add Controller wizard and click on Add.

Specifying Controller Name

That's it. Now in the next section we'll work on this controller.

Working with Controller

In this section, we'll work with the controller and perform some methodology to communicate with the model. Just use the following procedure.

Step 1: Now you have an empty controller with the following code:

using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Net;  
using System.Net.Http;  
using System.Web.Http;  
   
namespace StudentApiApp.Controllers  
{  
    public class StudentsController : ApiController  
    {  
    }  
}

You can see that this is an empty controller.

Step 2: Now replace the code with the following code:

using StudentApiApp.Models;  
using System.Collections.Generic;  
using System.Web.Http;  
   
namespace StudentApiApp.Controllers  
{  
    public class StudentsController : ApiController  
    {  
        Student[] db = new Student[]  
        {  
            new Student { ID = 1, Name = "Ashish", Sex = "Male", City = "New Delhi"},  
            new Student { ID = 2, Name = "Nimit", Sex = "Male", City = "Noida"},  
            new Student { ID = 3, Name = "Prawah", Sex = "Male", City = "Dehradun"},  
            new Student { ID = 4, Name = "Sumit", Sex = "Male", City = "Nainital"},  
        };  
   
        public IEnumerable<Student> GetStudentRecords()  
        {  
            return db;  
        }          
    }  
}

In the code above, I have inserted some records into the Student entity manually. I have also created a GetStudentRecord() method to fetch all the student records and return them as an IEnumerable<Student> type.

So, now you have created a Web API to get all the records of the Student entity. To access the controller method named GetStudentRecord() there is a URI. The URI for this method is /api/students.

Step 3: Now run the application and for showing all the records, pass the URL in the browser as follows:

http://localhost:1234/api/students

If you run the application in the Chrome then you will get the data as an XML form as in the following:

Calling Api Controller Method in Browser

And if you run the application in Firefox, you'll get the data in a simple format as in the following:

Calling Api Controller Method in Firefox

We have successfully run the API Controller method using the URL in the browser.

Adding Web Form

In this section, we'll add the web form and create the structure to call the API controller method. Use the procedure below.

Step 1: In the Solution Explorer, right-click on the application and go to Add and click on the Web Form.

Adding Web Form in the Application

Step 2: Design the web form as in the following code:

<!DOCTYPE html>  
   
<html xmlns="http://www.w3.org/1999/xhtml">  
<head runat="server">  
    <title></title>  
</head>  
<body>  
    <form id="form1" runat="server">  
        <div>  
            <table id="studata">  
                <tr>  
                    <th>Student Name</th>  
                    <th>Student City</th>  
                </tr>  
            </table>  
        </div>  
    </form>  
</body>  
</html>

In the code above, I created a table in which I want to show the total Student Name and their City.

Calling Web API using jQuery

In this section, we'll call the Web API using jQuery.

Step 1: Add a reference of the jQuery file or you can copy and paste it into the application.

Step 2: Update the code with the following code:

<!DOCTYPE html>  
   
<html xmlns="http://www.w3.org/1999/xhtml">  
<head runat="server">  
    <title>Student Application</title>  
    <script src="jquery-1.10.2.min.js"></script>  
    <script>  
        var url = 'api/students';  
        $(document).ready(function () {  
            debugger;  
            $.getJSON(url)  
            .success(function (data) {  
                $.each(data, function (key, itemData) {  
                    $('#studata').append('<tr><td>' + itemData.Name + '</td>'+'<td>'+ itemData.City+'</td></tr>');  
                });  
            });  
        });          
    </script>  
</head>  
<body>  
    <form id="form1" runat="server">  
        <div>  
            <table id="studata">  
                <tr>  
                    <th>Student Name</th>  
                    <th>Student City</th>  
                </tr>  
            </table>  
        </div>  
    </form>  
</body>  
</html>

In the code above, I have the jQuery code in which the URL is defined and passed in the getJSON() method and then using each() we can get the data from the URL and append it to the table format.

Step 3: Run the web form in the browser and you can see the data as in the following:

Calling Api Controller using jQuery

Summary

This article described how to create an empty ASP.NET Web API 2 Controller and by using jQuery we can call the Web API in the Web form. In the next article, we'll perform some more methodology to work with the Web API. Thanks for reading.