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

Question

Background

I'm new to Umbraco, and am working on creating my first custom grid editor. I'm trying to use an Umbraco custom grid editor to populate a simple image carousel from our official web template. I want the user to be able to select one or more images and apply a text banner (with or without a URL).

Issue

I have the image selection working, but I don't think I'm doing it in the most efficient method. I'm getting the resulting JSON object from the @Model, and then doing @Model.node.node.node until I get to the image URL. This seems like it's pretty fragile, and if the JSON ever changes then my carousel will be broken.

Here's the editor's 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>

Here's what the controller looks like:

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: []
            };
        };

    });

Here's what the Razor renderer currently looks like:

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>

Here's a dump of the @Model (for a single image):

{
  "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
}

Question

Are there any built-in functions that I can use instead of the @tmp.properties[0].value.src section I have? Setting the image picker to "single" breaks that node reference.

I still need to apply a title/URL to each image, and I don't think I'll be able to do that with a multi-image-picker. You can see the "LARGE HERO CONTENT" reference, and that's where the editable text (with optional URL applied) will need to go.

Any help would be greatly appreciated, thanks!

Answer 1

Nobody commented, but I wanted to list an answer just in case it helps someone. As I expected, I was just being overly complex (and, of course, dumb). The way you access Umbraco properties is through "mediaItem = Umbraco.Media(id)", then "linkText = @mediaItem.GetPropertyValue("linkText)".

Here's what the final (working) renderer looks like:

@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>