在代码隐藏中填充 Blueimp 轮播墨水答案

【问题标题】：Populating Blueimp carousel inks in codebehind在代码隐藏中填充 Blueimp 轮播墨水
【发布时间】：2022-12-14 21:03:14
【问题描述】：

我正在使用 ASP.NET C# 来显示项目目录。当用户选择一个项目时，我会显示该项目的详细信息，并且我想显示一张或多张图片。我为此尝试了几种方法并选择了 Blueimp 旋转木马。如果我在 html 中填充链接 div，它工作得很好，但我需要根据项目显示不同的图片（来自 SQL Server 数据库中的 URL）。

下面的代码用于填充链接 div，但我在屏幕上看到的只是一片空白——没有旋转木马，没有图像。

    <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 确实有效，我做错了什么？

谢谢。

【问题讨论】：

标签： c# asp.net blueimp

【解决方案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 找不到它们。这修复了它。

【讨论】：