CODEWITHSUNDEEP
c#web-servicesc#-3.0asmx
user193094
user193094

Reputation:

Accessing an ASMX Web Service from JavaScript

I made one web service of named WebService in which GetTest, SetTest function which set and get GUID. Now i want to use this function in javascript in .aspx file. How i use this function in javascript. I put web service code below:-

[WebMethod]
public void SetTest(Guid id, string text)
{
    this.Application.Add(id.ToString(), text);
}
[WebMethod]
public string GetTest(Guid id)
{
    return this.Application[id.ToString()].ToString();
}

[WebMethod]
public Guid CreateNew()
{
    return Guid.NewGuid();
}
[WebMethod]
public string HelloWorld() {
    return "Hello World";
}

AND .ASPX CODE:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UsingWebService.aspx.cs" Inherits="UsingWebService" %>

<!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>Using Web Service</title>    
    <script type="text/javascript" language="javascript">
    debugger;
        var txtGetTestID = '<%= this.txtGetTest.ClientID %>';
        var txtSetTestID = '<%= this.txtSetTest.ClientID %>';
        var _guid = null;

        function GetNew()
        {
           //WebService.CreateNew(GetNewDone,OnError,null);
           GetNewDone(WebService.CreateNew());
        }
        function GetNewDone(result)
        {
            _guid = result;
        }

        function SetTest()
        {
            WebService.SetTest(_guid,$get(txtSetTestID).value);
        }

        function GetTest()
        {
            //WebService.GetTest(_guid,GetTestDone,OnError ,null);
            GetTestDone(WebService.GetTest(_guid));
        }

        function GetTestDone(result)
        {
            $get(txtGetTestID).value = result;

        }
        function OnError(ex)
        {
            alert('Error: '+ex._message);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Label ID="lblInput" Text="Input String" runat="server"></asp:Label>
        &nbsp;
        <asp:TextBox ID="txtInput" runat="server"></asp:TextBox>
        <br />
        <asp:Label ID="lblResult" runat="server"></asp:Label>
        <br />
        <br />
        <asp:Button ID="btnInvoke" Text="Invoke" runat="server" 
            onclick="btnInvoke_Click" />
    </div>
    <table>
    <tr>
        <td>
            &nbsp;
        </td>
        <td>
            <asp:Button id="btnNew" runat="server" Text="New" OnClientClick="GetNew(); return false;" />
        </td>
    </tr>
     <tr>
        <td>
            <asp:TextBox ID="txtSetTest" runat="server" />
        </td>
        <td>
            <asp:Button ID="btnSetTest" runat="server" Text="Set" OnClientClick="SetTest(); return false;" />
        </td>
    </tr>
    <tr>
        <td>
            <asp:TextBox ID="txtGetTest" runat="server" />
        </td>
        <td>
            <asp:Button ID="btnGet" runat="server" Text="Get" OnClientClick="GetTest(); return false;" />
        </td>
    </tr>
</table>
</form>
</body>
</html>

Upvotes: 3

Views: 7305

Answers (2)

max
max

Reputation: 1712

To able to call WebService from javascript you must first add the [ScriptMethod] Annotation like

[System.Web.Script.Services.ScriptService]
public class MyWebService : System.Web.Services.WebService
{
}

To Call the webservice you must include it into an ScriptManager.

   <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Path="~/Script/jquery-1.3.2.js" />
            <asp:ScriptReference Path="~/Script/jquery-ui-1.7.2.custom.min.js" />
            <asp:ScriptReference Path="~/Script/json.jquery.js" />
        </Scripts>
        <Services>
            <asp:ServiceReference Path="~/WebService.asmx" />
        </Services>
    </asp:ScriptManager>

Now You need to call webservice as follows

[WebServiceNameSpace].MyWebService.MyWebMethod(
parameters,
function (e)//Function for success
{
},
function (e)//Function for failure
{
});

for you it will be like:

var id=1;
var text="bla bla";
NameSpace.WebService.SetTest(id, text,
function (e){
},
function (e){
});

you can also use jQuery to call webservice. Look at this

HTH

Upvotes: 5

DavidGouge
DavidGouge

Reputation: 4623

First you need to add [ScriptMethod] attributes to your Web Service methods. Then using the ScriptManager control on your ASPX page, register your web service:

<asp:ScriptManager ID="SM1" runat="server">
  <Services>
    <asp:ServiceReference Path="Service.asmx" />
  </Services>
</asp:ScriptManager>

You can then call GetTest() SetTest() etc from your Javascript.

Hope that helps!

Upvotes: 0

Related Questions