pavanarya

Let us share the knowledge

ScriptManagerProxy And Its Usage

with 4 comments

Hi,
I my previous posts i am wrote about “ScriptManager” class and its different uses like injecting java script code on demand ,Calling web service and code behind files method from java script.

Now in this post i want to explain you about another beautiful class “ScriptManagerProxy”.

ScriptManagerProxy performs to some extent similar kind of tasks that ScriptManager class does. Like it is also used to call web services from javascript by adding service references, adding javascript files using script references.
Note: ScriptManagerProxy doest perform all the tasks that ScriptManager does. But ScriptManger can performs tasks that ScriptManagerProxy does.

So what is the reason for adding this particular class.

When to Use ScriptMangerProxy

ScriptManagerProxy is used to add services and scripts to content pages or usercontrols when ScriptManager is already defined in the parent page that uses these usercontrols or contentpage.

Suppose i am having following controls with me
1.An aspx page(Default.aspx).
2.2 user controls(TestUserControl.ascx,TestUserControl2.ascx)
3.2 different web service(ServiceUsedInChildControl.asmx,webservice2.asmx)
4. a javascript file(Main.js).

Default.aspx :

<%@ 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>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:ScriptManager ID="a1" runat=server>
    <Scripts>
    <asp:ScriptReference Path="~/JS/Main.js" />
    </Scripts>
    </asp:ScriptManager>
    Enter Number1 :<input type=text id="txt1" runat=server />
    Enter Number2 :<input type=text id="txt2" runat=server />
    <input type=button id="btn1" name="Button1" value="Button1" onclick="RootPage()" />
    </br>
    </br>
    <asp:Button ID="serverbutton1" runat=server Text="LoadUserControl1" OnClick="LoadUserControl1" />
    <asp:Button ID="serverbutton2" runat=server Text="LoadUserControl2" OnClick="LoadUserControl2" />
    </div>
    </form>
</body>
</html>

In my Default.aspx initially i am referring to the "Main.Js" file using

I am having 2 text boxes and a button(Button1). Onclick event of the button calls javascript function RootPage() defined in the Main.Js

Main.Js:

function RootPage() {
    var txt1value = parseInt(document.getElementById('txt1').value);
    var txt2value = parseInt(document.getElementById('txt2').value);
    result = txt1value + txt2value;
    alert("Hai this is main page javascript and the addition value is" +result);
}

I am having 2 asp.net button controls LoadUserControl1 and LoadUserControl2. onclick event of these 2 buttons will execute the functions LoadUserControl and LoadUserControl2 events in default.aspx.cs file. These function are used to load User Controls dynamically.

Default.aspx.cs :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }
    protected void LoadUserControl1(object sender, EventArgs e)
    {
        UserControl u = new UserControl();
        Control usercontrol1 = u.LoadControl("~/TestUserControl.ascx");
        this.Page.Controls.Add(usercontrol1);
    }
    protected void LoadUserControl2(object sender, EventArgs e)
    {
        UserControl usrcontrol = new UserControl();
        Control usercontrol1 = usrcontrol.LoadControl("~/TestUserControl2.ascx");
        this.Page.Controls.Add(usercontrol1);
    }
}

Onclick event of LoadUserControl1 adds UserControl "TestUserControl.ascx" dynamically and Onclick event of LoadUserControl2 adds UserControl "TestUserControl2.ascx" dynamically.

Now Coming to usercontrols :

TestUserControl.ascx

<%@ 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.

So here instead of using ScriptManagerProxy if we use scriptmanager then it is going to throw an exception.
ServiceUsedInChildControl.asmx :

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

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

    public ServiceUsedInChildControl () {

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

    [WebMethod]
    public string HelloWorld(string val) {
        return "Hi "+val+" this web service is used only from user control1 TestUserControl1.ascx";
    }
    
}

TestUserControl2.ascx

Even this usercontrol performs the same task as TestUserControl does and the difference is it is making use of "WebService2.asmx". Where as TestUserControl uses ServiceUsedInChildControl.asmx

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="TestUserControl2.ascx.cs" Inherits="TestUserControl2" %>
<div>
<asp:ScriptManagerProxy ID="stock" runat=server>
<Services>
<asp:ServiceReference Path="~/WebService2.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;
        WebService2.HelloWorld(val, onSuccess, onFailure);
    }
    function onSuccess(result) {
        alert(result);
    }
    function onFailure(result) {
    }
</script>
</div>



WebService2.asmx :

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

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

    public WebService2 () {

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

    [WebMethod]
    public string HelloWorld(string value) {
        return "Hello "+value+" this si usercontrol2";
    }
    
}

Key Points that made me to use ScriptManagerProxy in above code

1.In Default.aspx we declared a scriptmanager and in the usercontrols we added scriptmanagerproxy.

2.In Default.aspx scriptmanager we added reference for Main.js. In user controls scriptmanagerproxy we are adding service reference to 2 web services.

3.Main reason for adding scriptmanagerproxy in usercontrols is we cannot have scriptmanager 2 times.In our case we are already having scriptmanager in default.aspx so for sure we should have scriptmanagerproxy in these user controls.

4. We can eliminate the usage of scriptmanagerproxy in the usercontrols and we can add those service references to the scriptmanager defined in the default.aspx. But let us assume that if client is not at all clicking on the "LoadUserControl2" button and their by not loading the TestUserControl2.ascx. Then it is waste of resources to load WebService2.asmx by adding it to the scriptmanager in default.aspx.

So if we don't want to load specific scripts or services on all the pages that include a particular scriptmanager then we can remove them from scriptmanager and we can add them to the individual pages or usecontrols by using scriptmanagerproxy.

About these ads

Written by pavanarya

December 26, 2011 at 4:16 pm

Posted in Ajax, Asp.net

Tagged with

4 Responses

Subscribe to comments with RSS.

  1. Its really a very good post.. which explains the usage of ScriptManagerProxy class ……. Thnx a lot

    Prajakta

    January 24, 2012 at 10:21 am

    • good example… thnx :)

      Preeti

      December 5, 2012 at 10:27 am

  2. Thats grte…

    Abid Mahmood

    December 9, 2012 at 11:51 pm

  3. Great example and explanation :)

    Vikam Jain

    November 24, 2013 at 1:44 pm


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: