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

正如Håkan所说

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

所以这不是最好的做法，但它可以解决问题：

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>

食人鱼CMS创建区域扩展

2 个答案: