5 simple steps for using Web API with ASP.NET Web Forms Application

By | May 12, 2014

I have seen this question more than once while going through different ASP.NET web forums that “Is it possible to use Web API with ASP.NET Web Forms Application?” Simple answer to the question is “YES, we can“.

Let’s discuss about it in more details. As we already know that Microsoft released ASP.NET MVC 4 with lots of new and exciting features including ASP.NET Web API which is basically a framework for building HTTP services that reaches broader range of clients including browsers as well as mobile devices. But it’s flexible enough to be used with ASP.NET Web Forms applications. In this ASP.NET Tutorial, we are using a step by step approach for using Web API with ASP.NET Web Forms. For a good comparison of features released in each version of ASP.NET MVC, click here.I have already implemented an HTTP service using ASP.NET Web API in one of my previous post that you can refer here. Adding a Model and a Controller is same but the difference is that we are adding it to ASP.NET Web Forms Application. So, let follow the steps as below:

  1. Create a New Web Forms Application.
  2. Add Model to Web Forms Application.
  3. Add Controller to Application.
  4. Add Routing Info to Global.asax.
  5. Making a Client Call.
For the purpose of implementation, I am using Visual Studio Express 2013 for Web here.

1. Create a New Web Forms Application

  • Open Visual Studio and create “New Project” i.e. File -> New Project.
  • Choose “ASP.NET Web Application” template and name project as “WebAPIwithWebForms”.
  • When you click “OK” button, a new window will appear for selecting a sub-template.
    Note: You may not get window for sub-template in older versions of Visual Studio.
  • Choose “Web Forms” and click “OK”.
Using Web API with Web Forms
  • An ASP.NET Web Forms template project is created.

2. Add Model

Now we need to add a new class that acts as a Model in our application as follows:
ASP.NET Web API Model
Web API Model
Following is the code for Student Model
    public class Student
    {
        public int StudentID { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
    }

3. Add Controller class

Controller class has special importance because request coming from client reaches the controller first. Then the controller decides which model to use in order to serve the incoming request.
Right click on the project and choose “Web API Controller” under “Add” from the context menu as shown in figure.
ASP.NET Web API Controller
Web API Controller
Name the controller as “StudentsController” and press “OK” button.
For the purpose of simplicity, I’ll load the model with data inside our “StudentsController” instead of loading directly from database. Following is the code for StudentsController inheriting from ApiController class.
public class StudentsController : ApiController
{
        Student[] students = new Student[]
         {
             new Student { StudentID = 1, FirstName = “Imran”, LastName = “Ghani” },
             new Student { StudentID = 2, FirstName = “Salman”, LastName = “Ahmad” },
             new Student { StudentID = 3, FirstName = “Rehan”, LastName = “Ahmad” },
             new Student { StudentID = 4, FirstName = “Zeeshan”, LastName = “Khalid” }
         };
        public IEnumerable<Student> GetStudents()
        {
            return students;
        }
}

4. Add Routing Info to Global.asax

In order to route incoming request directly to our StudentsController, we need to add Route Information to Application_Start method of Global.asax as given below:
RouteTable.Routes.MapHttpRoute(
          name: “DefaultApi”,
          routeTemplate: “api/{controller}/{id}”,
          defaults: new { id = System.Web.Http.RouteParameter.Optional }
);

Now, if you run your application and try to access the following URL, you will get a JSON response of student data from api controller. Try to access the following URL and see:

             http://localhost:xxxx/api/Students

Note: Don’t forget to add “using System.Web.Http” in Global.asax.cs file.

You are designing an ASP.NET Web API application. You need to select an HTTP verb to allow blog administrators to moderate a comment. Which HTTP verb should you use?

  • A. GET
  • B. POST
  • C. DELETE
  • D. PUT

To further test your ASP.NET Web API skill, Take a Complete FREE Online Test or MCSD Practice Exam: 70-486 (Developing ASP.NET MVC Web Applications). Simply Click Here.

 Correct Answer: D

5. Make a Client Call

As you have already see above your ASP.NET Web API returning data in JSON format. Now, let’s call it from your Web Form using jQuery and display it on your Web Form page.
Create a new Web Form page “WebFormClient” and add the following code to call your ASP.NET Web API Controller i.e. “StudentsController” using jQuery.Main content area will contain the following HTML for rendering Students data.

<table border=’1′ id=”students”>
       <!– Make a Header Row –>
       <tr>
            <td><b>StudentID</b></td>
            <td><b>FirstName</b></td>
            <td><b>LastName</b></td>
        </tr>
</table>

using jQuery, make a call to our controller and fetch data as follows:
// GET ALL

function GetAllStudents()
{
           $.ajax({
                       type: “GET”,
                       url: “http://localhost:xxxx/api/Students/”,
                       contentType: “json”,
                       dataType: “json”,
                       success: function (data) {
                                  $.each(data, function (key, value) {
                                  //stringify
                                  var jsonData = JSON.stringify(value);
                                 //Parse JSON
                                 var objData = $.parseJSON(jsonData);
                                 var id = objData.StudentId;
                                 var fname = objData.FirstName;
                                 var lname = objData.LastName;                                $(‘<tr><td>’ + id + ‘</td><td>’ + fname +
                                       ‘</td><td>’ + lname + ‘</td></tr>’).appendTo(‘#students’);                       });
             },
             error: function (xhr) {
                         alert(xhr.responseText);
            }
     });
}


Hopefully, above step by step approach will be helpful in building Web API with ASP.NET Web Forms Application.

Other Related Web Development Articles:

Top 10 Interview Questions and Answers Series:

Latest Developers Jobs

Top ASP.NET MVC Jobs

C# Senior Developer
Source: Indeed
Details: *Skill Set* C# Senior Developer *Work Location* Charlotte, NC, USA *Job Description* ­Tech requirements: 5+ years of experience in .NET application...  More
3 days ago

Charlotte, NC 22-June-2016

C# with Dotnet / WCF Senior Developer
Source: Cognizant
Details: ASP.Net Web API, Razor, MVC. Core C#, .Net 4.5+, Very Strong Object Oriented Programming skills, WCF, REST services, ASP.Net 4.5+....  More
5 days ago

Hartford, CT 21-June-2016

Sr. Software Engineer / Web Developer (.Net)
Source: Indeed
Details: Seeking a Senior .NET Software Engineer / Web Developer to work as part of a team for a U.S. Government project. Looking for a candidate able to take on any  More
5 days ago

Alexandria, VA 22315 20-June-2016

Programmer
Source: Indeed
Details: The ideal candidate for this position must have 3 years program experience using C#, ASP.NET MVC, or Angular.JS....  More
4 days ago

Overland Park, KS 22-June-2016

.NET Programmer/Analyst
Source: Indeed
Details: *Title: * .NET Programmer/Analyst *Location: * San Juan, PR *Phone: * 1-787-729-7597 www.thecervantesgroup.com *Role Description: * Developer for full time...  More
5 days ago

San Juan, PR 00908 21-June-2016

Programmer Analyst I
Source: Concord Group Insurance
Details: Web/Windows services, ASP.Net MVC, HTML5, CSS, and JavaScript. Since 1928 The Concord Group Insurance Company has been protecting the interests of residents and...  More
5 days ago

Concord, NH 03301 21-June-2016

Programmer/Analyst
Source: ConnectPrep
Details: Have experience with a modern MVC framework, such as ASP .NET MVC, Ruby on Rails, Node.js. A Little About Us:....  More
5 days ago

Remote 20-June-2016

.NET Software Systems Developer
Source: Visionary Integration Professionals
Details: Working knowledge with ASP.NET MVC framework. Working experience in C# preferably using ASP.NET, ASP.NET, MVC, and/or ASP.NET Web API....  More
30+ days ago

Anniston, AL 36205 06-April-2016

Software Developer .NET – Fellowship One
Source: Ministry Brands
Details: ABOUT MINISTRY BRANDS We are the leading Software-as-a-Service (“SaaS”) platform for Faith-Based Organizations (“FBOs”). We are the only comprehensive End-To...  More
10 days ago

Addison, TX 75001 15-June-2016

Lead Application Developer
Source: Indeed
Details: MVC:. Have the ability to develop with C#, ASP.NET, MVC. Des Moines, IA, 50319*....  More
3 days ago

Des Moines, IA 50319 23-June-2016

Web Programmer
Source: Trident Technical Solutions, LLC
Details: Web Programmer Location: Hillard, Ohio Length: 6 months to 1 Year Req#: 36401 Web Programming Position Design, develop, and implement .NET web based...  More
8 days ago

Ohio 18-June-2016

C# Developer
Source: Wicresoft Co., Ltd.
Details: C#, ASP.NET MVC. We are seeking someong to join our Finance Operation team....  More
19 days ago

Redmond, WA 07-June-2016

C# .Net Software Developer
Source: Willis Towers Watson
Details: Systems programming using Visual Studio, C#, MS SQL Server, ASP.NET, MVC, JavaScript, and jQuery. 2 - 5 years development experience in MS SQL Server / Transact...  More
15 days ago

Minneapolis, MN 11-June-2016

ASP.NET Commerce Developer III (Lead)
Source: Indeed
Details: Working under minimal supervision, the ASP. NET Commerce Developer III Architect / Lead creates technical solutions for multiple, concurrent client projects...  More
5 days ago

El Segundo, CA 20-June-2016

C# .Net Software Developer
Source: Willis Towers Watson
Details: Systems programming using Visual Studio, C#, MS SQL Server, ASP.NET, MVC, JavaScript, and jQuery. 2 - 5 years development experience in MS SQL Server / Transact...  More
3 days ago

Ann Arbor, MI 23-June-2016

.NET Software Developer (full-stack)
Source: Vsolvit LLC
Details: Be a part of an Agile team creating well designed, tested, and documented code in ASP.NET MVC ( moving to C# using the latest Microsoft technologies including:....  More
17 days ago

Ventura, CA 93003 09-June-2016

Web Developer
Source: Microsoft
Details: Full Stack Web Developer The Microsoft.com team is seeking a full stack web developer with a focus on front-end and user experience development. If this is...  More
9 days ago

Redmond, WA 98052 16-June-2016

.Net Software Developer
Source: Corporation Service Company
Details: C#, .NET 4.5/4.0, ASP.NET MVC, LINQ, WCF, JQuery, JavaScript, CSS, AJAX. Dying to work with cutting edge Microsoft technology tools, like C#, .NET 4.5, ASP.NET...  More
18 days ago

Deerfield, IL 07-June-2016

Net Programmer
Source: Indeed
Details: ASP .NET MVC 3.0 or higher and C#. ASP .NET 3.5. Assist in development of a new ASP.NET MVC 4 application with Entity Framework 4 Codefirst, C#, JQuery....  More
15 days ago

Chester, VA 10-June-2016

Web Developer/Code Poet (C#, AspMvc, Polymer)
Source: Indeed
Details: Junior to Intermediate C#, ASP.net, MVC, SQL Server and a desire to learn. We are a progressive startup software company in Irving, TX looking for C# / ASP.MVC...  More
1 day ago

Irving, TX 24-June-2016

Lead Web Developer
Source: Indeed
Details: Proficient in ASP.NET MVC. Knowledgeable on a variety of concepts, practices, and procedures within the web development field (i.e., .NET, ASP.NET, MVC, C#, SQL...  More
12 days ago

Elk Grove, IL 14-June-2016

Programmer Analyst
Source: Indeed
Details: ASP.NET MVC 4 or later, ASP, Visual Basic. Develop, test, and maintain programming solutions using ASP.NET MVC (C#/VB), ASP, SQL, and Crystal Reports based on...  More
30+ days ago

Elgin, IL 22-April-2016

.NET Programmer Analyst II
Source: Indeed
Details: Experience with writing and debugging ASP.NET MVC applications. Growing Houston based employee benefits data management company has a need for a Programmer...  More
17 days ago

Houston, TX 09-June-2016

Web Developer
Source: The Mosaic Company
Details: The candidate must have experience with React, Javascript, Typescript, Azure cloud app development, HTML, LESS and ASP.NET MVC....  More
3 days ago

San Ramon, CA 94583 22-June-2016

Web Developer/Architect
Source: Indeed
Details: ASP .NET MVC including the Entity Framework. In this role you will:....  More
3 days ago

Fort Wayne, IN 46825 22-June-2016
Category: ASP.NET Web API ASP.NET Web Forms

About IMRAN ABDUL GHANI

Imran Abdul Ghani is working as Software Developer(Senior) with extensive knowledge in Web development technologies especially C#, ASP.NET, MVC, WCF, Web API, ADO.NET Entity Framework, jQuery etc. He has several years of experience in designing/developing enterprise level applications. He is Microsoft Certified Solution Developer for .NET (MCSD.NET) since 2005. You can reach his blogging at www.webdevelopmenthelp.net, www.topwcftutorials.net, and www.sharepointfordummies.net.