In this I will explain how to call or consume web service
(apsx) using Jquery Ajax with example in asp.net.
Create one web project . In this add new web service(aspx) file using right click on
solution explorer.
Configuration web service to handle JQuery AJAX :-
By default web service do not accept request from client
side using JQuery AJAX. To allow web service
handle JQuery AJAX , uncomment the following line
//
[System.Web.Script.Services.ScriptService]
The following web service consists GetDetails we method,
which accepts name and designation parameter .
C#:-
using System;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;
[WebService(Namespace
= "http://tempuri.org/")]
[WebServiceBinding(ConformsTo
= WsiProfiles.BasicProfile1_1)]
// 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 Service : System.Web.Services.WebService
{
public Service () {
//Uncomment the following line if using designed components
//InitializeComponent();
}
[WebMethod]
public string
GetDetails(string Name,string
Designation) {
return string.Format("Name :{0}{1} Designation :{2}{1} Date :{3}", Name, Environment.NewLine, Designation, DateTime.Now.ToString());
}
}
Consuming Web Service (ASMX) using JQuery AJAX in asp.net
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript"
language="javascript">
$(function (){
$("[id*=btnSubmit]").click(function () {
var name=$.trim($("[id*=txtName]").val());
var desgn=$.trim($("[id*=txtDesgn]").val());
$.ajax({
type:"POST",
url :"Service.asmx/GetDetails",
data : "{Name: '"+name+"', Designation:'"+desgn+"'}",
contentType : "application/json;
charset=utf-8",
dataType :"JSON",
success:function(r){
alert(r.d);
},
error:function(r){
alert(r.responseText);
},
failure:function(r){
alert(r.responseText);
}
});
return false;
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="Label1" runat="server"
Text="Label"></asp:Label>: <asp:TextBox ID="txtName"
runat="server"></asp:TextBox>
<asp:Label ID="Label2" runat="server"
Text="Label"></asp:Label>: <asp:TextBox ID="txtDesgn"
runat="server"></asp:TextBox>
<asp:Button ID="btnSubmit"
runat="server"
Text="Submit"
/>
</div>
</form>
</body>
</html>
ScreenShot :
No comments:
Post a Comment
Note: only a member of this blog may post a comment.