无法访问由 Umbraco 自定义网格编辑器生成的 JSON 节点答案

【问题标题】：Trouble accessing JSON node generated by Umbraco custom grid editor无法访问由 Umbraco 自定义网格编辑器生成的 JSON 节点
【发布时间】：2017-04-26 23:27:51
【问题描述】：

背景

我是 Umbraco 的新手，正在努力创建我的第一个自定义网格编辑器。我正在尝试使用 Umbraco 自定义网格编辑器从我们的官方 Web 模板中填充一个简单的图像轮播。我希望用户能够选择一个或多个图像并应用文本横幅（带或不带 URL）。

问题

我的图像选择工作正常，但我认为我没有以最有效的方法进行操作。我从@Model 获取生成的JSON 对象，然后执行@Model.node.node.node 直到获得图像URL。这看起来很脆弱，如果 JSON 发生变化，那么我的轮播就会损坏。

这是编辑器的 AngularJS HTML：

<div ng-controller="imageCarousel.carouselController">
    <div>
        <div ng-show="control.value.carousel == undefined || control.value.carousel == ''">
            <i class="icon icon-add blue"></i>
            <a href="#" ng-click="pickImage()" prevent-default="">
                Add
            </a>
        </div>

        <div ng-show="control.value.carousel">
            <i class="icon icon-delete red"></i>
            <a href="#" ng-click="removeImage()" prevent-default="">
                Remove
            </a>
        </div>
    </div>

    <br />

    <ul ng-repeat="item in control.value.carousel">
        <li>
            {{item.id}}<br />
            <img src="{{item.properties[0].value.src}}" />
        </li>
    </ul>
</div>

这是控制器的外观：

angular.module("umbraco").controller("imageCarousel.carouselController",
    function ($scope, dialogService) {

        // Initialize the carousel array of images if it isn't there already
        if (!$scope.control.value) {
            $scope.control.value = {
                carousel: []
            };
        }

        // Populate the carousel array of images from the multi picker
        $scope.pickImage = function () {
            dialogService.mediaPicker({
                multiPicker: true,
                callback: function (data) {
                    //need $scope.control.value to work in a grid
                    angular.forEach(data, function (value, key) {
                        $scope.control.value.carousel.push(value);
                    })
                }
            });
        };

        // Set the carousel array to empty for now (need to figure out how to delete individual images)
        $scope.removeImage = function () {
            $scope.control.value = {
                carousel: []
            };
        };

    });

这是 Razor 渲染器当前的样子：

inherits Umbraco.Web.Mvc.UmbracoViewPage<dynamic>

<pre>@Model</pre>

<div class="carousel owl-carousel carousel-content">
    @{
        foreach (var tmp in Model.value.carousel.Children())
        {
            <div class="item">
                <img src="@tmp.properties[0].value.src" />
                <div class="content-container">
                    <div class="content">
                        <h2>Large Hero Content</h2>
                    </div>
                </div>
            </div>
        }
    }
</div>

这是@Model 的转储（用于单个图像）：

{
  "value": {
    "carousel": [
      {
        "properties": [
          {
            "id": 34,
            "value": {
              "src": "/media/1005/7834611966_e5efa3e3b2_o.jpg",
              "focalPoint": {
                "left": 0.47666666666666668,
                "top": 0.22546972860125261
              }
            },
            "alias": "umbracoFile",
            "editor": "Umbraco.ImageCropper"
          },
          {
            "id": 35,
            "value": "962",
            "alias": "umbracoWidth",
            "editor": "Umbraco.NoEdit"
          },
          {
            "id": 36,
            "value": "768",
            "alias": "umbracoHeight",
            "editor": "Umbraco.NoEdit"
          },
          {
            "id": 37,
            "value": "871793",
            "alias": "umbracoBytes",
            "editor": "Umbraco.NoEdit"
          },
          {
            "id": 38,
            "value": "jpg",
            "alias": "umbracoExtension",
            "editor": "Umbraco.NoEdit"
          },
          {
            "id": 41,
            "value": "",
            "alias": "linkText",
            "editor": "Umbraco.Textbox"
          },
          {
            "id": 40,
            "value": "",
            "alias": "linkTitle",
            "editor": "Umbraco.Textbox"
          },
          {
            "id": 39,
            "value": "",
            "alias": "linkURL",
            "editor": "Umbraco.Textbox"
          }
        ],
        "updateDate": "2017-02-15 11:53:06",
        "createDate": "2017-02-15 11:53:06",
        "published": false,
        "hasPublishedVersion": false,
        "owner": {
          "id": 0,
          "name": "xxx"
        },
        "updater": null,
        "contentTypeAlias": "bannerImage",
        "sortOrder": 4,
        "name": "7834611966_e5efa3e3b2_o.jpg",
        "id": 1088,
        "icon": "icon-slideshow color-orange",
        "trashed": false,
        "key": "fd1e3251-1597-4997-b795-f5c08c301519",
        "parentId": 1082,
        "alias": null,
        "path": "-1,1082,1088",
        "metaData": {},
        "isFolder": false,
        "thumbnail": "/media/1005/7834611966_e5efa3e3b2_o.jpg?width=500&mode=max&animationprocessmode=first",
        "image": "/media/1005/7834611966_e5efa3e3b2_o.jpg",
        "originalWidth": 962,
        "originalHeight": 768,
        "style": {
          "width": "173px",
          "height": "138px",
          "margin-right": "5px",
          "margin-bottom": "5px"
        },
        "thumbStyle": {
          "background-image": "url('/media/1005/7834611966_e5efa3e3b2_o.jpg?width=500&mode=max&animationprocessmode=first')",
          "background-repeat": "no-repeat",
          "background-position": "center",
          "background-size": "173px 138px"
        },
        "cssclass": "selected"
      }
    ]
  },
  "editor": {
    "name": "Image Carousel",
    "alias": "grid.imageCarousel",
    "view": "/App_Plugins/ImageCarousel/imageCarousel.html",
    "render": "/App_Plugins/ImageCarousel/imageCarouselRenderer.cshtml",
    "icon": "icon-layout",
    "config": {}
  },
  "active": true
}

问题

有没有我可以使用的内置函数来代替 @tmp.properties[0].value.src 部分？将图像选择器设置为“单个”会破坏该节点引用。

我仍然需要为每张图片应用标题/网址，而且我认为我无法使用多图片选择器来做到这一点。您可以看到“大英雄内容”参考，这就是可编辑文本（应用了可选 URL）需要去的地方。

任何帮助将不胜感激，谢谢！

【问题讨论】：

标签： angularjs json razor umbraco

【解决方案1】：

没有人发表评论，但我想列出一个答案，以防万一它对某人有所帮助。正如我所料，我只是过于复杂（当然，愚蠢）。您访问 Umbraco 属性的方式是通过“mediaItem = Umbraco.Media(id)”，然后是“linkText = @mediaItem.GetPropertyValue("linkText)”。

这是最终（工作）渲染器的样子：

@inherits Umbraco.Web.Mvc.UmbracoViewPage<dynamic>

<div class="carousel owl-carousel carousel-content">
    @{
        foreach (var tmp in Model.value.carousel.Children())
        {
            <div class="item">
                @{
                    var id = @tmp.id.ToString();
                    var mediaItem = Umbraco.Media(id);
                    var linkText = @mediaItem.GetPropertyValue("linkText");
                    var linkUrl = @mediaItem.GetPropertyValue("linkUrl");
                    var linkTitle = @mediaItem.GetPropertyValue("linkTitle");
                }

                <img src="@mediaItem.url" />

                <div class="content-container">
                    <div class="content">
                        @if (!string.IsNullOrWhiteSpace(linkText))
                        {
                            <h2>@linkText</h2>
                        }

                        @if (!string.IsNullOrWhiteSpace(linkUrl))
                        {
                            <a class="btn btn-primary backdrop" href="@linkUrl">@linkTitle</a>
                        }
                    </div>
                </div>
            </div>
        }
    }
</div>

【讨论】：