HOW TO CALL WEBAPI IN ASP.NET WEBFORM APPLICATION

In this article, we are discussing on how to call web API in asp.net webform page. So for this process follow the below steps:

Step-1: Create an Asp.Net Web Application

Now create the one sample application "Demo_WebApi" as:

1. "Start" - "All Programs" - "Microsoft Visual Studio 2010".
2. "File" - "New Project" - "C#" - "Empty Web Application" (to avoid adding a master page).
3. Provide the web site a name such as  "Demo_WebApi" or another as you wish and specify the location.
4. Then right-click on Solution Explorer - "Add New Item" - "Default.aspx page".
5. Drag and drop required controls on the <form> section of the Default.aspx page.

Step-2: Create an Asp.Net WebApi Application

Now create another sample application "WebApi" as:

1. Right click on solution, and select menu add> New Project > Visual C# - Web > ASP.NET  Web Application 
2. Set the project name "WebApi" and click OK.
3. Select the "WebApi" template, set "No Authentication", unchecked "Host in the cloud" options, and click OK.
4. After that, WebApi Solution will be created.
   

Step-3: Create WebApi Solution

For Creating WebApi Solution follow this given link web-api-solution.

Step-4: 

In "Default.aspx page" , Write this below code in Design Page...

 <div class="col-md-12">
        <h3><u>Student Registration</u></h3>
        <div class="clearfix" style="margin-bottom:2%;">
            <asp:Label ID="Label1" runat="server" Text="Label" Visible="False"></asp:Label>
        </div>
        <div class="form-group">
        <div class="col-md-4">
            Enter Name:
        </div>
        <div class="col-md-8">
            <asp:TextBox ID="txtname" runat="server"></asp:TextBox>
        </div>
        </div>
        <div class="clearfix" style="margin-bottom:2%;"></div>
        <div class="form-group">
        <div class="col-md-4">
            Enter Age:
        </div>
        <div class="col-md-8">
            <asp:TextBox ID="txtage" runat="server"></asp:TextBox>
        </div>
        </div>
        <div class="clearfix" style="margin-bottom:2%;"></div>
        <div class="form-group">
        <div class="col-md-4">
            Enter Gender:
        </div>
        <div class="col-md-8">
            <asp:RadioButtonList ID="rbgender" runat="server" RepeatDirection="Horizontal" Width="30%">
                <asp:ListItem>Male</asp:ListItem>
                <asp:ListItem>Female</asp:ListItem>
            </asp:RadioButtonList>
        </div>
        </div>
        <div class="clearfix" style="margin-bottom:2%;"></div>
        <div class="form-group">
        <div class="col-md-4">
            Enter Religion:
        </div>
        <div class="col-md-8">
            <asp:DropDownList ID="ddlreligion" runat="server" Width="30%">
                <asp:ListItem>Select</asp:ListItem>
                <asp:ListItem>Hindu</asp:ListItem>
                <asp:ListItem>Muslim</asp:ListItem>
                <asp:ListItem>Christian</asp:ListItem>
                <asp:ListItem>Sikh</asp:ListItem>
                <asp:ListItem>Others</asp:ListItem>
            </asp:DropDownList>
        </div>
        </div>
        <div class="clearfix" style="margin-bottom:2%;"></div>
        <div class="form-group" style="text-align:center;">
       <asp:Button ID="btnsave" runat="server" Text="Save" Width="90px" OnClick="btnsave_Click" />
        </div>
        <div class="clearfix" style="margin-bottom:2%;"></div>
        <div class="form-group">
        <div class="col-md-4">
            Search:
        </div>
        <div class="col-md-8">
            <asp:TextBox ID="txtsearch" runat="server" AutoPostBack="True" OnTextChanged="txtsearch_TextChanged"></asp:TextBox>
        </div>
        </div>
        <div class="clearfix" style="margin-bottom:2%;"></div>
        <div class="form-group" style="text-align:center;">
      <asp:GridView ID="GridView1" runat="server" Width="100%" OnSelectedIndexChanged="GridView1_SelectedIndexChanged" AutoGenerateColumns="False">
          <Columns>
              <asp:TemplateField HeaderText="Student_Id">
                  <ItemTemplate>
                      <asp:LinkButton ID="lkid" runat="server" Text='<%# Bind("Student_Id") %>' CommandName="Select"></asp:LinkButton>
                  </ItemTemplate>
              </asp:TemplateField>
              <asp:BoundField DataField="Student_Name" HeaderText="Student_Name" />
              <asp:BoundField DataField="Student_Age" HeaderText="Student_Age" />
              <asp:BoundField DataField="Student_Gender" HeaderText="Student_Gender" />
              <asp:BoundField DataField="Student_Religion" HeaderText="Student_Religion" />
          </Columns>
          <SelectedRowStyle BackColor="Yellow" />
      </asp:GridView>
        </div>
    </div>

Step-5: 

Add a Class file "student.cs" in the model folder. And write this below code in "student.cs" class:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace Demo_Web_Api.Models
{
    public class student
    {
        public int Student_Id { get; set; }
        public string Student_Name { get; set; }
        public Nullable<int> Student_Age { get; set; }
        public string Student_Gender { get; set; }
        public string Student_Religion { get; set; }
    }
}

In "Default.aspx page" , Write this below code in "Default.aspx.cs" Page...

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net.Http;
using System.Net.Http.Headers;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Demo_Web_Api;

namespace Demo_Web_Api
{
    public partial class WebForm1 : System.Web.UI.Page
    {
       HttpClient client = new HttpClient();
        protected void Page_Load(object sender, EventArgs e)
        {
            client.BaseAddress = new Uri("http://localhost:56637/");
            client.DefaultRequestHeaders.Accept.Add(
                new MediaTypeWithQualityHeaderValue("application/json"));
            if(!IsPostBack)
            {
                get();
            }
        }
        public void get()
        {
            var url = "api/Default" ;
            HttpResponseMessage response = client.GetAsync(url).Result;
            if (response.IsSuccessStatusCode)
            {
                var users = response.Content.ReadAsAsync<IEnumerable<Models.student>>().Result;
                GridView1.DataSource = users.ToList();
                GridView1.DataBind();
            }
            else
            {
              
            }
        }
        protected void btnsave_Click(object sender, EventArgs e)
        {
            if (btnsave.Text == "Save")
            {
                var user = new Models.student();
                user.Student_Name = txtname.Text;
                user.Student_Age = Convert.ToInt32(txtage.Text);
                user.Student_Gender = rbgender.SelectedItem.Text;
                user.Student_Religion = ddlreligion.SelectedItem.Text;
                var response = client.PostAsJsonAsync("api/Default", user).Result;
                if (response.IsSuccessStatusCode)
                {
                    Response.Write("User Added");
                    txtage.Text = string.Empty;
                    txtname.Text = string.Empty;
                    rbgender.SelectedIndex = -1;
                    ddlreligion.SelectedIndex = -1;
                    get();
                }
                else
                {
                    Response.Write("Error Code" + response.StatusCode + " : Message - " + response.ReasonPhrase);
                }
            }
            else if(btnsave.Text=="Update")
            {
                var user = new Models.student();
                user.Student_Name = txtname.Text;
                user.Student_Age = Convert.ToInt32(txtage.Text);
                user.Student_Gender = rbgender.SelectedItem.Text;
                user.Student_Religion = ddlreligion.SelectedItem.Text;

                var url = "api/Default/" + Label1.Text;
                var response = client.PutAsJsonAsync(url, user).Result;

                if (response.IsSuccessStatusCode)
                {
                    Response.Write("User Added");
                    txtage.Text = string.Empty;
                    txtname.Text = string.Empty;
                    rbgender.SelectedIndex = -1;
                    ddlreligion.SelectedIndex = -1;
                    btnsave.Text = "Save";
                    get();
                }
                else
                {
                    Response.Write("Error Code" + response.StatusCode + " : Message - " + response.ReasonPhrase);
                }
            }
        
        }
        protected void txtsearch_TextChanged(object sender, EventArgs e)
        {
            if(txtsearch.Text!=string.Empty)
            {
                var url = "api/Default/" + txtsearch.Text;
                HttpResponseMessage response = client.GetAsync(url).Result;
                if (response.IsSuccessStatusCode)
                {
                    var users = response.Content.ReadAsAsync<IEnumerable<Models.student>>().Result;
                    GridView1.DataSource = users.ToList();
                    GridView1.DataBind();
                }
                else
                {
                
                }
            }
            else
            {
                get();
            }
        }
        protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)
        {
            Label1.Text = ((LinkButton)GridView1.SelectedRow.FindControl("lkid")).Text;
            txtage.Text = GridView1.SelectedRow.Cells[2].Text;
            txtname.Text = GridView1.SelectedRow.Cells[1].Text;
            rbgender.Text=GridView1.SelectedRow.Cells[3].Text;
            ddlreligion.SelectedItem.Text = GridView1.SelectedRow.Cells[4].Text;
            btnsave.Text = "Update";
        }
    }
}

OUTPUT: