Using Webform with Web API

This article show you how to use Webform with Web API.

I heard a lot about using Webform with Web API but I have not seen a good example running. Ended up I created one example for myself.

I am modifying the project from the Hands On Lab: Build a Single Page Application (SPA) with ASP.NET Web API and Angular.js

From what I know, banks are not a candidate for Single Page Application. Because you don’t want to lost your money because of caching and you rather make sure you refresh the whole page.

Webform still the fast way to create a web application in ASP.NET.

Let’s start try to convert this application to Webform application.

1. Download the source code form

2. Start your Visual Studio 2013 (you can use VS 2015 is fine, I have tested it).

3. Go to File -> New _> Project…

4. Choose Web -> ASP.NET Web Application, click OK.


The project name I used is GQWebform.

5. Select Web Forms and Web API, click OK.


6. Located AspNetWebApiSpa\Source\Ex2-CreatingASPAInterface\End\GeekQuiz folder in the sample that you have download.

7. Copy the following files from Models folder to Controllers folder in Web Forms project.


8. Copy TriviaController.cs from Controllers folder to Controllers folder in Web Forms project

9. Copy the following files from App_Start folder to App_Start folder in Web Forms project.


11. Copy the Global.asax and Global.asax.cs from GeekQuiz folder to Web Forms project.                          


10, Replace the Default.aspx with the following code.


<%@ Page Async=”true” Title=”Home Page” Language=”C#” MasterPageFile=”~/Site.Master” AutoEventWireup=”true” CodeBehind=”Default.aspx.cs” Inherits=”GQWebform._Default” %>


<asp:Content ID=”BodyContent” ContentPlaceHolderID=”MainContent” runat=”server”>


          <div class=”Table”>


            <div class=”Row”>


                <div class=”Cell”>

                    <p> <asp:Label ID=”Label1″ runat=”server” Text=”Label”></asp:Label></p>



                <div class=”Cell”>

                    <p><asp:RadioButtonList ID=”RadioButtonList1″ runat=”server”></asp:RadioButtonList></p>



                <div class=”Cell”>               

                    <asp:Label ID=”Label2″ runat=”server” Text=”Label”></asp:Label>



                <div class=”Cell”>

                    <p><asp:Button runat=”server” Text=”Load” OnClick=”Unnamed1_Click”></asp:Button>

                    <asp:Button ID=”btnSubmit” runat=”server” Text=”Submit” OnClick=”btnSubmit_Click” /></p>







The above code added a Label, RadioButtonList, and 2 Button in the Webform without css and javascript.

Because the code in the controllers are Async so you need to add the follow attribute to your Webform.


11. Replace the Default.aspx.cs with the following code.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using GeekQuiz.Controllers;

using GeekQuiz.Models;

using System.Threading;

using System.Threading.Tasks;


namespace WebApplication1


    public partial class _Default : Page


        TriviaQuestion nextQuestion = new TriviaQuestion();

        TriviaController triviaController = new TriviaController();

        protected void Page_Load(object sender, EventArgs e)





        public async Task<TriviaQuestion> Get()



            var userId = User.Identity.Name;


            TriviaQuestion nextQuestion = await triviaController.NextQuestionAsync(userId);


            return nextQuestion;



        protected void Unnamed1_Click(object sender, EventArgs e)





        protected async void GetNextQuestion()


            nextQuestion = await Get();


            Label1.Text = nextQuestion.Title;


            for (int i = 0; i < nextQuestion.Options.Count; i++)


                RadioButtonList1.Items.Add(new ListItem(nextQuestion.Options[i].Title, nextQuestion.Options[i].Id.ToString()));



            Session[“NQ”] = nextQuestion;



        protected void btnSubmit_Click(object sender, EventArgs e)


            TriviaAnswer answer = new TriviaAnswer();


            if (Session[“NQ”] != null)


                nextQuestion = Session[“NQ”] as TriviaQuestion;



            answer.QuestionId = nextQuestion.Id;

            answer.OptionId = int.Parse( RadioButtonList1.SelectedValue);




        protected async void SubmitAnswer(TriviaAnswer answer)


            answer.UserId = User.Identity.Name;


            Boolean isCorrect = await triviaController.StoreAsync(answer);


            Label2.Text = isCorrect.ToString();




The important code here is

protected async void GetNextQuestion()

this code calls the Async Web API in the controllers.

You can download the full solution here

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 .Net, Community 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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s