Using _AjaxRequest From Clientside to update a label with a masterpage

4 posts, 0 answers
  1. Adam Pehas
    Adam Pehas avatar
    4 posts
    Member since:
    Jul 2012

    Posted 13 Apr 2012 Link to this post

    I'm trying to find the best way to make an _AjaxRequest fired from client side java script update select controls on my page that has a masterpage.  The control may also be within a user control.  

    Currently I have a master page with an AjaxManager on it as follows:

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" ClientIDMode="Static"
           RequestQueueSize="1" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
           <ClientEvents OnRequestStart="requestStart" />
       </telerik:RadAjaxManager>

    I then have a aspx page using the master page my aspx page has a ajaxmanager proxy on it. On the aspx page I have a radbutton that will call a java script function to make an ajaxrequest as follows:
    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
        <telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">
        </telerik:RadAjaxManagerProxy>
        <telerik:RadCodeBlock runat="server">
            <script type="text/javascript">
                // Ajax Request
                function CallJSFileInitAjaxRequestFromButtonPress()
                {
                    // alert('Start Request');
                    initAjaxRequest("Pressed");
                    // alert('End Request');
                }
     
    function initAjaxRequest(RequestType)
    {
            $find("RadAjaxManager1").ajaxRequest(RequestType);
    }
            </script>
        </telerik:RadCodeBlock>
        <telerik:RadButton ID="RadButton1" runat="server" Text="Click Me" OnClientClicking="CallJSFileInitAjaxRequestFromButtonPress">
        </telerik:RadButton>
        <asp:Label ID="lblUpdate" runat="server" Text="Loaded..."></asp:Label>
    </asp:Content>

    Everything works and the server side code will get called and I attempt to update the label lblupdate.  The problem is that it will not update the browser.  I was able to get this to work without a master page but when I put the masterpage in the screen will not refresh.  

    From my codebehind I'm adding the ajaxsetting:
    Telerik.Web.UI.RadAjaxManager myManager;
    myManager = (Telerik.Web.UI.RadAjaxManager)Page.Master.FindControl("RadAjaxManager1");
    myManager.AjaxSettings.AddAjaxSetting(Page.Master.FindControl("RadAjaxManager1"), Page.Master.FindControl("MainContent").FindControl ("lblUpdate"));


  2.
  3. Iana Tsolova
    Admin
    Iana Tsolova avatar
    3388 posts

    Posted 16 Apr 2012 Link to this post

    Hi Adam,

    Could you please confirm that the Page ClientId mode is set to AutoID?
    Additionally, where are you adding the ajax settings? I suggest that you do it in the aspx page code behind as below:
    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
        Dim ajaxManager As RadAjaxmanager = RadAjaxManager.GetCurrent(Page)
        ajaxManager.AjaxSettings.AddAjaxSetting(ajaxManager, lblUpdate)
    End Sub


    Regards,
    Iana Tsolova
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  5. Adam Pehas
    Adam Pehas avatar
    4 posts
    Member since:
    Jul 2012

    Posted 16 Apr 2012 Link to this post

    I checked and the clientIDMode is set to AutoID.  I made a new master page and test page and I'm not sure what I'm missing to refresh the label on the client side.  Below is the simple example that I created :

    Master Page .ASPX
    <%@ Master Language="C#" AutoEventWireup="true" CodeFile="TestingAjaxMAsterPage.master.cs"
        Inherits="TestingAjaxMAsterPage" ClientIDMode="AutoID" %>
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
        <asp:ContentPlaceHolder ID="head" runat="server">
        </asp:ContentPlaceHolder>
        <script type="text/javascript">
            // Ajax Request
            function CallJS()
            {
                ctl00_RadAjaxManager1.ajaxRequest("Pressed");
            }
             
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            </telerik:RadScriptManager>
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest"
                ClientIDMode="AutoID">
            </telerik:RadAjaxManager>
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
        </div>
        </form>
    </body>
    </html>


    Master Page Code Behind:
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Telerik.Web.UI;
     
    public partial class TestingAjaxMAsterPage : System.Web.UI.MasterPage
    {
      protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
        {
            this.Page.GetType().InvokeMember("Press", System.Reflection.BindingFlags.InvokeMethod, null, this.Page, null);
             
        }
    }

    public void Press()


    Sample Page .ASPX:
    <%@ Page Title="" Language="C#" MasterPageFile="~/TestingAjaxMAsterPage.master" AutoEventWireup="true"
        CodeFile="TestingAjax.aspx.cs" Inherits="TestingAjax" ClientIDMode="AutoID" %>
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
        
        <telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">
        </telerik:RadAjaxManagerProxy>
            
        <telerik:RadButton ID="RadButton1" runat="server" Text="Update Label" OnClientClicked="CallJS">
        </telerik:RadButton>
              
        <br />
        <asp:Label ID="lblUpdate" runat="server" Text="Label"></asp:Label>
    </asp:Content>


    Sample Page Code Behind:
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Telerik.Web.UI;
     
     
    public partial class TestingAjax : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            
                RadAjaxManager ajaxManager = RadAjaxManager.GetCurrent(Page);
                ajaxManager.AjaxSettings.AddAjaxSetting(ajaxManager, lblUpdate);
          
        }
     
        public void Press()
        {
            lblUpdate.Text = "TEST";
        }
    }

    public void Press() gets called from the button press but the label "lblUpdate" does not get refreshed on the 
client side.
  7. Iana Tsolova
    Admin
    Iana Tsolova avatar
    3388 posts

    Posted 21 Apr 2012 Link to this post

    Hello Adam,

    The problem with this implementation is that when you click the button, the ajax request is performed, but after that the RadButton click event is performed. Thus the ajax request is aborted. To overcome this issue, try modifying the client function as below and call it on the OnClientClicking event of the RadButton:
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            // Ajax Request
            function CallJS(sender, eventArgs) {
                eventArgs.set_cancel(true);
                $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("Pressed");
            }
        </script>
    </telerik:RadCodeBlock>
    <telerik:RadButton ID="RadButton1" runat="server" Text="Update Label" OnClientClicking="CallJS">
    </telerik:RadButton>

    Or the easier approach is to directly ajaxify the RadButton. See the attached sample illustrating the approach.

    Greetings,
    Iana Tsolova
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top