Introduction To Asp .Net Ajax 3 (ScriptManagerProxy)


“ScriptManagerProxy Class enables nested components such as content pages and user controls to add script and service references to pages when a ScriptManager control is already defined in a parent element.”
Source: http://msdn.microsoft.com/en-us/library/system.web.ui.scriptmanagerproxy.aspx

As you may know by now the ScriptManager manages all resource of Asp .Net Ajax. ScriptManager is a must have control to enable Ajax functionality.
We can include service and Javascript reference inside ScriptManager.

However Asp .Net enables only one ScriptManager component at a page. If you need to add another reference then use ScriptManagerProxy instead.
This is useful when you put ScriptManager at MasterPage and then you can extend custom functionallity using ScriptManagerProxy i.e to add Ajax Client Js File in your content page.
You can have reference to common Ajax Js script or web service at MasterPage and then you add custom Js script inside your specific custom page.
Also this ScriptManagerProxy avoid wasteful resource by referencing only a web service or script that needed by a page. Not all reference is included in ScriptManagerProxy, we have only common reference in Parent ScriptManager.

I give you an example of making above scenario using ScriptManagerProxy in this post. I create a master page containing ScriptManager component that reference to a web service.
This web service will return a product stock qty balance. Also I have a content page that shows product stock using ScriptManagerProxy that reference to Js script to access the web service method.

Example

  1. Open VS Web Developer and create a MasterPage file (MasterPage.Master):
    <%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>
    
    <!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>Stock Balance</title>
        <asp:ContentPlaceHolder id="head" runat="server">
        </asp:ContentPlaceHolder>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
        <Services>
            <asp:ServiceReference Path="~/Stock.asmx" />
        </Services>
        </asp:ScriptManager>
        <div>
        <table>
            <tr><td style="background-color:Green"><h2 style="color:White">Stock Balance</h2></td></tr>
            <tr><td><asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
                  </asp:ContentPlaceHolder></td></tr>
        </table>
            
        </div>
        </form>
    </body>
    </html>
    

    In this MasterPage I have ScriptManager that reference a Web Service to Stock.asmx. This Web Service is a common reference to all custom stock balance page.

  2. Add new item and choose Web Service. Name it as Stock.asmx:
    Imports System.Web
    Imports System.Web.Services
    Imports System.Web.Services.Protocols
    
    ' 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 Stock
        Inherits System.Web.Services.WebService
    
        <WebMethod()> _
        Public Function GetProductStock() As Dictionary(Of String, Integer)
         
            Dim balance As New Dictionary(Of String, Integer)
            balance.Add("bike", 100)
            balance.Add("accessories", 2300)
            balance.Add("eyeglasses", 50)
            balance.Add("spareparts", 1200)
            Return balance
        End Function
    
    End Class
    

    I have a function GetProductStock() to return value of stock balance by a key. This returned Dictionary class instance will be accessed by client Javascript as an array later on.
    If you do not have experience about coding a Web Service then scroll to the end of this post to get links explaining about Asp.Net Ajax and Web Service.

  3. Add new item, Web form and tick select MasterPage checkbox. This web form file is become Content Page:
    <%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
    
    <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
        <asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">
        <Scripts>
            <asp:ScriptReference Path="~/JScript.js" />
        </Scripts>
        </asp:ScriptManagerProxy>
        Bike: <span id="bike"></span> <br />
        Accessories: <span id="accessories"></span><br />
        EyeGlasses: <span id="eyeglasses"></span><br />
        SpareParts: <span id="spareparts"></span><br />
    </asp:Content>
    

    I included ScriptManagerProxy control to reference a Js file. This reference only needed for this specific content page and the Js script will write a stock qty balance to each of span elements.

  4. Add new item, JScript File. Name it as JScript.js:
    var stockProxy;
    var spanBike;
    var spanAccessories;
    var spanEyeGlasses;
    var spanSpareParts;
    var arrspan;
    var spantemp;
    var spanCounter;
    
    function pageLoad() {
        stockProxy = new Stock();
        stockProxy.set_defaultSucceededCallback(stock_success_callback);
        stockProxy.set_defaultFailedCallback(stock_failed_callback);
    
        spanBike = $get("bike");
        spanAccessories = $get("accessories");
        spanEyeGlasses = $get("eyeglasses");
        spanSpareParts = $get("spareparts");
    
        spanBike.innerHTML = "Loading Balance ..";
        spanAccessories.innerHTML = "Loading Balance ..";
        spanEyeGlasses.innerHTML = "Loading Balance ..";
        spanSpareParts.innerHTML = "Loading Balance ..";
    
        arrspan = new Array;
        spanCounter = 0;
        setTimeout("get_stockbalance()", 700);
    
    }
    
    function get_stockbalance() {
        
        var result = stockProxy.GetProductStock();    
    }
    
    function stock_success_callback(response) {
    
        spanBike.innerHTML = response["bike"]; 
        spanAccessories.innerHTML = response["accessories"]; 
        spanEyeGlasses.innerHTML = response["eyeglasses"]; 
        spanSpareParts.innerHTML = response["spareparts"];
    }
    
    function stock_failed_callback(error, userContext, methodName) {
        if (error !== null) {
            alert("An error occured: \n" + error.get_message());
        }
    
    }
    
    if (typeof (Sys) !== "undefined") Sys.Application.notifyScriptLoaded();
    

    At page load this Js script declare a Web Service class and call its method. I also register success and failed callback of executing web service’s method.
    $get() method used to refer to each span element and they will have dummy ‘Loading ..’ text to indicate server process. $get is a Ajax client library short notation for document.getElementById.
    If web service’s method successfully returning a value which is Dictionary type on Server side script then Js using it as an Array. Just use appropriate key to get each array member value.

  5. Done.

Screen shot:

Related articles:

  1. https://gugiaji.wordpress.com/2012/02/06/introduction-to-asp-net-ajax-scriptmanager-updatepanel-contenttemplate-triggers
  2. https://gugiaji.wordpress.com/2012/02/23/introduction-to-asp-net-ajax-2-updateprogress
  3. https://gugiaji.wordpress.com/2012/04/05/quickly-mastering-create-and-use-asp-net-web-service-from-basic-database-access-to-ajax-enabled
  4. https://gugiaji.wordpress.com/2012/05/28/introduction-to-asp-net-ajax-client-side-development-get-addhandler-removehandler-sys-application-sys-webforms-sys-net
  5. Cheers,
    Agung Gugiaji

    Advertisements

One response to “Introduction To Asp .Net Ajax 3 (ScriptManagerProxy)

  1. Pingback: Introduction To Asp .Net Ajax 4 (Timer) | Enlighten Application Developer Journals

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