如何创建使用外部数据源的umbraco小部件？

Question

我正在创建一个Umbraco站点,我想让站点管理员能够在一个页面上放置一个"小部件"(不确定这是否是正确的术语),该页面将呈现一个包含来自http服务的数据的表.

假设我有一个带有http api的外部数据服务,它公开了一个电影标题数据库.让我们假装它有两个端点

1)List Genres - 返回JSON 类型列表

http://api.movies.com/genres

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

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

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

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

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

谁能指出我正确的方向？这应该是插件吗？一个模板？物业编辑？

任何帮助表示赞赏.

Answer 1

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

首先,后台属性编辑器.虽然您可以使用Angular开发自己的自定义属性编辑器,但我建议您查看nuPickers包,它似乎提供了许多适合您目的的下拉列表实现.完成此操作后,编辑器对类型的选择将保留在数据库中.

现在,您使用所选类型加载电影小部件的部分.最简单的解决方案是将窗口小部件作为部分视图嵌套在Umbraco模板中.

您可以通过多种方式检索流派下拉属性值(例如,使用强类型或动态API),一个示例是:

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

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

@Html.Partial("movieWidget", selectedGenre)

此外,请确保您的局部视图的模型与selectedGenre此示例中的类型相匹配string.

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

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