如何在 Sitecore 体验编辑器中使 jQuery 呈现的内容可编辑

Question

我们有一个 Sitecore 项目，代码/文件来自 ASP.NET 网络应用程序。

产品部分的 HTML 如下

<div class="products-section">
  <ul class="tabs">
    <li>Product 1</li>
    <li>Product 2</li>
  </ul>
  <div class="product">
     <h3>Product Name</h3>
     <img src="/images/img1.jpg" />
     <span>Description</span>
  </div>
</div>

这就是最终用户的工作方式。 EU 将单击产品选项卡（例如：产品 1），这将更改 <div class="product"> 中的内容，无需回发。

对于作者，此部分必须可通过体验编辑器进行编辑。通常，我会使用asp:Repeater 和sc:Text,sc:Image 来渲染它。

但是，这里的数据必须使用 ajax 调用来检索，这意味着没有中继器或 Sitecore 控件。

在这种情况下，我怎样才能让体验编辑器中的内容可编辑。

我想到的唯一想法：

1. 获取Page_Load中所有产品的数据，使用Repeater绑定，然后使用jQuery显示/隐藏相应的div。 （虽然看起来不是一个好方法）

2. 告诉内容作者，此部分只能从内容编辑器进行编辑，而不能从体验编辑器进行编辑：)

我有什么选择。

Answer 1

一种选择是在体验编辑器中以不同方式呈现您的页面。检查代码中的模式并在编辑时使用中继器，否则使用 jquery 输出。 您可以使用视图轻松显示/隐藏您想要的输出。

<asp:MultiView runat="server" ID="ProductsView">
  <asp:View runat="server" ID="StandardView">
    <div ...>
     ...
    </div>
  </asp:View>
  <asp:View runat="server" ID="EditorView">
    <asp:Repeater..>
       ...
    </asp:Repeater>
  </asp:View>
</asp:MultiView>

在你的代码后面：

ProductsView.SetActiveView((Sitecore.Context.PageMode.IsExperienceEditor || Sitecore.Context.PageMode.IsExperienceEditorEditing) ? EditorView : StandardView)

根据活动视图，您可以决定是否将数据附加到转发器（在 StandardView 处于活动状态时不要这样做，以提高性能）

Answer 2

我不确定最终用户为什么会与体验编辑器交互，因为内容作者使用体验编辑器来创作网站并更新页面本身的内容。

但是，如果这是内容作者的要求，您可以使用 sitecore 服务客户端 api 来使用 ajax 调用更新内容。 使用this document 了解 ssc 的工作原理。

如果您有其他问题，请告诉我。