pavanarya

Let us share the knowledge

ScriptManager Class For Calling WebServices From Javascript

with 7 comments

Hi,
Ajax plays a vital role in the web application development.
With the help Microsoft ajax tool kit it is easy for a developer to make asynchronous call.
The main class in the microsoft ajax tool kit “ScriptManager“.
ScriptManager class plays a vital role in the .net web applications development.

Uses of Script Manager

Script Manager in general can be used in 3 different ways.

1.For sending custom scripts to the browser. This means we can add java script code from the code behind file.

2.Partial page rendering. Script manager can be used to refresh parts of the page without any post back.

3. Calling web services and methods in code behind file from java script.

So in this post we can see the third one that is calling web service from java script.

Calling Webservice From Javascript

1. Create an empty web application in the visual studio.

2. Add a web service to the project created in the above step and name it as TestService.

3.Uncomment the line “[System.Web.Script.Services.ScriptService]“. because this will enable calling of web service from javascript.

4.Web service is created. Now add a web method. I created a web method with name TestWebService and it is having a single parameter.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

/// <summary>
/// Summary description for TestService
/// </summary>
[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 TestService : System.Web.Services.WebService {

    public TestService () {

        //Uncomment the following line if using designed components 
        //InitializeComponent(); 
    }

    [WebMethod]
    public string TestWebService(string name) {
        return "Hello "+name+" How are you";
    }
    
}

5.Now create an aspx page. We are actually going to call the web service from the javascript that we are going to write in this aspx page.

6.Add the following piece of code to the aspx page.

<asp:ScriptManager ID="scriptmanager1" runat=server>
    <Services>
    <asp:ServiceReference Path="~/TestService.asmx" />
    </Services> 
    </asp:ScriptManager>

So we are adding the script manager control and to that we are adding a collection of services with the help of that can contain number of pointing to different web services.

So microsoft ajax framework generates client proxies for each and every present is collection. This makes the work of a developer easy.
Once we are done with the adding Scriptmanager control the next step is writing javascript code that is used to call the web methods present in the web servcie.

<script language=javascript>
            function callwebservice() {
                TestService.TestWebService("Pavan", onSuccess, onFailure);
            }
            function onSuccess(result) {
                alert(result);
            }
            function onFailure(result) {
                alert("There is an error");
            }
    </script>

So in the above code we are calling the web method “TestWebService” as follows

TestService.TestWebService("Pavan", onSuccess, onFailure);
//Here TestService is the class name and TestWebService is web method.
//Here it take 3 parameters in our case.
//1st parameter the actual parameter of the web method.
//2nd parameter is the call back function that is to be executed if the call is successful.
//3rd parameter is the callback function that is to be called if call is failed.
//also there is an optional parameter called user context.

So i created a button and calling the javascript function callwebservice which in turn calls the web service web method.

<%@ 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></title>
        <script language=javascript>
            function callwebservice() {
                TestService.TestWebService("Pavan", onSuccess, onFailure);
            }
            function onSuccess(result) {
                alert(result);
            }
            function onFailure(result) {
                alert("There is an error");
            }

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:ScriptManager ID="scriptmanager1" runat=server>
    <Services>
    <asp:ServiceReference Path="~/TestService.asmx" />
    </Services> 
     <asp:ServiceReference Path="~/TestService1.asmx" />
    </asp:ScriptManager>
    <input type="button" id="btn1" runat="server" value="Button" name="Button" onclick="callwebservice()"/>

    </div>
    </form>
</body>
</html>

About these ads

Written by pavanarya

December 23, 2011 at 5:10 pm

Posted in Ajax, Asp.net

7 Responses

Subscribe to comments with RSS.

  1. [...] In my previous post we saw how to call a web service from the java script . [...]

  2. [...] <%@ Control Language="C#" AutoEventWireup="true" CodeFile="TestUserControl.ascx.cs" Inherits="TestUserControl" %> <div> <asp:ScriptManagerProxy ID="stock" runat=server> <Services> <asp:ServiceReference Path="~/ServiceUsedInChildControl.asmx" /> </Services> </asp:ScriptManagerProxy> <input type=text id="stk" runat=server /> <input type=button id="button3" runat=server onclick="CallWSFromJS()" /> <script language=javascript> function CallWSFromJS() { var val = document.getElementById("<%= stk.ClientID %>").value; ServiceUsedInChildControl.HelloWorld(val, onSuccess, onFailure); } function onSuccess(result) { alert(result); } function onFailure(result) { } </script> </div> This user control contains a text box, a button, and some javascript. Scriptmanagerproxy is used to add service reference to “ServiceUsedInChildControl.asmx” which is used only by this user control. From javascript code we are calling the web service. To know more about how to call javascript from web service see this post. [...]

  3. [...] make use of Ajax tool kit provided by microsoft. You can see my previous post that makes use of ScriptManager class provided by Microsoft .Net Framework to call web services from [...]

  4. Hi, This is really a nice article. Using ScriptManager is a really good thing for accessing WS in java script. But, what happens if the script manager is added in the master page, then in all those pages which uses that master page tend to have the signature and comments of the Web methods or the page methods. So, which increases the size of the page while we can avoid this. So, to reduce the size of the page and being able to access the WS/page methods from the javascript use ScriptManagerProxy. For more information contact me at bishnu.panigrahi@gmail.com.

    Bishnu

    June 17, 2012 at 5:25 am

  5. What’s Taking place i am new to this, I stumbled upon this I’ve discovered It positively helpful and it has aided me out
    loads. I am hoping to give a contribution & aid other users like its aided me.
    Great job.

    Morgan

    January 17, 2013 at 9:55 am


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 68 other followers

%d bloggers like this: