[ELMA3] Добавление вкладок в стандартный элемент "TabPanel"

В статье приведен пример добавления вкладки, формируемой на стороне сервера, в стандартный элемент TabPanel при помощи реализации точки расширения.

Пример отображения данных

Рис. 1. Добавленная вкладка с разметкой при помощи реализации точки расширения

Методы расширения (интерфейса)

Точка расширения (интерфейс) ITabProviderExtension имеет два основных метода:

public string IdTabPanal(HtmlHelper html) – определяет панель вкладок, для которой предназначено данное расширение, возвращаемое имя должно соответствовать уникальному имени панели вкладок.
publicIEnumerable<TabPanelItem> Items(HtmlHelper html) – определяет действия, которые необходимо произвести для построителя таблицы. В нашем примере добавляются вкладка, разметка которой определена файлом шаблона отображения. Для отображения вкладки также задействован метод контроллера, который формирует необходимую информацию.

Пример класса точки расширения

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 в контроллере Home
        TabIndex = 0, //Положение вкладки
        Selected = true, //По умолчанию вкладка - выбрана
        Text = SR.T("Вкладка первая") //Название вкладки
      };
    }
 
    public string IdTabPanal(HtmlHelper htmlHelper)
    {
      return "MyPanel"; //Идентификатор панели (Должен совпадать с идентификатором в представлении)
    }
  }
}

Примечание

Идентификатор панели IdTabPanal обязательно должен совпадать с идентификатором в вашем представлении (View), например, как указано ниже: TabPanel("MyPanel"), в противном случае на представлении будет отрисована только панель с идентификатором, указанным в представлении.

В данном примере используется ссылка на действие SelectedTabItem в контроллере Home, код которого приведен ниже.

Код контроллера HomeController.cs :

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

В приведенном примере контроллер возвращает представление SelectedTabItem.cshtml, в котором находится Ваша разметка. В примере использовалась следующая разметка:

<div>

Ваша разметка

</div>

Чтобы использовать данное расширение, необходимо добавить метод .UseTabProvider(true) при создании вкладок TabPanel("MyPanel") на Вашем представлении.

Пример использования на форме:

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

Примечание:

В разметке создается новая панель с вкладкой Вкладка, которая по умолчанию не выбрана (т.к. выбранная по умолчанию вкладка реализована при помощи точки расширения), разметка вкладки находится в представлении TabPanel.cshtml.

Ссылки на элементы API

ITabProviderExtension (для версии 3.13)