Populating Blueimp carousel inks in codebehind

Question

I'm using ASP.NET C# to display a catalog of items. When the user selects an item, I display the details of that item and I'd like to display one or more pictures. I tried a few methods for this and settled on the Blueimp carousel. It's working just fine if I populate the links div in the html, but I need to show different pics (from URLs in the SQL Server DB) depending on the item.

The code below works to populate the links div, but all I see is a blank space on the screen--no carousel, no images.

    <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

I'm looking for options. If populating the links div from codebehind isn't going to work, what would work? If populating the links div from codebehind does work, what am I doing wrong?

Thanks.

Answer 1

I found the answer. I'm using a master page on my site with a content placeholder for the subpages. Because I'm using a ContentPlaceholderID = "MainContent", MainContent_ is appended to each of the IDs on my page, so my blueimp script looking for document.getElementById('links') needed to have "MainContent_" prepended to "links". I change the script to:

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

The links were populating just fine, but blueimp couldn't find them. This fixed it.