Piranha CMS 创建区域扩展

Question

我正在尝试在食人鱼 CMS 中创建一个新的区域扩展。

从长远来看，它会更复杂，但最初为了让它工作，我希望 tabcontainer 成为 HTML 区域的列表，以便我可以使用它来填充选项卡容器。这是我的 TabContainer 类和视图

TabContainer.cs

[Export(typeof(IExtension))]
[ExportMetadata("InternalId", "TabContainer")]
[ExportMetadata("Name", "Tab Region")]
[ExportMetadata("Type", ExtensionType.Region)]
[Serializable]
public class TabContainer : IExtension
{
    public IList<HtmlRegion> Items { get; set; }

    public TabContainer()
    {
        Items = new List<HtmlRegion>();
    }

    public virtual void Ensure(DataContext db) { }
    public virtual void Init(object model) { }
    public virtual void OnManagerSave(object model) { }
    public virtual void OnManagerDelete(object model) { }

    public void Ensure(object model) {}

    public virtual void InitManager(object model)
    {
    }

    public virtual object GetContent(object model)
    {
        return this;
    }

TabContainer.cshtml

@model MatchtechGroup.PiranhaExtensions.Regions.TabContainer

<ul class="form">

</ul>
@Html.EditorFor(m => m.Items)

管理器识别出我的新区域并且我已经能够将其添加到我的起始页面，我不确定如何初始化管理器，以便我可以在列表中添加和删除 HTMLRegions 以及如何检索它们已保存时从数据库中获取。

如何添加一个添加按钮（类似于附件选项卡），以便我可以通过管理器界面添加项目？

如果有更好的方法来使用内置组件创建基于列表的页面，我愿意接受建议，但我有点卡住了。

谢谢

Answer 1

核心框架中没有很好的支持来管理具有多个值的区域，例如可排序的附件列表。我已经在不同的项目中快速实现了它，但它们都依赖于大量客户端 JavaScript 来创建新区域，这是一个相当糟糕的解决方案，因为它需要重复逻辑。

不过，这是我尝试实施的一项功能，并且是即将推出的版本所需要的。如果您有兴趣，我总是可以设置一个 GitHub 存储库以进行协作，我们可以将其作为附加模块实现，直到它包含在核心中。你会对此感兴趣吗？

问候

哈坎

Answer 2

正如哈坎所说

核心框架中没有很好的支持来管理具有多个值的区域，例如可排序的附件列表。

所以这不是最佳做法，但它确实有效：

TabRegion.cs：

using System;
using System.ComponentModel.Composition;
using System.ComponentModel.DataAnnotations;
using System.Web;

namespace Piranha.Extend.Regions
{
    /// <summary>
    /// Simple Tab region.
    /// </summary>
    [Export(typeof(IExtension))]
    [ExportMetadata("InternalId", "TabRegion")]
    [ExportMetadata("Name", "TabRegionName")]
    [ExportMetadata("ResourceType", typeof(Resources.Extensions))]
    [ExportMetadata("Type", ExtensionType.Region)]
    [Serializable]
    public class TabRegion :  Extension
    {
        #region Properties
        /// <summary>
        /// Gets/sets the Tab title.
        /// </summary>
        [Display(ResourceType = typeof(Piranha.Resources.Extensions), Name = "TabRegionTitle")]
        public string Title { get; set; }

        /// <summary>
        /// Gets/sets the Tab body.
        /// </summary>
        [Display(ResourceType = typeof(Piranha.Resources.Extensions), Name = "TabRegionBody")]
        public string Body { get; set; }
        #endregion
    }
}

TabRegion.cshtml

@model Piranha.Extend.Regions.TabRegion
@{
}
<ul class="form">
    <li>@Html.LabelFor(m => m.Title)
        <div class="input">@Html.TextBoxFor(m => m.Title)</div>
        @Html.ValidationMessageFor(m => m.Title)</li>
    <li>@Html.LabelFor(m => m.Body)
        <div class="input">@Html.TextAreaFor(m => m.Body, new { @class = "editor", @rows = 10 })</div>
        @Html.ValidationMessageFor(m => m.Body)</li>
</ul>

最后将这个添加到你的视图中（index.cshtml）：

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<script>
    $(function () {
        $("#tabs").tabs();
    });
</script>

<div id="tabs">
    <ul>
        @foreach (KeyValuePair<string, object> regions in Model.Regions)
        {
            if (regions.Value.ToString() == "Piranha.Extend.Regions.TabRegion")
            {
                dynamic tab = regions.Value;
                if (tab.Title !=null)
                {
                    <li> <a href="#tabs-@regions.Key">@tab.Title</a></li>
                }
            }
        }
    </ul>
    @foreach (KeyValuePair<string, object> regions in Model.Regions)
    {
        if (regions.Value.ToString() == "Piranha.Extend.Regions.TabRegion")
        {
            dynamic tab = regions.Value;
            if (tab.Title != null)
            {
                <div id="tabs-@regions.Key">
                    @Html.Raw(@tab.Body)
                </div>}
        }
    }
</div>