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

How to I create an umbraco widget which uses external data source?

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

一个虚构的示例服务

假设我有一个带有公开电影标题数据库的 http api 的外部数据服务。假设它有两个端点

1) 流派列表 - Returns JSON 流派列表

http://api.movies.com/genres 

2) 搜索 - Returns JSON 匹配搜索参数的标题列表

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

我想要的 Umbraco 管理员用户体验

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

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


我是 Umbraco 的新手(截至今天)。我花了 3 个小时阅读文档并查看入门工具包,但我不确定如何完成此操作。

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

感谢任何帮助。

也许看看 Archetype 包? http://24days.in/umbraco/2015/umbraco-zeitgeist/#picked-widgets

如果使用普通宏,则无法获取外部数据源作为参数值。但是创建 "widget repository" 将允许您(或您的编辑)创建自定义内容位,然后您可以在您的页面上为其创建一个选择器。

创建一个带有由外部值填充的下拉列表的数据类型编辑器应该相对简单 - 关于如何做到这一点的示例应该在 our.umbraco.org.

最后,作为 Umbraco 的新手,考虑订阅(一个月)umbraco.tv - 有很多不错的视频可以帮助您入门 :-) #h5yr

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

首先是后台 属性 编辑。虽然您可以开发自己的 custom property editor using Angular, I recommend having a look at the nuPickers package,它似乎提供了许多可能适合您目的的下拉实现。完成此操作后,编辑选择的流派将保存在数据库中。

现在是使用所选类型加载电影小部件的部分。最简单的解决方案是将小部件作为嵌套在 Umbraco 模板中的 Partial View

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

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

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

@Html.Partial("movieWidget", selectedGenre)

此外,请确保您的部分视图的模型与 selectedGenre 的类型相匹配,在本例中为 string.

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

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

的文档