Xafari MVC. CallbackPanel Example

This section describes how to add CallbackPanel control to the Main Demo. For this purpose, you will implement footer that displays name of the current window. Used View templates are located in the Views/MVCx/Shared/FrameTemplates/Vertical folder.

Invoke Main Demo solution and execute the following steps:

1. Create View template, name it _CallbackPanelFooter.cshtml, replace file content with the following code:

  • example

@using System.Web.UI.WebControls
 @using Xafari.Mvc
 @using Xafari.Mvc.MVCx

 @model Xafari.Mvc.Templates.MvcWindowTemplate

 @Html.DevExpress().CallbackPanel(settings =>
 {
     settings.Name = ViewData.Frame().ControlId("FooterCallbackPanel");
     settings.Width = Unit.Percentage(100);
     settings.Height = Unit.Percentage(100);
     settings.CallbackRouteValues(Html);
     settings.SetContent(() =>
     {
         ViewContext.Writer.Write(Model.Caption);
     });
 }).GetHtml()

The template creates the CallbackPanel control that will displays the caption of the current window.

2. Modify _Main.cshtml file, add FooterCallbackPanel element to the DependentContainers list. The code snippet below demonstrates this:

  • example

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

If user change the View, the dependent containers to be updated.

3. Modify _Main.cshtml file by adding the code that defines the additional pane under the FooterPane.

  • example

settings2.Panes.Add(pane =>
         {
             pane.Name = ViewData.Frame().ControlId("UnderFooterPane");
             pane.PaneStyle.Border.BorderStyle = BorderStyle.None;
             pane.PaneStyle.CssClass = "BodyBackColor";
             pane.MinSize = Unit.Pixel(20);
             pane.AutoHeight = true;
             pane.SetContentRelativePartialView(Html, "_CallbackPanelFooter");
         });

4. Run Main Demo, invoke Department Detail View and see the bottom of the page:

mvc_19