3 simple steps to create your first ASP.NET Web API service

By | September 29, 2013

Introduction to ASP.NET Web API

ASP.NET Web API is a framework that simplifies the creation of HTTP services

Using ASP.NET Web API we can create HTTP services those are non-SOAP based like plain XML or JSON strings etc. with added advantages.

  • Allowing to create resource-oriented services using the full features of HTTP.
  • Exposing services to a variety of clients easily like browsers or mobile devices etc.
Before diving into details while going through this ASP.NET Web API Tutorial, I would like to clarify one misconception that ASP.NET Web API has replaced WCF. WCF is still a powerful programming model for creating SOAP based services that use a variety of transport protocols like HTTP, TCP, Named Pipes or MSMQ etc. You can find the same implementation by using WCF REST in another article i.e. “5 simple steps to create your first RESTful service“.

Creating ASP.NET Web API service that supports CRUD (Create, Retrieve, Update, Delete) operations

Apart from Visual Studio 2010 or 2012, we also need MVC 4.0 to implement this HTTP service. For the purpose of this implementation, I am going to use Visual Studio 2010.
You can download MVC 4.0 for Visual Studio 2010 from Microsoft as follows:

Following are 3 simple steps to create HTTP service that returns non-SOAP based data.

  • Create Web API Project
  • Prepare domain Model
  • Adding Controller class
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

Let’s move forward step by step to create a simple HTTP service using ASP.NET Web API.

ASP.NET Web API Tutorial with Simplified Approach

1. Create Web API Project

  • Open Visual Studio and create “New Project” i.e. File -> New Project.
  • Choose “ASP.NET MVC 4 Web Application” template and name project as “FirstWebAPIService”.
  • When you click “OK” button, a new window will appear for selecting a sub-template. Actually for ASP.NET MVC 4 Web Application, we have multiple sub-options i.e. Empty, Internet Application, Web API etc.
  • Choose “Web API” and simply press “OK” button.
ASP.NET Web API Project
Web API Tutorial Template
  • A default ASP.NET MVC 4 Web API template project is created. As its an MVC application template, so you will easily find “Model”, “View” and “Controller” folders inside it.
2. Preparing domain Model
Now in a second step in this asp.net web api tutorial, we need to prepare the model.
  • Right click on the “Model” folder and choose “Class” under “Add” from the context menu as shown in figure.
  • Name the class as “Product.cs”.
Model for Web API
Product Model
Here is the code for Product class.
public class Product
{
    public int ProductID { get; set; }
    public string ProductName { get; set; }
    public string ProductCategory { get; set; }
    public int Price { get; set; }
}

3. Adding Controller Class
Controller class plays an important role, because request coming from client hits the controller first. Then the controller decides which model to use to serve the incoming request. So, in order to add a controller:

  • Right click on the “Controller” folder and choose “Controller” under “Add” from the context menu as shown in figure.
  • Name the controller as “ProductsController”.
Product Controller in Web API Tutorial
First Web API Service
  • Click the “Add” button, a new controller class will be added.
More Web API Tutorial
In order to make the things simple, we will load the model with data inside this controller instead of loading it from database. You can easily find more Web API Tutorial here that explains the process to fetch the records from database. Following is the code for controller class.
public class ProductsController : ApiController
{

   Product[] products = new Product[]
   {
    new Product { ProductID = 1, ProductName = “Product 1″, ProductCategory= “Category 1″, Price = 120 },
    new Product { ProductID = 2, ProductName = “Product 2″, ProductCategory= “Category 1″, Price = 100 },
    new Product { ProductID = 3, ProductName = “Product 3″, ProductCategory= “Category 2″, Price = 150 },
    new Product { ProductID = 4, ProductName = “Product 4″, ProductCategory= “Category 3″, Price = 90 }
   };
   public IEnumerable<Product> GetProducts()
   {
               return products;
   }
}
Don’t forget to add “using FirstWebAPIService.Models;” at the top of the controller class.

Now, it’s time to test your HTTP service using ASP.NET MVC Web API.
Run the application by pressing “CTRL+F5″, Welcome window will appear as follows:

Output for ASP.NET Web API Service

In order to call our Product controller, change the URL as “http://localhost:XXXX/api/products”. You will see the results as shown in following output window.

Rendered Content for Web API Service
Final output returned can be displayed differently by different browsers. Here is the output of google chrome version 29.0.1547.66.
You are working as a Web API developer with WebDevTutorials. You have developed a Student HTTP Service using ASP.NET Web API technology and you want to return a View from Web API method.

  • A. Use ViewBag.
  • B. Use Partial View against Web API method.
  • C. You can’t return view from ASP.NET Web API method.
  • D. None of Above.

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: C

Hopefully, this simple web api tutorial will be helpful for developers to code their first HTTP service using ASP.NET MVC Web API. Further, for performing all CRUD operations using Web API, Follow the click.

ASP.NET MVC & Web API Jobs [Updated Daily]

Top ASP.NET MVC Jobs

Full Stack Developer
Source: Indeed
Details: Develop UI components using technologies such as ASP.NET MVC, JavaScript, React.js, JQuery. 5+ years of experience using web technologies including ASP.NET MVC,...  More
2 days ago

Philadelphia, PA 23-September-2016

C# MVC Front-End Developer
Source: Adworthy
Details: Strong skills in C# and ASP.NET MVC. We are looking for a mid-level C# developer with overall....  More
1 day ago

Washington Crossing, PA 18977 24-September-2016

Application Developer (Secret Clearance)
Source: Indeed
Details: *Overview* Are you looking for an opportunity to join a growing company that is innovative, cutting edge, and mission centered? Our prestigious technical and  More
20 hours ago

Arlington, VA 25-September-2016

Application Developer
Source: Indeed
Details: 3+ years of development experience using Microsoft IIS, C#, ASP.NET, MVC, VB, NET, XML and SQL Server. Jefferson Capital Systems, LLC is an industry-leading...  More
4 days ago

Saint Cloud, MN 56303 21-September-2016

Application Developer
Source: Indeed
Details: ASP.NET, ASP.NET MVC, MS SQL Server, HTML, CSS, JavaScript, C#/VB.NET and Microsoft development stac:. Minimum 3 years’ experience with established development...  More
4 days ago

Miami, FL 21-September-2016

Application Developer
Source: Indeed
Details: Working knowledge of C#, ASP.NET, MVC, and Visual Studio. We have an opening for a dynamic Application Developer who is passionate about what they do and...  More
6 days ago

Cranston, RI 19-September-2016

Software Developer
Source: Indeed
Details: ASP.NET MVC experience is required. Build and maintain application functionality for new and existing systems.Participate in all aspects of the software...  More
17 days ago

Rancho Cordova, CA 08-September-2016

Software Developer
Source: Indeed
Details: C#, SQL, HTML, CSS, JSON, JavaScript, ASP.NET Web Forms, ASP.NET MVC, Visual Studio. Does this describe you?*....  More
2 days ago

Miamisburg, OH 45342 23-September-2016

Full Stack Developer
Source: Graphic Products
Details: Proficient knowledge of ASP.NET MVC 5+. We are looking for a Full Stack Developer responsible for the ongoing development and advancements of our ecommerce and...  More
30+ days ago

Beaverton, OR 97008 11-August-2016

Front-End Developer
Source: Cylance
Details: WHO WE ARE Cylance is one of the fastest growing companies in cybersecurity. By successfully applying artificial intelligence and machine learning to crack...  More
16 days ago

Irvine, CA 92618 09-September-2016

C# Developer
Source: Posh Technologies
Details: 5+ years of working experience with C#, ASP.Net MVC, SQL Server, JavaScript. 10+ years of Software development experience with strong background in computer...  More
5 days ago

Redmond, WA 20-September-2016

Application Developer
Source: Indeed
Details: HTTP, AJAX, HTML5, ASP.NET WebForms, ASP.NET MVC, MVVM, JavaScript/jQuery and CSS3. Long term consulting assignment over two years....  More
10 days ago

Phoenix, AZ 15-September-2016

Software Developer (Early Career)
Source: Indeed
Details: Working knowledge of WinForms, MVC, and entity framework. Web Programming experience with JavaScript, Ajax, JQuery, HTML, ASP.NET, MVC, responsive design....  More
3 days ago

Fargo, ND 58104 22-September-2016

Mobile Application Developer
Source: Indeed
Details: HTTP, AJAX, HTML5, ASP.NET WebForms, ASP.NET MVC, MVVM, JavaScript/jQuery and CSS3. Mobile Application Developer....  More
11 days ago

Phoenix, AZ 14-September-2016

Front End Developer - Crate and Barrel
Source: Avani Tech Solutions
Details: Converting websites that are currently in webforms to MVC. Maybe you’ve worked with C#, ASP.NET MVC, the .NET Framework, and VisualStudio. Top Three Skills:....  More
18 days ago

Northbrook, IL 07-September-2016

Software Developer Internship
Source: Arbiter Sports
Details: 0-1 year software development experience or academic exposure in developing web applications using ASP.NET MVC, C#, SQL Server and Entity Framework....  More
4 days ago

Sandy, UT 84070 21-September-2016

Software Developer w/experience
Source: Indeed
Details: 1 year ASP.net MVC experience preferred. Some experience developing Web applications using ASP.net MVC. Develop custom applications in Visual Studio’s VB.Net/C#...  More
6 days ago

Louisville, KY 19-September-2016

Dot Net Developer
Source: Sonsoft Inc
Details: At least 3 years of hands-on experience in Web Technology like ASP .NET Web Forms , ASP.NET MVC, C#. At least 4 years of experience developing responsive Web...  More
3 days ago

Jacksonville, FL 22-September-2016

Sr Software Design Engineer (63929)
Source: rgen
Details: Senior Software Design Engineer Redmond WA Looking for a senior developer with hands on coding experience for the middle and backend. Basically trying to  More
10 days ago

Redmond, WA 15-September-2016

Software Developer
Source: Indeed
Details: The Software Developer must have knowledge of Microsoft technologies, including Microsoft .NET 4.0/4.5, C#, ASP.NET MVC, WebApi, IIS, Entity Framework, SQL...  More
12 days ago

Chesapeake, VA 13-September-2016

Back End Developer
Source: Pietech, Inc
Details: C#, ASP.Net MVC, SQL Server, JavaScript, NHibernate. Is currently looking for a Software Developer in Richmond, VA....  More
27 days ago

Powhatan, VA 23139 29-August-2016

Software Developer Intern
Source: Health Catalyst
Details: Job Title: SoftwareDeveloper/Test Intern Department: Product Development Classification: Intern Status: Full-time (40 hours/week) Location: Salt Lake City  More
13 days ago

Salt Lake City, UT 12-September-2016

Software Developer
Source: NuGrowth Solutions
Details: The ideal candidate will be fluent in C#, ASP.NET MVC, SQL Server and Web Service Architecture. SIS, a leading provider of Agency Management Systems for...  More
15 days ago

Columbus, OH 43228 10-September-2016

MVC Entity Framework Azure Developer
Source: Indeed
Details: MVC:. Experience with ASP.NET MVC and the .NET Framework. The project will be implemented with cutting-edge Web and cloud-based technologies, using SCRUM...  More
5 days ago

Redmond, WA 20-September-2016

Programmer with Extensive C# and MS SQL Expertise
Source: Indeed
Details: We are growing like crazy. We need smart and motivated programmers who use C# and MS SQL.Email a PDF version of your resume and a general idea about your...  More
6 days ago

Lenexa, KS 19-September-2016

Top 10 Interview Questions and Answers Series:

Category: ASP.NET Web API 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.

  • wow…seems great

  • Really great post .. thanks sharing your topic

    website

  • Thanks very much… I m waiting for CRUD operations using Web API…. Thanks again….

  • Easy to do tutorial. Thanks mate however I am having this error when I run the program:

    This XML file does not appear to have any style information associated with it. The document tree is shown below.

    No HTTP resource was found that matches the request URI ‘http://localhost:59074/api/products’.

    No type was found that matches the controller named ‘products’.

  • Dear Abraham,
    You need to check you configuration and verify the routeTemplate as follows:
    1. Open WebAPIConfig.cs file under “App_Start” folder in Visual Studio.
    2. Inside Register method, routeTemplate value should be equal to “api/{controller}/{id}”.

    As I have the following:
    config.Routes.MapHttpRoute(
    name: “DefaultApi”,
    routeTemplate: “api/{controller}/{id}”,
    defaults: new { id = RouteParameter.Optional }
    );

  • when i try this…everything was ok till chnging url bt when i change url it land at google search page …why this??

    • Dear Nilam,
      Kindly look for my above comments on Abraham query. You might need to update routeTemplate.

      If it doesn’t resolve your issue, kindly elaborate your issue a bit more.

  • This comment has been removed by a blog administrator.

  • swapna

    i am getting error as MvcApplication1.Controllers.productsController.Product’ is a ‘field’ but is used like a ‘type. Plzz help me out in this problem

    • I believe you are making some mistake while calling a method. This type of error occurs normally when someone calls a method at class level instead of making call inside a method.

  • Above are around 52 errors, If you can remove others, hopefully things will be clear but it seems you have some wrong placement of methods (outside class) etc.

  • Roman Denysiuk

    IMRAN, could you tell me the way how to allow update/delete/create records (through web service) only for authenticated users?

  • Edwin Yesid Castañeda Henao

    Imran, this blog is excellent. Conglaturations !!

  • user2083

    well explained! easy to understand for a newcomer.

    here one thing i want to mention is while executing above given example my browser was showing below error :

    “This XML file does not appear to have any style information associated with it. The document tree is shown below.

    No HTTP resource was found that matches the request URI ‘http://localhost:45788/api/products’.

    No type was found that matches the controller named ‘products’.

    And the reason i found was, in my application, ‘ProductsController’ class was by default inheriting “Controller” as base class as given below:

    “public class ProductsController : Controller”

    instead of ‘ApiController’ class as shown in above example code.

    So After adding namespace “using System.Web.Http;” in ‘ProductsController’ class and inheriting ‘ApiController’ as base class as follows:

    “public class ProductsController : ApiController”

    it worked.

    thanks again for this good piece of work.

  • user2083

    well explained! easy to understand for a newcomer.

    one thing i want to mention, while executing above given example browser was showing below error :

    “This XML file does not appear to have any style information associated with it. The document tree is shown below.

    No HTTP resource was found that matches the request URI ‘http://localhost:45788/api/products’.

    No type was found that matches the controller named ‘products’.

    And the reason i found was, in my application, ‘ProductsController’ class was by default inheriting “Controller” as base class as given below:

    “public class ProductsController : Controller”

    instead of ‘ApiController’ class as shown in above example code.

    So After adding namespace “using System.Web.Http;” in ‘ProductsController’ class and inheriting ‘ApiController’ as base class as follows:

    “public class ProductsController : ApiController”

    it worked.

    thanks again Imran for this good piece of work.