Adding tabs to the standard “TabPanel” element

This article describes adding a tab generated on the server end, to the standard “TabPanel” element, by using an extension point implementation.

Data display example

Fig. 1. A tab with a markup, added by using an extension point implementation

Extension (interface) methods

The ITabProviderExtension extension point (interface) has two main methods:

public string IdTabPanal(HtmlHelper html) – defines the tab panel, for which this extension is intended; the returned name has to correspond to the unique name of the tab panel.
publicIEnumerable<TabPanelItem> Items(HtmlHelper html) – defines the actions that have to be performed for the table builder. In this example, we add a tab, whose markup is defined by the view template file. Controller method, which generates all the necessary information, is used to display the tab.

Example of extension point class

using System.Collections.Generic;
using System.Web.Mvc;
using EleWise.ELMA;
using EleWise.ELMA.ComponentModel;
using EleWise.ELMA.Web.Mvc.ExtensionPoints;
using EleWise.ELMA.Web.Mvc.Html;
using EleWise.ELMA.Web.Mvc.Models.Selectors;
 
namespace ObjectIconModule.Web.ExtensionPoint
{
  [Component]
  public class TabProviderExtension : ITabProviderExtension
  {
    public IEnumerable<TabPanelItem> Items(HtmlHelper htmlHelper)
    {
      yield return new TabPanelItem
      {
        ContentUrl = htmlHelper.Url().Action("SelectedTabItem", "Home", RouteProvider.AreaName), //Ссылаемся на действие SelectedTabItem in the Home controller
        TabIndex = 0, //Tab position
        Selected = true, //The tab is selected by default
        Text = SR.T("First Tab") //Tab name
      };
    }
 
    public string IdTabPanal(HtmlHelper htmlHelper)
    {
      return "MyPanel"; //Panel ID (Has to coincide with the ID in the view)
    }
  }
}

Note

ID of the IdTabPanel panel has to coincide with the ID in your View, e.g. as in TabPanel("MyPanel"). Otherwise, only the panel with the ID specified in the view will be rendered.

In this example, we use a link to the SelectedTabItem action in the Home controller.

Code of HomeController.cs :

ContentItem]
public ActionResult SelectedTabItem()
{
   return PartialView();
}

In this example, the controller returns the SelectedTabItem.cshtml view, which contains your markup:

<div>

Your markup

</div>

To use this extension, you have to add the .UseTabProvider(true) method when creating TabPanel("MyPanel") tabs on your view.

Example of using it on a form:

@(TabPanel("MyPanel")
    .Items(tabstrip =>
    {
        tabstrip.Add(new EleWise.ELMA.Web.Mvc.Models.Selectors.TabPanelItem()
        {
            Text = SR.T("Tab"),
            Selected = false
        }).Content(
            @<div>
                 @Html.Partial("TabPanel")
             </div>
            );
    })
.UseTabProvider(true)
.Render()
)

Note

A new panel with the “Tab” tab is created. The tab is not selected by default (since the selected one is implemented with an extension point); the markup is in the TabPanel.cshtml view.

Links to API elements

ITabProviderExtension