Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Using _AjaxRequest From Clientside to update a label with a masterpage

3 Answers 136 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
Adam Pehas
Top achievements
Rank 1
Adam Pehas asked on 13 Apr 2012, 10:48 PM
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"));


3 Answers, 1 is accepted

Sort by
0
Iana Tsolova
Telerik team
answered on 16 Apr 2012, 01:51 PM
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.
0
Adam Pehas
Top achievements
Rank 1
answered on 16 Apr 2012, 10:51 PM
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.
0
Iana Tsolova
Telerik team
answered on 21 Apr 2012, 08:07 AM
AjaxifyRadButton.zip
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.
Tags
Ajax
Asked by
Adam Pehas
Top achievements
Rank 1
Answers by
Iana Tsolova
Telerik team
Adam Pehas
Top achievements
Rank 1
Share this question
or