在代码隐藏中填充Blueimp旋转木马链接

Question

我正在使用ASP。NET c#显示项目目录。当用户选择一项商品时，我将显示该商品的详细信息，并希望显示一张或多张图片。为此，我尝试了几种方法，并选定了Blueimp旋转木马。它的工作只是很好，如果我在html中填充链接div，但我需要显示不同的图片(从SQL Server DB中的url)，这取决于项目。

下面的代码可以填充linksdiv，但是我看到的只是屏幕上的空白——没有旋转木马，没有图像。

<div id="IllustrationDiv" runat="server">
<!-- Links div goes here -->
<script>
document.getElementById('links').onclick = function (event) {
event = event || window.event
var target = event.target || event.srcElement
var link = target.src ? target.parentNode : target
var options = { index: link, event: event }
var links = this.getElementsByTagName('a')
blueimp.Gallery(links, options)
}
</script>
<!-- The Gallery as inline carousel, can be positioned anywhere on the page -->
<div id="blueimp-gallery-carousel"
class="blueimp-gallery blueimp-gallery-carousel"
aria-label="image carousel">
<div class="slides" aria-live="off"></div>
<h3 class="title"></h3>
<a class="prev"
aria-controls="blueimp-gallery-carousel"
aria-label="previous slide"></a>
<a class="next"
aria-controls="blueimp-gallery-carousel"
aria-label="next slide"></a>
<a class="play-pause"
aria-controls="blueimp-gallery-carousel"
aria-label="play slideshow"
aria-pressed="false"
role="button"></a>
<ol class="indicator"></ol>
</div>
<script src="../Scripts/blueimp-gallery.min.js"></script>
<script>
blueimp.Gallery(document.getElementById('links').getElementsByTagName('a'), {
container: '#blueimp-gallery-carousel',
carousel: true
})
</script>
</div>

ViewState["illustration_details_dt"] = dt;
// Open div
System.Web.UI.HtmlControls.HtmlGenericControl newDiv = new System.Web.UI.HtmlControls.HtmlGenericControl("DIV");
newDiv.ID = "links"; //<---Give and ID to the div, very important!
newDiv.Attributes.Add("hidden", "hidden");
for (int i = 0; i < dt.Rows.Count; i++)
{
Image newImage = new Image();
HyperLink newHyperLink = new HyperLink();
newHyperLink.NavigateUrl = dt.Rows[i]["universal_resource_locator"].ToString();
newHyperLink.Target = "_blank";
newHyperLink.Text = dt.Rows[i]["document_id"].ToString();
newImage.ImageUrl = dt.Rows[i]["universal_resource_locator"].ToString();
newImage.AlternateText = dt.Rows[i]["document_id"].ToString();
newImage.BackColor = System.Drawing.Color.White;
newHyperLink.Controls.Add(newImage);  // TODO - Commented for troubleshooting
newDiv.Controls.Add(newHyperLink);  // TODO - Commented for troubleshooting
}
IllustrationDiv.Controls.AddAt(0,newDiv);  // Add the new div to our already existing div

我正在寻找选项。如果从代码后面填充链接div不起作用，那么什么会起作用呢?如果从代码后面填充链接div确实有效，我做错了什么?

谢谢。

Answer 1

我找到了答案。我在我的网站上使用一个母版页，其中包含子页面的内容占位符。因为我使用的是ContentPlaceholderID = "MainContent"，MainContent_被附加到我的页面上的每个id，所以我的blueimp脚本寻找document.getElementById('links')需要有"MainContent_"前缀为"链接"。我将脚本更改为:

<script>
document.getElementById('MainContent_links').onclick = function (event) {
event = event || window.event
var target = event.target || event.srcElement
var link = target.src ? target.parentNode : target
var options = { index: link, event: event }
var links = this.getElementsByTagName('a')
blueimp.Gallery(links, options)
}
var carouselOptions = {
startSlideshow: true
}
</script>

链接很好，但是blueimp找不到它们。