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

By | May 12, 2014
Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInDigg thisPin on Pinterest

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

Web Developer
Source: Indeed
Details: Have worked with the .NET web stack including ASP.NET, MVC, WebAPI 2 and C#. We are seeking a driven, innovative and detail-obsessed software developer who...  More
22 hours ago

Bellevue, WA 06-December-2016

Web Developer (C# & AngularJS) -2 months of contract
Source: CSI Interfusion Inc
Details: Solid skills on C#, ASP.Net, MVC, JavaScript, CSS, HTML, etc. CS I Interfusion ( CSI ) (size:....  More
5 days ago

Redmond, WA 02-December-2016

Backend Web Developer
Source: Indeed
Details: Minimum 4 years experience with writing WinAPI/RESTFul API and working in an ASP.NET MVC environment. Keyventer is seeking a *Back End Web*....  More
8 days ago

Seattle, WA 28-November-2016

Web Developer (C# & AngularJS) - 2 months
Source: Indeed
Details: *CS* *I Interfusion* ( *CSI* ) (size: 20,001+ employees, globally), a leading global provider of *IT consulting services, technical services* and *outsourcing...  More
14 days ago

Redmond, WA 23-November-2016

Programmer / Analyst
Source: Intel
Details: Advanced forms with dynamic connection to stored procedures on other databases - Experience in database design and data modeling - Experience with developing...  More
5 days ago

Hillsboro, OR 97124 02-December-2016

Programmer Analyst
Source: AIG
Details: Strong knowledge of .Net Framework, C#, ASP.Net, MVC, LINQ, Visual Studio 2008/2010/2013 and Version Control System (TFS, Git etc.)....  More
30+ days ago

Jeffersonville, IN 16-September-2016

Web Application Developer
Source: Indeed
Details: ASP.NET MVC, Web Forms, Web API. SC Strategic Solutions is looking for passionate full time software developers who are efficient problem solvers with a...  More
14 days ago

Norwalk, OH 23-November-2016

Web Developer
Source: Indeed
Details: MVC:. ASP.Net MVC and C#.Net experience a must*. ~~~~~NOT A REMOTE POSITION~~~~~*....  More
14 days ago

Sarasota, FL 34232 23-November-2016

Front End Developer | Web Mobile
Source: Specialists On Call
Details: AngularJS, HTML5, Sass, C#, ASP.Net MVC, SOA. Specialists On Call, Inc....  More
15 days ago

Reston, VA 20190 21-November-2016

Microsoft web developer - Contract - Telecommuting
Source: Indeed
Details: MVC, .Net, CSS, HTML:. Working familiarity with ASP.net, MVC. This is a 3 months + contract position for our direct client based in San Antonio....  More
18 days ago

San Antonio, TX 19-November-2016

.NET Developer Instructor
Source: Indeed
Details: NET – You are comfortable working with ASP.NET, MVC and Core Web API. About Coder Camps:....  More
19 hours ago

Redmond, WA 07-December-2016

e-Commerce Web Developer
Source: Indeed
Details: Hands-on code development experience in web development field using ASP.NET MVC, C#, HTML 5.0, jQuery, XML, CSS, and Web Services....  More
21 days ago

South Saint Paul, MN 55075 16-November-2016

Back-End Web Developer
Source: DNTG Software
Details: Experiences with ASP.NET and MVC in C#, Web API. Develop and maintain secure and stateless web services using Microsoft ASP.NET MVC 4.0 based on the REST...  More
21 days ago

Buena Park, CA 16-November-2016

Web & Mobile Developer
Source: Indeed
Details: Our software stack includes Xamarin C# on iOS & Android, ASP.NET MVC, Microsoft Azure, Angular.js, HTML5, and JavaScript....  More
21 days ago

Kent, WA 15-November-2016

.Net Developer with Azure Cloud Experience
Source: CSI Interfusion Inc
Details: Demonstrated experience working on services built using ASP.NET / MVC, and SQL db. CSI Interfusion (CSI) (size:....  More
5 days ago

Redmond, WA 02-December-2016

Senior Software Engineer
Source: Clarity Consulting Inc.
Details: C# / WinRT / .NET / XAML / Windows 8/8.1 / Windows Phone 8/8.1 / Xbox / UCMA/UCWA / iOS / Cocoa Objective-C / Android / Xamarin / HTML5 / JavaScript/jQuery /...  More
1 day ago

Seattle, WA 06-December-2016

.Net Developer
Source: Indeed
Details: .Strong Experience developing MVC applications using ASP.Net MVC. .4+ years experience in software engineering....  More
7 days ago

Redmond, WA 30-November-2016

Web Developer
Source: Indeed
Details: Experience with ASP.NET MVC is a plus. R+L Carriers is currently seeking a Web Application Developer for our Ocala, FL Technical Center and our Wilmington, OH...  More
29 days ago

Wilmington, OH 45177 08-November-2016

.Net Developer
Source: Indeed
Details: .Strong Experience developing MVC applications using ASP.Net MVC. Essential Job Functions....  More
40 minutes ago

Seattle, WA 07-December-2016

Front-End Web Developer
Source: Indeed
Details: Experience with the MS development stack Visual Studio, .NET, ASP.NET MVC, etc. Crystal Capital Partners, a financial services company w/ over 20 years of...  More
30+ days ago

Miami, FL 04-November-2016

Web Applications Developer
Source: ITR (Information Technology Resources)
Details: Experience with the MVC pattern and responsive design of web applications. Web Applications Developer....  More
30+ days ago

Oak Ridge, TN 02-November-2016

Web Developer
Source: Indeed
Details: Experience with ASP.NET MVC is a plus. R+L Carriers is currently seeking a Web Application Developer for our Ocala, FL Technical Center and our Wilmington, OH...  More
29 days ago

Ocala, FL 08-November-2016

Senior Developer
Source: Indeed
Details: .NET architecture, ASP.NET MVC, OOP, SOA, repository patterns (CRUD). Development, maintenance and administration as part of a team supporting advanced...  More
2 hours ago

New York, NY 07-December-2016

Senior Software Developer
Source: MediaRadar
Details: Knowledge of ASP.NET MVC 4/5. Web based projects will center on ASP.Net MVC 4 and the Razor view engine, with Angular.js....  More
20 days ago

New York, NY 17-November-2016

Programmer Analyst
Source: Kindred Healthcare
Details: Have experience with ASP.NET MVC and/or WPF. Clinical Systems Development....  More
19 days ago

Louisville, KY 40202 18-November-2016
Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInDigg thisPin on Pinterest
Category: ASP.NET Web API ASP.NET Web Forms Tags: ,

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.