CallbackPanel

  • 2 min to read

The CallbackPanel extension is essentially a container with a built-in AJAX callback functionality that allows you to update its content without performing a postback. This extension exposes a client method that initiates a callback and passes arbitrary data to the server. The callback can then be processed on the server side either in the corresponding Controller action method (that handles a callback request) or by using a custom handler method (which can be referenced via a specially designed server-side property). After the required server-side processing is done, CallbackPanel content is updated automatically.

To learn more about CallbackPanel and see it in action, refer to its online demos.

Implementation Details

CallbackPanel is realized by the CallbackPanelExtension class. Its instance can be accessed via the ExtensionsFactory.CallbackPanel helper method, which is used to add a CallbackPanel extension to a view. This method's parameter provides access to the CallbackPanel's settings, implemented by the CallbackPanelSettings class, allowing you to fully customize the extension.

CallbackPanel's client counterpart is represented by the MVCxClientCallbackPanel object.

Declaration

A CallbackPanel can be added to a view in the following manner:

View code - "Index" (ASPX):

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

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <% 
        Html.RenderPartial("CallbackPanelPartial");
    %>
</asp:Content>

View code - "Index" (Razor):

@Html.Partial("CallbackPanelPartial")

PartialView code - "CallbackPanelPartial" (ASPX):

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>

<% 
    Html.DevExpress().CallbackPanel(
        settings => {
            settings.Name = "callbackPanel";
            settings.CallbackRouteValues = new { Controller = "Home", Action = "CallbackPanelPartial" };
            settings.SetContent(() => 
            {%>
                <div>some content</div>
            <%});
        }
    )
    .Render();
%>

PartialView code - "CallbackPanelPartial" (Razor):

@Html.DevExpress().CallbackPanel(
    settings => {
        settings.Name = "callbackPanel";
        settings.CallbackRouteValues = new { Controller = "Home", Action = "CallbackPanelPartial" };
        settings.SetContent(() => 
        {
            ViewContext.Writer.Write("<div>some content</div>");
        });
    }).GetHtml()

Controller code - "HomeController":

    public class HomeController : Controller {

        public ActionResult Index() {
            return View();
        }

        public ActionResult CallbackPanelPartial() {
            return PartialView("CallbackPanelPartial");
        }

    }
Note

The Partial View should contain only the extension's code.