Using Update panel in Sitefinity - Part 2

Using Update panel in Sitefinity - Part 2

Posted on May 19, 2012 0 Comments

The content you're reading is getting on in years
This post is on the older side and its content may be out of date.
Be sure to visit our blogs homepage for our latest news, updates and information.

Let's start with a little introduction on what the UpdatePanel is and how it can help you achieve a wide range of scenarios.

The UpdatePanel is a server control, which allows you to refresh selected parts of the page instead of refreshing the whole page with a postback. It enables a web page to participate in partial-page updates without writing any client script. Moreover, when you use an UpdatePanel control, the page behavior is browser independent and can potentially reduce the amount of data that is transferred between client and server. When partial-page updates are enabled, controls can asynchronously post to the server. An asynchronous postback behaves like a regular postback in that the resulting server page executes the complete page and control life cycle. However, with an asynchronous postback, page updates are limited to regions of the page that are enclosed in UpdatePanel controls and that are marked to be updated. This behavior makes a Web page appear more interactive to the end user. For more information you can visit the MSDN UpdatePanel Overview page.

Now let's get back to UpdatePanel and its use in Sitefinity. A few months ago Teodor Georgiev made a blog post on how to use Update panel in Sitefinity. In it he modifies the update panel so that it works correctly on Sitefinity pages, by moving the logic of the OnInit event to the InitComplete event. This is done to make sure that a Script manager is available on the page when methods, which require it, are executed. The good news is that you don't need to do that anymore. In order to meet our clients' expectations we've included SitefinityUpdatePanel in the source of our system and now you are able to use it directly in your controls. The purpose of this blog post is to show you how this is done. You will find attached a very simple user control with update panel under my post. It consists of a SitefinityUpdatePanel and a label and button controls between the opening and closing tags of the panel. Note that in order to use the SitefinityUpdatePanel directly on the .ascx control, you should include the following tagprefix:

<%@ Register TagPrefix="sf" Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.PublicControls"%>

 

This way your application will look for the control in the Telerik.Sitefinity assembly. 

.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="AjaxTest.ascx.cs" Inherits="SitefinityWebApp.AjaxTest" %>
<%@ Register TagPrefix="sf" Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.PublicControls"%>
<sf:SitefinityUpdatePanel Id="SUP" runat="server"><ContentTemplate>
    <asp:Button Text="ClickME!" Id="Button1" runat="server" />
    <asp:Label Id="TestLabel" runat="server" />
</ContentTemplate></sf:SitefinityUpdatePanel>

Now if you look at the code-behind of the sample control, you will notice this attribute- [RequireScriptManager], which explicitly indicates that a ScriptManager should be included on the page, so that the control would work properly:

code-behind

namespace SitefinityWebApp
{
    [RequireScriptManager]
    public partial class AjaxTest : System.Web.UI.UserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Button1.Click += new EventHandler(Button1_Click);
        }
 
        void Button1_Click(object sender, EventArgs e)
        {
            Button1.Text = "I've been clicked!";
            TestLabel.Text = "Page was not refreshed!";
        }
    }
}

 The rest is nothing that would surprise you. On the Click event of our button, we change the text of the label and the button. Usually, this would cause a postback to the server and the whole page would get refreshed, but since we're using a SitefinityUpdatePanel, when the button is clicked, page updates will be limited to the regions of the page, enclosed by the update panel.

This is all you need to do to use the UpdatePanel. I truly hope that this improvement will help you get the best of developing with Sitefinity!

Download the sample from here.

progress-logo

The Progress Team

View all posts from The Progress Team on the Progress blog. Connect with us about all things application development and deployment, data integration and digital business.

Comments

Comments are disabled in preview mode.
Topics

Sitefinity Training and Certification Now Available.

Let our experts teach you how to use Sitefinity's best-in-class features to deliver compelling digital experiences.

Learn More
Latest Stories
in Your Inbox

Subscribe to get all the news, info and tutorials you need to build better business apps and sites

Loading animation