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:
![consuming web service using ajax]()
Click show button to show message (which is specified in web service) and
Add button to get addition of two numbers.
Output:
![consuming web service using ajax]()