Wednesday, December 14, 2011

PageMethods undefined,MasterPage PageMethods

ScriptManager and MasterPage PageMethods !

I know that this subject has been asked many times therefore i would like to summarize it and give a small tutorial about how to do it.
I had some PageMethods on a default page which calls some web methods on code behind of the page. Before 1 week we decided to change the old structure of the project UI to use MasterPage. MaterPage triggered many problems with it, one of these problems that MasterPage does not support JS PageMethods! because MasterPage does not inherit from Web.UI.Page therefore you can not call PageMethods (its not a page!) – you can not call pagemethods on usercontrols too – so handle this problem and call your methods you can try this tutorial;
  • Create a MasterPage and add a ScriptManager on page.
  • On ScriptManager add the folowings
       1:  <asp:ScriptManager ID="ScriptManager" runat="server"
       2:          LoadScriptsBeforeUI="true" 
       3:         <Scripts>
       4:              <asp:ScriptReference 
                          Path="~/Javascript/MasterPageWSJS.js" />
       5:          </Scripts>
       6:          <Services>
       7:              <asp:ServiceReference 
                           Path="~/WebServices/MasterPageWS.asmx" />
       8:          </Services>
       9:      </asp:ScriptManager>
        Here we have 2 important sections
                   - Scritps which includes our JS file location
                   - Sevices which includes our Webservices location
       Here to be mentioned that EnablePageMethods attribute means nothing on MasterPages!.
  • Add a javascript file to the project ( here its  MasterPageWSJS.js)
       1:  function CallService() {
       2:  //CallFromMasterJS() is the name of the service method
       3:            MasterPageWS.CallFromMasterJS();
       4:    }
  • Add a Webservice file to the project (here it is MasterPageWS.asmx)
       1:  <%@ WebService Language="C#" Class="MasterPageWS" %>
       3:  using System;
       4:  using System.Web;
       5:  using System.Web.Services;
       6:  using System.Web.Services.Protocols;
       7:  using System.Web.Script.Services;
       9:  [WebService(Namespace = "")]
      10:  [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
      11:  [ScriptService]
      12:  public class MasterPageWS : System.Web.Services.WebService
      13:  {
      15:      [WebMethod(EnableSession = true)]
      16:      public void CallFromMasterJS()
      17:      {
      18:   // todo: write the needed codes
      19:      }
      20:  }
Here some important notes about the service:
- decorate the service class with [ScriptService]
- Decorate your methods with [WebMethod] add if you want to use
session variables with it decorate it with
[WebMethod(EnableSession = true)] because webservices are
stateless by default
  • at the end add this code lines to your MasterPage codebehind:
       1:  if(!IsPostBack)
       2:  {
       3:  // masterBody is the ID of the masterpage body html tag       
            HtmlGenericControl body = 
       4:          body.Attributes.Add("onunload", "CallService();");
       5:  }
That is all !. when you start your page and refresh it the master page will unloaded and that will fire the event onunload on the page body which will call the JS and from there the web service will be called.

Source:  Click here


  1. I need for this MasterPageWSJS.js . I do not have this js. Pls share

  2. This comment has been removed by the author.

  3. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a .Net developer learn from Dot Net Online Training from India. or learn thru ASP.NET Essential Training Online . Nowadays Dot Net has tons of job opportunities on various vertical industry.
    JavaScript Online Training from India