处理从数据库到jquery图像交换器的图像

时间:2011-03-23 10:15:47

标签: jquery asp.net image datalist

无论如何处理从数据库到jquery图像交换器或任何其他类型的图像交换器的图像。 应根据数据库生成的图像数量填充图像。我可以得到所有的 来自数据库的图像,但我找不到在jquery图像交换器上显示这些图像的方法。 我可以使用datalist显示所有图像但是使用数据列表我不能使用jquery图像交换器。 任何可能的解决方案或替代方案都将受到高度赞赏

 protected void showDetails(int makeID)
{
    conn.Open();
    SqlCommand cmd = new SqlCommand("Select Price,image,make from productDetail Where (makeID LIKE @makeID)"  , conn);
    SqlParameter param = new SqlParameter();

   param.ParameterName = "@makeID";
    cmd.Parameters.Add(param);
  //  cmd.Parameters["@makeID"].Value = makeID;
   param.Value = makeID;

    rdr = cmd.ExecuteReader();
    while (rdr.Read())
    {
       // Label3.Text = rdr["price"].ToString();

        lblMake.Text = rdr["make"].ToString();
        lblPrice.Text = rdr["Price"].ToString();

        atest2.Attributes["href"] = "~/images/" + rdr["image2"].ToString();

        test2.Attributes["src"] = "~/images/" + rdr["image2"].ToString();
        test2.Attributes["height"] = "75";
        test2.Attributes["width"] = "75";

    }

    conn.Close();

}

//在设计视图

<div id="page">
        <div id="container">

            <h2>Thumbnail rollover effects and slideshow crossfades</h2>

            <!-- Start Advanced Gallery Html Containers -->
            <div id="gallery" class="content">
                <div id="controls" class="controls"></div>
                <div class="slideshow-container">
                    <div id="loading" class="loader"></div>
                    <div id="slideshow" class="slideshow"></div>
                </div>
                <div id="caption" class="caption-container"></div>
            </div>
                    <li>
                        <a class="thumb" name="drop" id="atest2" title="Title #1" runat="server" >
                            <img  id="test2" runat="server" alt="Title #1" />
                        </a>
                        <div class="caption">
                            Any html can be placed here ...
                        </div>
                    </li>
</ul>
            </div>
            <div style="clear: both;"></div>
        </div>
    </div>

1 个答案:

答案 0 :(得分:2)

您可以使用asp.net转发器来创建所需的html标记。

<div id="page">
    <div id="container">

        <h2>Thumbnail rollover effects and slideshow crossfades</h2>

        <!-- Start Advanced Gallery Html Containers -->
        <div id="gallery" class="content">
            <div id="controls" class="controls"></div>
            <div class="slideshow-container">
                <div id="loading" class="loader"></div>
                <div id="slideshow" class="slideshow"></div>
            </div>
            <div id="caption" class="caption-container"></div>
        </div>

<div id="thumbs">
    <ul class="thumbs noscript">
        <asp:Repeater id="rptImages" runat="server">
        <ItemTemplate>
            <li>
                <a class="thumb" name="optionalCustomIdentifier" href="path/to/slide" title="your image title">
            <img src='<%#String.Format("/images/{0}", Eval("image"))%>' alt="your image title again for graceful degradation" />
                </a>
                <div class="caption">
                    (Any html can go here)
                </div>
            </li>
            ... (repeat for every image in the gallery)
        </ItemTemplate>
        </asp:Repeater>        
    </ul>
</div>

 <div style="clear: both;"></div>
    </div>
</div>

只需将您的图像列表绑定到此转发器,然后在图像标记内输出它们的路径。

这项工作适合你?

修改

对于您的代码,您可能希望在下面执行更多类似的操作,并且我已更新上面的代码以显示您的输出。

rdr = cmd.ExecuteReader();
rptImages.DataSource = rdr;
rptImages.DataBind();