ARTICLE

Consuming Web Service Using Ajax

Posted by Alok Harsh in Articles | Web Services in C# on November 29, 2011

Tags: consuming web service using ajax, how to consume web service using ajax, how to use ajax in web application, web services

In this article you will learn how to consume a web service in a web application using Ajax.

Tweet
2303
0

Reader Level: Beginner

Introduction:

In this article we will learn to use (consume) a web service in our web application using Ajax (Asynchronous JavaScript and XML). We use Ajax in those applications where we do not want the page to be reloaded for a specific event. Here at first we will create a simple web service with two methods - One for showing message and another for adding two numbers and then we will use this web service into web application using Ajax. So, Let's create a web service. Follow given steps.

Go to Visual Studeo 2010 and take a New Project.

Take a ASP.NET Web Service Application.

Give it a name and click ok button.

Now modify the code of .asmx.cs with the following code.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

namespace wsuingAjax
{
    /// <summary>
    /// Summary description for Service1
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the
    following line.
    // [System.Web.Script.Services.ScriptService]
    public class Service1 : System.Web.Services.WebService
    {
        [WebMethod(Description="Show Message")]
        public string show()
        {
            return "Hello Web Service!!!";
        }
        [WebMethod(Description = "Addition of Two Numbers")]
        public int add(int a, int b)
        {
            return a + b;
        }
    }
}

Now run the application.

Output:

consuming web service using ajax

Now we use this service using Ajax in our web application. Follow the given steps.

Go to Visual Studio 2010 and create a New Project.

Select a ASP.NET Empty Web Application.

Give it a name and click ok button.

Right click at your project and add a web form.

Right click at your project and select Add Web Reference. Look at below figure.

consuming web service using ajax

After selecting this, a new window will be open like as below figure.

consuming web service using ajax

Copy the URL of your running web service and paste it at the URL (Look in figure) and click "Go" button.

consuming web service using ajax

Click at Add Reference. Now service reference has added in your application.

Go to design page of your web application and take ScriptManager at first. Then take UpdatePanel and some other controls and arrange them in given
order.

consuming web service using ajax

Code (WebForm.aspx):

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="usingws.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .style1
        {
            width: 118px;
        }
        .style2
        {
            width: 114px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <br />
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
           <ContentTemplate>
                <asp:Button ID="btnshow" runat="server" BackColor="#999966" Height="26px"
                    Text="Show " Width="71px" onclick="btnshow_Click" />
                      
                <asp:Button ID="btnadd" runat="server" BackColor="#999966" Text="Add"
                    onclick="btnadd_Click" />
            <br /><br />
        <table style="height: 69px; width: 466px">
        <tr>
        <td class="style2">
            <asp:Label ID="lblfn" runat="server" Text="First No."></asp:Label>
            </td>
        <td class="style1">
            <asp:TextBox ID="txtfirst" runat="server"></asp:TextBox>
            </td>
        <td>
            <asp:Label ID="lblshow" runat="server" Text=" "></asp:Label>
            </td>
        </tr>
        <tr>
        <td class="style2">
            <asp:Label ID="lblsn" runat="server" Text="Second No."></asp:Label>
             </td>
        <td class="style1">
            <asp:TextBox ID="txtsecond" runat="server"></asp:TextBox>
             </td>
       <td></td>
        </tr>
         <tr>
        <td class="style2">
            <asp:Label ID="lbladdition" runat="server" Text="Addition"></asp:Label>
             </td>
        <td class="style1">
            <asp:TextBox ID="txtresult" runat="server"></asp:TextBox>
             </td>
        <td></td>
        </tr>
        </table>
     </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

Code (WebForm.aspx.cs):

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace usingws
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void btnadd_Click(object sender, EventArgs e)
        {
            localhost.Service1 obj = new localhost.Service1();
            txtresult.Text = obj.add(Convert.ToInt32(txtfirst.Text), Convert.ToInt32(txtsecond.Text)).ToString();
        }
        protected void btnshow_Click(object sender, EventArgs e)
        {
            localhost.Service1 obj = new localhost.Service1();
            lblshow.Text = obj.show();
        }
    }
}

Run the web application.

Output:

Click show button to show message (which is specified in web service) and Add button to get addition of two numbers.

Output:

This Feature is Sponsored By

DynamicPDF Merger is a developers dream for interacting with any existing PDF documents. Merge, append, split, form fill, flatten stamp and so much more.

post comment

COMMENT USING

PREMIUM SPONSORS

DynamicPDF Developer Components

DynamicPDF™ product line allows you to dynamically generate PDF documents, merge PDF documents and add new content to existing PDF documents from within your applications.

TRENDING UP

Create Outlook Add-in by MAPI Functionality by Using Visual Studio 2010 Outlook Project Debugging jQuery in ASP.NET Top 10 HTML5 Interview Questions How to Enable Sign in as Different User Option in SharePoint 2013 How to Select Multiple Rows in Grid Using LightSwitch 2012 Find and Delete Duplicate Records From SQL Table Encrypt and Decrypt in SQL Server: Part 2 Custom Paging With GridView in ASP.NET 4.5 Resolving Dependency Using Ninject Introduction To Serialization In Java

View All

MOST LIKED ARTICLE

WCF Introduction and Contracts - Day 1 Create SSRS Report Using Report Wizard CREATE READ UPDATE and DELETE - CRUD Operation Using LINQ to SQL WCF - Data Contract - Day 4 Factory Design Pattern

Follow @twitterapi

Options	Votes	%
PhoneGap	2	2.74
Icenium	0	0.00
Xamarin Studio	1	1.37
KendoUI Mobile	1	1.37
JQueryMobile	61	83.56
Native iOS/Android	8	10.96
Total	73	100%

In Focus

Consuming Web Service Using Ajax

Related Articles


What is the best product to build Mobile apps?

What is the best product to build Mobile apps

PhoneGap Icenium Xamarin Studio KendoUI Mobile JQueryMobile Native iOS/Android