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