Calling and get data ASP.NET AJAX Web Services with jQuery
Addition to basics http://vinodkotiya.blogspot.com/2011/07/calling-aspnet-ajax-web-services-with.html
Calling and Get data ASP.NET AJAX Web Services with jQuery
Important check required:
1. Use JQuery script in head tag
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
2. To get webservice responce in JSON format use following tag
<ScriptMethod(ResponseFormat:=ResponseFormat.Json)>
3. To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
<System.Web.Script.Services.ScriptService()> _
If you do not include this line in webservice.. you may got internal server error 500...
1. Here will be the web service in App_code folder
Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.Web.Script.Services
Imports System.Web.Script.Serialization
' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
<System.Web.Script.Services.ScriptService()> _
<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
Public Class vin
Inherits System.Web.Services.WebService
<WebMethod(Description:="say hello")> _
<ScriptMethod(ResponseFormat:=ResponseFormat.Json)>
Public Function sayhello() As String
Return "It's Hello from asp.net web service"
End Function
<WebMethod(Description:="say hello with name")> _
<ScriptMethod(ResponseFormat:=ResponseFormat.Json)>
Public Function sayhelloname(ByVal name As String) As String
Return "from asp.net web service Hello " + name
End Function
End Class
2. Make an asmx file for the web service
<%@ WebService Language="VB" CodeBehind="~/App_Code/vin.vb" Class="vin" %>
3. Here is the JQuery code for Default.aspx
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %>
<!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>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
function CallWebServiceFromJquery() {
$.ajax({
type: "POST",
url: "vin.asmx/sayhello",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
error: OnError
});
}
function CallWebServiceFromJqueryButton() {
var name = $('#txtName').val();
$.ajax({
type: "POST",
url: "vin.asmx/sayhelloname",
data: "{name:'" + name + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
error: OnError
});
}
function OnSuccess(data, status) {
alert(data.d);
}
function OnError(request, status, error) {
alert('error ' + request.statusText);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1> Calling ASP.NET AJAX Web Services with jQuery </h1>
Enter your name:
<input id="txtName" />
<br />
<input type="button" value="click" id="btnCallWebService" onclick ="CallWebServiceFromJquery()" />
<input type="button" value="click to get name" id="Button1" onclick ="CallWebServiceFromJqueryButton()" />
</div>
</form>
</body>
</html>
- vinod kotiya
www.vinodkotiya.com
Comments