如何在 Orchard 1.9 中创建布局元素

Question

谁能指导我如何在 Orchard 1.9 中创建布局元素。我在网上找不到任何资源。

Answer 1

一般来说，创建新布局元素与创建新部件类似。该过程涉及一个驱动程序和一些视图。说到点子上——你需要按如下方式实现：

一个元素class。。 Class 继承自 Element，其中包含所有元素数据。一个模型，可以这么说。
一个驱动程序。 Class 继承自 ElementDriver<TElement>，其中 TElement 是您在上面创建的类型。每个元素都有自己的驱动程序来处理显示管理编辑器（和回发）和前端显示视图。
Shapes. 按照惯例，所有形状都应放在 /Views/Elements/ 文件夹下。
- 显示形状。 以您的元素命名，即。 MyElement.cshtml。这一个在前端呈现您的元素。
- 设计展示形状。。以您的元素命名，带有 .Design 后缀，即。 MyElement.Design.cshtml。这会在布局编辑器中呈现您的元素。
- 编辑器形状。。 这个应该放在 /Views/EditorTemplates/ 文件夹中。默认命名约定为 Elements.MyElement.cshtml。当您在布局编辑器 canvas.

完成上述所有操作后，您的新元素应该出现在布局编辑器右侧的元素列表中，可以使用了。

如果你想做一些更复杂的元素，请检查现有的实现。布局模块有一个非常不错的架构，所以你应该很快上手。请记住我上面写的必要步骤。

Answer 2

要创建自定义布局元素，首先创建一个继承自 Element 的 class。 Element 位于 Orchard.Layouts 命名空间中，因此您需要添加引用。为了遵循 Orchard 标准，将此文件放在名为 Elements 的文件夹中。

public class MyElement : Element
{
    public override string Category
    {
        get { return "Content"; }
    }

    public string MyCustomProperty
    {
        get { return this.Retrieve(x => x.MyCustomProperty); }
        set { this.Store(x => x.MyCustomProperty, value); }
    }
}

接下来，在名为 Drivers 的文件夹中创建一个驱动程序 class。 class 继承自 ElementDriver<TElement> 并且您可能希望覆盖 OnBuildEditor 和 OnDisplaying 方法。 OnBuildEditor 用于处理创建我们的编辑器形状和在保存编辑器时更新我们的数据库。 OnDisplaying 用于显示我们的元素时需要做的事情。通常，您会希望向形状添加属性，这可以通过 context.ElementShape.MyAdditionalProperty = "My Value";

完成

public class MyElementDriver : ElementDriver<MyElement>
{
    protected override EditorResult OnBuildEditor(MyElement element, ElementEditorContext context)
    {
        var viewModel = new MyElementEditorViewModel
        {
            MyCustomProperty = element.MyCustomProperty
        };

        var editor = context.ShapeFactory.EditorTemplate(TemplateName: "Elements.MyElement", Model: viewModel);

        if (context.Updater != null)
        {
            context.Updater.TryUpdateModel(viewModel, context.Prefix, null, null);
            element.MyCustomProperty = viewModel.MyCustomProperty;
        }

        return Editor(context, editor);
    }

    protected override void OnDisplaying(Reddit element, ElementDisplayContext context)
    {
        context.ElementShape.MyAdditionalProperty = "My Value";
    }
}

然后我们只需要我们的意见。我们的编辑器视图进入 Views/EditorTemplates。文件名需要是我们设置的编辑器形状的模板名称。在我们的例子中，视图名称将是 Elements.MyElement.cshtml.

@model MyNameSpace.ViewModels.MyElementEditorViewModel

<fieldset>
    <div>
        @Html.LabelFor(m => m.MyCustomProperty, T("My Custom Property"))
        @Html.TextBoxFor(m => m.MyCustomProperty, new { @class = "text medium" })
    </div>
</fieldset>

最后，我们只需要一个前端视图。此视图进入以下文件夹 Views/Elements。视图文件的名称与我们的元素 class 名称相同。对于此示例，文件将被称为 MyElement.cshtml.

@using MyNameSpace.Elements
@using MyNameSpace.Models

@{
    var element = (MyElement)Model.Element;
}

<h1>@element.MyCustomProperty</h1>

然后您将拥有一个新元素，您可以使用布局编辑器将其拖动到您的布局中。

有关从头到尾创建元素的更多详细信息，请查看我在 creating a Reddit element 上的博客 post。

如何在 Orchard 1.9 中创建布局元素

How to create layout elements in Orchard 1.9

orchardcms