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 231 Views

Ajax

This is a migrated thread and some comments may be shown as answers.

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

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.

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">

<html xmlns="http://www.w3.org/1999/xhtml">

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

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