ScriptManager Class For Calling WebServices From Javascript
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>
[...] In my previous post we saw how to call a web service from the java script . [...]
Calling Methods Present In The Code-behind File Using ScriptManager « pavanarya
December 24, 2011 at 1:01 pm
[...] <%@ 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. [...]
ScriptManagerProxy And Its Usage « pavanarya
December 26, 2011 at 4:16 pm
[...] 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 [...]
Calling a Web Service from Javascript using XMLHttpRequest « pavanarya
May 20, 2012 at 6:19 pm
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
Hi Bishnu i already wrote an extension article to scriptmanger that is scriptmanagerproxy long back….Url is http://pavanarya.wordpress.com/2011/12/26/scriptmanagerproxy-and-its-usage/
pavanarya
June 17, 2012 at 8:43 am
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
Thank you so much Morgan..
pavanarya
January 17, 2013 at 10:08 am