Xafari MVC. CallbackPanel

ASPxCallbackPanel is a control represents a container area, it is provided by the DevExpress ASP.NET library. The control implements a comprehensive client-side and server-side functionality to enable updating its content on demand via callbacks. That, in turn, allows to avoid reloading the web page entire. When send a callback to the server, the CallbackPanel’s content continues to be visible. While waiting for a callback response it is possible to display Loading Panel and Loading Div elements above the control. To define the appearance and functionality of a Loading Panel, use LoadingPanel and SettingsLoadingPanel properties. To define the style of a Loading Div, use LoadingDiv property.

This topic describes the general principles and example of using CallbackPanel on the Xafari MVC platform.

1. Java Script on the client side perform callbacks to the server, the code snippet below demonstrates refreshView function with PerformCallback method:

  • example

window.xafari.refreshView = function refreshView(hash, newWindowUrl) {
  window.setTimeout(function(){ window.c606152247.PerformCallback(); }, 1);
  window.setTimeout(function(){ window.c1745361099.PerformCallback(); }, 1);
  xafari.UpdateDocumentLocation(hash, newWindowUrl);
 }

In code above, two elements of the CallbackPanel perform callbacks. This code is generated automatically when creating a CallbackPanel in the View template.

2. There is a specificity in the implementation dependent panels. The code below defines the dependent containers that should perform a callback to the server and be updated:

  • example

@Html.Xafari().ShowViewStrategy().DependentContainers(new[] { ViewData.Frame().ControlId("ViewSiteCallbackPanel") }).GetHtml()

ViewSiteCallbackPanel control must be implemented in the View templates in following the manner:

  • example

@Html.DevExpress().CallbackPanel(settings =>
 {
  settings.Name = ViewData.Frame().ControlId("ViewSiteToolbarCallbackPanel");
  settings.ShowLoadingPanel = true;
  settings.Width = Unit.Percentage(100);
  settings.Height = Unit.Percentage(100);
  settings.CallbackRouteValues(Html);
  settings.SetContentRelativePartialView(Html, "_CallbackPanelContent");
 }).GetHtml()

The code above defines that content for the Callback Panel is specified in the _CallbackPanelContent View template, code snippet below shows this content:

  • example

@Html.Xafari().ActionContainerHolder(
  settings =>
  {
          settings.Name = ViewData.Frame().ControlId("Toolbar");
          settings.FrameTemplate = Model;
          settings.Containers = "ObjectsCreation;Edit;RecordEdit;View;Export;Reports;Filters;Actions";
          settings.ContainerStyle = ActionContainerStyle.ToolBar;
          settings.CssClass = "ToolBar";
          settings.MenuStyle.BorderTop.BorderStyle = BorderStyle.None;
          settings.MenuStyle.BorderLeft.BorderStyle = BorderStyle.None;
          settings.MenuStyle.BorderRight.BorderStyle = BorderStyle.None;
  }).GetHtml()