If you have a ASP .NET web application with a master page and a content page and you want a LinkButton to update a label with AJAX, you can use the Telerik R.A.D. controls:
Web.config
configuration > system.web > pages > controls should contain:
<add tagPrefix="telerik" namespace="Telerik.Web.UI" assembly="Telerik.Web.UI" />
configuration > system.web > httpHandlers should contain:
<add path="Telerik.Web.UI.WebResource.axd" type="Telerik.Web.UI.WebResource" verb="*" validate="false" />
configuration > system.webServer > handlers should contain:
<add name="Telerik_Web_UI_WebResource_axd" path="Telerik.Web.UI.WebResource.axd" type="Telerik.Web.UI.WebResource" verb="*" preCondition="integratedMode,runtimeVersionv2.0" />
Project
Should reference Telerik.Web.UI
Master page
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Test.master.cs" Inherits="Rvl.HelperTools.Website.Test" %> <!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>Ajaxification with Telerik</title> <!-- Use a contentplaceholder in the head, for adding styling from within the user controls --> <asp:ContentPlaceHolder ID="head" runat="server"/> </head> <body> <form id="mainForm" runat="server"> <div> <asp:ScriptManager ID="scriptManager" runat="server" /> <!-- One RadAjaxManager for all content pages that use this master page --> <telerik:RadAjaxManager ID="ajaxManager" runat="server" /> <!-- The skin should be set, else the loading panel is not shown --> <telerik:RadAjaxLoadingPanel ID="radAjaxLoadingPanel" runat="server" BackgroundPosition="Center" Skin="Default" /> <asp:ContentPlaceHolder ID="mainContent" runat="server" /> </div> </form> </body> </html>
Content page (aspx)
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestContent.aspx.cs" Inherits="Rvl.HelperTools.Website.TestContent" MasterPageFile="~/Test.Master" %> <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> <!-- Add a css class to the head of the master page --> <style type="text/css"> .ViewPanel { height: 75px; } </style> </asp:Content> <asp:Content ID="MainContent" ContentPlaceHolderID="mainContent" runat="server"> <!-- Use the RadAjaxManagerProxy instead of the RadAjaxManager on content pages –>
<!-- Use the RadAjaxLoadingPanel on the master page --> <telerik:RadAjaxManagerProxy ID="ajaxManagerProxy" runat="server"> <AjaxSettings> <telerik:AjaxSetting AjaxControlID="changeLinkButton"> <UpdatedControls> <telerik:AjaxUpdatedControl ControlID="viewPanel" LoadingPanelID="radAjaxLoadingPanel" /> </UpdatedControls> </telerik:AjaxSetting> </AjaxSettings> </telerik:RadAjaxManagerProxy> <asp:Panel ID="viewPanel" runat="server" CssClass="ViewPanel"> <asp:Label ID="changeLabel" runat="server" Text="Default text"></asp:Label> </asp:Panel> <asp:Panel ID="actionPanel" runat="server"> <asp:LinkButton ID="changeLinkButton" runat="server" onclick="ChangeLinkButton_Click">Change</asp:LinkButton> </asp:Panel> </asp:Content>
Content page (.cs)
using System; using System.Threading; namespace Rvl.HelperTools.Website { public partial class TestContent : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void ChangeLinkButton_Click(object sender, EventArgs e) { string textChanged = "Text changed"; string textChangedAgain = "Text changed again"; string currentText = string.Format("{0}", changeLabel.Text); if (currentText.Equals(textChanged)) { changeLabel.Text = textChangedAgain; } else { changeLabel.Text = textChanged; } } } }