Question

我有以下画廊 -

<div class="content">
    <div id="myGallery">
        <div class="imageElement">
            <h3>IMAGE 1</h3>
            <p></p>
            <a href="#" title="open image" class="open"></a>
            <img src="image1.jpg" class="full" />
            <img src="image.jpg" class="thumbnail" />
        </div>
        <div class="imageElement">
            <h3>IMAGE 2</h3>
            <p></p>
            <a href="#" title="open image" class="open"></a>
            <img src="image2.jpg" class="full" />
            <img src="image2.jpg" class="thumbnail" />
        </div>
    </div>
</div>

当图像像上面那样硬编码，从文件夹中读取时，这种方法很有效。

但是，我希望使用我没有存储但来自URL的图像从后面的代码填充库。喜欢 - www.fooBar.com/image1.png，一旦检索到它，然后将其推入画廊？

我尝试了以下内容 -

设置<div id="myGallery" id="testHtml">

然后在代码背后 -

testHtml.innerHTML = // built html with image src = url etc

然而，这只是渲染图像而不将其放入图库本身。

Answer 1

<asp:Panel>有一个名为Controls的属性，您可以使用该属性来添加<div class="imageElement">容器，图片，标题等。

请点击此处了解如何添加项目：http://msdn.microsoft.com/en-us/library/kyt0fzt1(v=vs.110).aspx

请在此处查看如何创建自定义代码：http://msdn.microsoft.com/en-us/library/5f8y80ez(v=vs.110).aspx

Answer 2

这种猫的皮肤方法不乏，但一种方法是创建一个这样的文字：

 <div id="myGallery">
    <asp:Literal id="ltrImages" runat="server" />
 </div>

然后在你的代码隐藏中：

 var imageElement @"<div class=""imageElement"">
        <h3>{0}</h3>
        <p></p>
        <a href=""#"" title=""open image"" class=""open""></a>
        <img src=""{1}"" class=""full"" />
        <img src=""{1}"" class=""thumbnail"" />
    </div>";

  StringBuilder sb = new StringBuilder();

 //Presuming you have your images in some kind of collection called "images"
 for(var image in images){
      sb.Append(String.Format(imageElement, image.title, image.src));
 }

 ltrImages.Text = sb.ToString();

从后面的代码填充javascript库

2 个答案: