Fatal编程技术网
  • javascript/
  • Javascript Umbraco-多介质选择器-分割和输出图像

Javascript Umbraco-多介质选择器-分割和输出图像

javascript html razor umbraco

Javascript Umbraco-多介质选择器-分割和输出图像,javascript,html,razor,umbraco,umbraco7,Javascript,Html,Razor,Umbraco,Umbraco7,我目前正在使用Umbraco 7开发一个可以加载谷歌地图和大量信息的部分视图 我试图做的是在“infoWindow”（代码的底部函数）GoogleAPI弹出窗口（标记弹出信息）中加载项目图像 我尝试了很多不同的方法，但似乎无法获得图像。在不破坏东西的情况下，我能做的最远的事情就是获取图像ID。我无法拆分它们或输出任何内容 我尝试了以下方法： var imagesList = portfolioItem.GetPropertyValue<string>("Images").Split(

我目前正在使用Umbraco 7开发一个可以加载谷歌地图和大量信息的部分视图

我试图做的是在“infoWindow”（代码的底部函数）GoogleAPI弹出窗口（标记弹出信息）中加载项目图像

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

我尝试了以下方法：

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

这是我用来获取图像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>

@继承Umbraco.Web.Mvc.UmbracoTemplatePage
var标记=[]；
var映射；
var infowindow=new google.maps.infowindow({
最大宽度：200
});
函数初始化（）{
var geocoder=new google.maps.geocoder（）；
var map_canvas=document.getElementById（'map_canvas'）；
变量映射_选项={
中心：新google.maps.LatLng（32.1288162，-13.2088774），
缩放：3，
ZoomControl选项：{
位置：google.maps.ControlPosition.TOP_左
},
街景控制选项：{
位置：google.maps.ControlPosition.TOP_左
},
mapTypeId:google.maps.mapTypeId.TERRAIN，
mapTypeControl:false，
mapTypeControlOptions：{
MapTypeId:[google.maps.MapTypeId.ROADMAP，'map_style']
}
};
map=新的google.maps.map（地图画布，地图选项）
map.mapTypes.set（'map\u style'，styledMap）；
setMapTypeId（'map_style'）；
@{
int i=0；
foreach（CurrentPage.substands（“portfolioItem”）.OrderBy（“Name”）中的var portfolioItem）
{
i++；
var url=“”；
int port=HttpContext.Current.Request.Url.port；
url=“http://”+HttpContext.Current.Request.url.Host；
如果（端口！=80）
{
url+=“：”+端口；
}
如果（！String.IsNullOrEmpty（portfolioItem.technology））
{
url++=“/images/portfolioItem/”+portfolioItem.technology.ToString（）.ToLower（）.Split（新字符[]{'，}）[0]+.png”；
}
其他的
{
url+=“/images/portfolio/windmarker.png”；
}
var description=portfolioItem.shortDescription.ToString（）.Replace（“'”、“'；”）；
var name=portfolioItem.name.ToString（）.Replace（“'”、“'；”）；
var mediateItem=portfolioItem.GetPropertyValue（“图像”）；
var location=portfolioItem.location.ToString（）.Replace（“'”，“'；”）；
var mw=“”；
if（portfolioItem.HasValue（“TotalExpectedStalledCapacity”）{mw=portfolioItem.TotalExpectedStalledCapacity；}
if（portfolioItem.HasValue（“totalInstalledCapacity”）{mw=portfolioItem.totalInstalledCapacity；}
if（portfolioItem.HasValue（“容量”）{mw=portfolioItem.capacity；}
@Html.Raw（“var marker”+i+”=新的google.maps.marker（{”）；
@Html.Raw（“位置：new google.maps.LatLng（“+portfolioItem.latitude+”，“+portfolioItem.longitude+”）；
@Html.Raw（“map:map，”）；
@Html.Raw（“title:”+portfolioItem.Name.Replace（“”，“'；”）+”，”；
@Html.Raw（“图标：{”）；
/*基于技术的变革*/
@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（“标记“+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（标记“+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+”）；”；
}
}
过滤器标记器（）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
selectAll=功能（已选择，键入）
{
$（类型+‘输入’）.prop（‘选中’）；
过滤器标记器（）；
}
filterMarkers=函数（）
{
var阶段=[]；
var国家=[]；
var technologies=[]；
var date_start=''；
var date_end=“”；
$（“#阶段输入：选中”）。每个（函数（索引，元素）{
phases.push（$（this.val（））；
});
$（“#国家/地区输入：选中”）。每个（功能（索引，元素）{
countries.push（$（this.val（））；
});
$（“#技术输入：选中”）。每个（功能（索引，元素）{
push（$（this.val（））；
});     
日期开始=$（“#日期开始选项：选中”）.val（）；
date_end=$（“#dateend选项：选中”）.val（）；
对于（i=0；ivar mediaItem = portfolioItem.GetPropertyValue("images");

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

var imageList = portfolioItem.HasValue("Images") ?  portfolioItem.GetPropertyValue<string>("Images").Split(',').ToList() : null;

if(imageList != null)
{
    var imagesCollection = Umbraco.TypedMedia(imageList);
}

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