Question

我正在创建一个Umbraco网站，我希望网站管理员能够在一个页面上放置一个“小部件”（不确定这是否是正确的术语），该页面将使用来自http服务的数据呈现一个表。

假设我有一个带有http api的外部数据服务，它公开了一个电影片名数据库。让我们假装它有两个端点

1）列表类型 - 返回类型的JSON列表

http://api.movies.com/genres

2）搜索 - 返回与搜索参数匹配的标题的JSON列表

http://api.movies.com/search?genre=comedy

我想为umbraco用户提供一种方法，在Umbraco管理员的页面上放置一个“电影类型小部件”。将小部件放在页面上后，他们可以通过从下拉列表中选择一个类型来指定此小部件的类型。该下拉列表将由端点＃1填充。

当页面呈现给最终用户时，它会调用端点＃2来填充与umbraco用户为此小部件指定的类型匹配的电影列表。

我是Umbraco的新手（截至今天）。我花了3个小时阅读文档并查看入门套件，我不知道如何实现这一目标。

有人能指出我正确的方向吗？这应该是插件吗？一个模板？属性编辑器？

感谢任何帮助。

Answer 1

您需要实现的两个不同组件是后台属性编辑器，以显示下拉菜单，其中包含从外部服务加载的值和前端组件根据先前选择的值

加载外部数据

首先，后台属性编辑器。虽然您可以开发自己的custom property editor using Angular，但我建议您查看nuPickers package，它似乎提供了一些可能适合您目的的下拉列表实现。完成此操作后，编辑对类型的选择将保留在数据库中。

现在，您使用所选流派加载影片窗口小部件的部分。最简单的解决方案是将窗口小部件作为嵌套在Umbraco模板中的部分视图。

您可以通过多种方式检索类型下拉属性值（例如，使用强类型或动态API），例如：

var selectedGenre = Model.Content.GetPropertyValue<string>("selectedGenre")

您需要确保的一件事是所选的类型值由模板传递给部分，如下所示：

@Html.Partial("movieWidget", selectedGenre)

另外，请确保您的局部视图模型与selectedGenre的类型匹配，在此示例中为string。

最后一部分是调用您的电影服务并将其传递给所选的流派值。到目前为止，最简单的解决方案是继续从小部件局部视图中调用服务。

虽然这可能适用于简单/小型项目，但通常认为将逻辑移至控制器是最佳做法。这是Umbraco中更高级的场景，您必须使用自己的控制器而不是它用于渲染模板的默认控制器。如果您需要采用这种方法，请查看creating custom controllers in Umbraco

的文档

Answer 2

如果使用普通宏，则无法将外部数据源作为参数值。但是创建一个＆＃34;小部件存储库＆＃34;允许你（或你的编辑）创建自定义内容位，然后你可以在你的页面上创建一个选择器。

使用由外部值填充的下拉列表创建数据类型编辑器应该相对简单 - 有关如何执行此操作的示例应该在our.umbraco.org上结束。

最后，作为Umbraco的新手，考虑一下（一个月）订阅umbraco.tv - 这里有一堆很棒的视频可以帮助你入门:-)＃h5yr