Callbacks

• Feb 02, 2023
• 2 minutes to read

The PageControl Extension supports AJAX with the ability to load page content from the server via a callback when the page becomes active. This approach allows PageControl to avoid the initial transfer of all its inactive pages, thus improving page load times.

To activate the use of callbacks, the PageControlSettings.CallbackRouteValues property should contain the path to an action that handles a callback request. The best way to handle such callbacks is to use a partial view that only contains a PageControl Extension.

Examples

The sample below demonstrates the use of the AJAX-based callbacks implemented by the MVC PageControl Extension. The callback processing is paused on the server side, so that the loading panel is visible during processing.

Partial View code (ASPX):

C#

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="indexContent" ContentPlaceHolderID="ContentHolder" runat="server">
    <% 
        Html.RenderPartial("CallbacksPartial");
    %>
</asp:Content>

Partial View code (Razor):

C#

@Html.Partial("CallbacksPartial")

View code (ASPX):

C#

<% 
    Html.DevExpress().PageControl(
        settings =>
        {
            settings.Name = "pcCallbacks";
            settings.CallbackRouteValues = new { Controller = "TabControl", Action = "CallbacksPartial" };
            settings.Width = 426;
            settings.Height = 353;
            settings.TabAlign = TabAlign.Justify;
            settings.TabPosition = TabPosition.Bottom;

            settings.TabPages.Add("Original").SetContent(() =>
            {%>
                <img alt="" src="<%= Url.Content("~/Content/TabControl/Hands/Original.jpg") %>" />
            <%});
            settings.TabPages.Add("Cross-Process").SetContent(() =>
            {%>
                <img alt="" src="<%= Url.Content("~/Content/TabControl/Hands/CrossProcess.jpg") %>" />
            <%});
            settings.TabPages.Add("Sepia").SetContent(() =>
            {%>
                <img alt="" src="<%= Url.Content("~/Content/TabControl/Hands/Sepia.jpg") %>" />
            <%});
            settings.ActiveTabIndex = 0;
        })
        .Render();
%>

View code (Razor):

C#

@Html.DevExpress().PageControl(
    settings =>
    {
        settings.Name = "pcCallbacks";
        settings.CallbackRouteValues = new { Controller = "TabControl", Action = "CallbacksPartial" };
        settings.Width = 426;
        settings.Height = 353;
        settings.TabAlign = TabAlign.Justify;
        settings.TabPosition = TabPosition.Bottom;

        settings.TabPages.Add("Original").SetContent(() =>
        {
            ViewContext.Writer.Write(
                "<img alt=\"\" src=\"" + Url.Content("~/Content/TabControl/Hands/Original.jpg") + "\" />"
            );
        });
        settings.TabPages.Add("Cross-Process").SetContent(() =>
        {
            ViewContext.Writer.Write(
                "<img alt=\"\" src=\"" + Url.Content("~/Content/TabControl/Hands/CrossProcess.jpg") + "\" />"
            );
        });
        settings.TabPages.Add("Sepia").SetContent(() =>
        {
            ViewContext.Writer.Write(
                "<img alt=\"\" src=\"" + Url.Content("~/Content/TabControl/Hands/Sepia.jpg") + "\" />"
            );
        });
        settings.ActiveTabIndex = 0;
    }).GetHtml()

Controller code:

C#

using System.Threading;
using System.Web.Mvc;
using DevExpress.Web.Mvc;

namespace DevExpress.Web.Demos {
    public partial class TabControlController: DemoController {
        public ActionResult Callbacks() {
            return DemoView("Callbacks");
        }
        public ActionResult CallbacksPartial() {
            if(DevExpressHelper.IsCallback)
                Thread.Sleep(1000);
            return PartialView("CallbacksPartial");
        }
    }
}