CALL WEB-SERVICE THROUGH J QUERY AND AJAX IN ASP.NET
STEP 1:
First while creating the web services you need to uncomment the below tag in web service.
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
STEP 2:
Include the scriptManager tag from AJAX EXTENSIONS:
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="~/Service.asmx" /> //the path to your web services
</Services>
</asp:ScriptManager>
STEP3:
create a simple html button control which will call the javascipt .
Here one textbox is also added that will call the PARAMETERIZED WEB SERICES WEB METHOD FROM JAVASCRIPT ...THAT WILL BE EXECUTED FROM BUTTON CLICK..
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<input id="Button1" type="button" value="button" onclick="storeinfo();" />
STEP 4: THE JAVASCRIPT:
<script type="text/javascript">
function storeinfo() {
debugger;
var pass = document.getElementById("TextBox1").value;
Service.GetStoreData(pass, storeinfoSuccessCallback, storeinfoFailCallback, true);
}
function storeinfoSuccessCallback(result) {
alert(result);
}
function storeinfoFailCallback(error) {
alert(error.get_message());
}
</script>
EXPLANATION:
function storeinfo() {
var pass = document.getElementById("TextBox1").value;
Service.GetStoreData(pass, storeinfoSuccessCallback, storeinfoFailCallback, true);
}
a)The function storeinfo is called on the button click.
b)the value from textbox is recieved .
c)the Service class is used to call the WEB METHOD
Here in case mine web method is GetStoreData.
d)its has 4 parameters:
pass: the password accuried from textbox(i.e the webmethod needs one parameter)
storeinfoSuccessCallback : function that is called on sucess on execution
storeinfoFailCallback: function that is called on error of execution
true: user context
A SIMPLE IMPLEMENTATION OF SUCCES AND ERROR FUNCTIONS:
function storeinfoSuccessCallback(result) {
alert(result);
}
function storeinfoFailCallback(error) {
alert(error.get_message());
}
THE COMPLETE CODE:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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>Calling webservice via javascript and ajax</title>
<script type="text/javascript">
function storeinfo() {
debugger;
var pass = document.getElementById("TextBox1").value;
Service.GetStoreData(pass, storeinfoSuccessCallback, storeinfoFailCallback, true);
}
function storeinfoSuccessCallback(result) {
alert(result);
}
function storeinfoFailCallback(error) {
alert(error.get_message());
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="~/Service.asmx" />
</Services>
</asp:ScriptManager>
<div>
enter password:
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<input id="Button1" type="button" value="button" onclick="storeinfo();" />
</div>
</form>
</body>
</html>
AND THAT's IT...........
ENJOY...
