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;
            }
        }
    }
}

Result

image

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.