javascript - Umbraco - 多媒体选择器 - 分割和输出图像

Question

我目前正在开发使用 Umbraco 7 加载 Google map 和大量信息的部分 View 。

我想做的是在“infoWindow”(代码的底部函数)Google API 弹出窗口(标记弹出信息)中加载项目图像。

我尝试了很多不同的方法，但似乎无法获取图像。在不破坏任何东西的情况下，我能得到的最远的结果就是获取图像 ID。我无法分割它们或输出任何内容。

我尝试过以下方法:

var imagesList = portfolioItem.GetPropertyValue<string>("Images").Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries).Select(int.Parse);
var imagesCollection = Umbraco.TypedMedia(imagesList).Where(x => x != null);

我收到此错误:

Compiler Error Message: CS1976: Cannot use 'Parse' as an argument to a dynamically dispatched operation because it is a method group. Did you intend to invoke the method?

http://prntscr.com/99u5ky

var mediaItem = portfolioItem.GetPropertyValue("images");

这是我用来获取图像 ID 的行，但每次我尝试分割它们并输出任何内容时，我都会收到错误。

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
<link rel="stylesheet" type="text/css" href="/css/Portfolio.css"/>

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>    

<script type="text/javascript">  
  var markers = [];
  var map;
  var infowindow = new google.maps.InfoWindow({
      maxWidth: 200
  });
  function initialize() {

    var geocoder = new google.maps.Geocoder();
    var map_canvas = document.getElementById('map_canvas');
    var map_options = {
        center: new google.maps.LatLng(32.1288162,-13.2088774),
        zoom: 3,
        zoomControlOptions: {
            position: google.maps.ControlPosition.TOP_LEFT
        },
        streetViewControlOptions: {
            position: google.maps.ControlPosition.TOP_LEFT
        },
        mapTypeId: google.maps.MapTypeId.TERRAIN,
        mapTypeControl: false,
        mapTypeControlOptions: {
          mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
        }
    };
    map = new google.maps.Map(map_canvas, map_options)

    map.mapTypes.set('map_style', styledMap);
    map.setMapTypeId('map_style');


      @{
          int i = 0;

          foreach (var portfolioItem in CurrentPage.Descendants("PortfolioItem").OrderBy("Name"))
          {
              i++;
              var url = "";
              int port = HttpContext.Current.Request.Url.Port;
              url = "http://" + HttpContext.Current.Request.Url.Host;

              if (port != 80)
              {
                  url += ":" + port;
              }

              if (!String.IsNullOrEmpty(portfolioItem.technology))
              {

                  url += "/images/portfolio/" + portfolioItem.technology.ToString().ToLower().Split(new char[] { ',' })[0] + ".png";
              }
              else
              {
                  url += "/images/portfolio/windmarker.png";
              }

              var description = portfolioItem.shortDescription.ToString().Replace("'", "&#39;");
              var name = portfolioItem.Name.ToString().Replace("'", "&#39;");

              var mediaItem = portfolioItem.GetPropertyValue("images");

              var location = portfolioItem.Location.ToString().Replace("'", "&#39;");

              var mw = "";
              if (portfolioItem.HasValue("totalExpectedInstalledCapacity")) { mw = portfolioItem.totalExpectedInstalledCapacity; }
              if (portfolioItem.HasValue("totalInstalledCapacity")) { mw = portfolioItem.totalInstalledCapacity; }
              if (portfolioItem.HasValue("capacity")) { mw = portfolioItem.capacity; }

            @Html.Raw("var marker" + i + " = new google.maps.Marker({");
            @Html.Raw(" position: new google.maps.LatLng(" + portfolioItem.latitude + "," + portfolioItem.longitude + "),");
            @Html.Raw(" map: map,");
            @Html.Raw(" title: '" + portfolioItem.Name.Replace("'", "&#39;") + "',");
            @Html.Raw(" icon: {         ");
                           /* Change based on technology */
            @Html.Raw("     url: '" + url + "'");
            @Html.Raw(" }");
            @Html.Raw("});");
            @Html.Raw("google.maps.event.addDomListener(document.getElementById('marker" + i + "'), 'click', function(ev) {map.setCenter(marker" + i + ".getPosition());});");
            @Html.Raw("marker" + i + ".phase = '" + portfolioItem.phase + "';"); 
            @Html.Raw("marker" + i + ".date = '" + ((DateTime)portfolioItem.date).Year + "';"); 
            @Html.Raw("marker" + i + ".country = '" + portfolioItem.Parent.Name + "';"); 
            @Html.Raw("marker" + i + ".technology = '" + portfolioItem.technology + "';");

            @Html.Raw("google.maps.event.addListener(marker" + i + ", 'click', function() {");
            @Html.Raw("openInfoWindow('" + name + "', '" + mediaItem + "', '" + location + "', '" + mw + "', '" + portfolioItem.Url + "', marker" + i + ");");
            @Html.Raw("});");

            @Html.Raw("$('#marker" + i + "').on('click', function() {");
            @Html.Raw("openInfoWindow('" + name + "', '" + mediaItem + "', '" + location + "', '" + mw + "', '" + portfolioItem.Url + "', marker" + i + ");");
            @Html.Raw("});");

            @Html.Raw("marker" + i + ".setVisible(true);");
            @Html.Raw("markers.push(marker" + i + ");");
          }
   }

      filterMarkers();
  }

    google.maps.event.addDomListener(window, 'load', initialize);

    selectAll = function(selected, type)
    {
        $(type + ' input').prop('checked', selected);
        filterMarkers();
    }

    filterMarkers = function()
    {
        var phases = [];
        var countries = [];
        var technologies = [];
        var date_start = '';
        var date_end = '';

        $("#phase input:checked").each(function(index, elem){
            phases.push($(this).val());
        });
        $("#country input:checked").each(function(index, elem){
            countries.push($(this).val());
        });
        $("#technology input:checked").each(function(index, elem){
            technologies.push($(this).val());
        });     
        date_start = $("#datestart option:selected").val();
        date_end = $("#dateend option:selected").val();



       for (i = 0; i < markers.length; i++) {
           var marker = markers[i];   

           var phasetrue = false;
           var countriestrue = false;
           var technologiestrue = false;

           if (phases.length == 0)
           {
               phasetrue = false;
           }
           else
           {
               for (j = 0; j < phases.length; j++)
               {
                   if ((marker.phase).indexOf(phases[j]) > -1)
                   {
                       phasetrue = true;
                   }
               }
           }
           if (countries.length == 0)
           {
               countriestrue = false;
           }
           else
           {
               for (j = 0; j < countries.length; j++)
               {
                   if ((marker.country).indexOf(countries[j]) > -1)
                   {
                       countriestrue = true;
                   }
               }
           }
           if (technologies.length == 0)
           {
               technologiestrue = false;
           }
           else
           {
               for (j = 0; j < technologies.length; j++)
               {
                   if ((marker.technology).indexOf(technologies[j]) > -1)
                   {
                       technologiestrue = true;
                   }
               }
           }

           if(phasetrue == true &&
              countriestrue == true &&
              technologiestrue == true &&
              ((date_start <= marker.date && date_end >= marker.date) || (date_start == undefined || date_end ==undefined) || (date_start == '' || date_end == ''))
            )
           {
               marker.setVisible(true);
           }
           else
           {          
               marker.setVisible(false);
           }
        }  
    }
    setCenter = function(latitude, longitude)
    {
        map.panTo(new google.maps.LatLng(latitude, longitude));
    }

    openInfoWindow = function (name, mediaItem, location, mw, url, marker) {
        var infoText = "<div class='portfolioTooltip'><div class='tooltipName'>" + name + "</div><img src='" + mediaItem + "' alt='" + mediaItem + "'title='" + mediaItem + "' />";
        var moreInformationLink = "<div><a class='tooltipLink' href=\"" + url + "\" target=\"_blank\">More Information</a></div>";
        if (location.length > 0) {
            infoText += "<div class='tooltipLabel'>Location</div>";
            infoText += "<div class='tooltipData'>" + location + "</div>";
        }
        if (mw.length > 0) {
            infoText += "<div class='tooltipLabel'>MW</div>";
            infoText += "<div class='tooltipData'>" + mw + "</div>";
        }
        infoText += moreInformationLink;
        infoText += "</div>";

        infowindow.setContent(infoText);
        infowindow.open(map, marker);
    }
</script>

Answer 1

我设法使用以下方法解决了这个问题，并且通过这个，我能够看到所有图像。

var imagesList = portfolioItem.GetPropertyValue<string>("Images").Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries);
var imagesCollection = Umbraco.TypedMedia(imagesList);

foreach (var imageItem in imagesCollection)
{      
    <img src="@imageItem.Url" />
}