在Nivo SLider中使用asp.net和c#的可编程图像

本文关键字：可编程 图像 net asp SLider Nivo | 更新日期: 2023-09-27 18:06:34

"只允许在滑块div中使用图像或被链接包围的图像。任何其他HTML都会破坏滑块。"

在c#中以编程方式从数据库插入图像的最佳方式是什么?我在div id="slider"标签中使用了一个标签，但后来意识到标签会在span标签中创建图像，因此会破坏滑块。 
lblSlider.Text += "<img src='"" + URL + "'" alt='"" + address + "'" title='"<a href='Featured/" + address" + address + ", " + city + "</a>'" />";

在Nivo SLider中使用asp.net和c#的可编程图像

使用这样的标记…

<img src='ImageHandler.ashx?ProductID=<%# Eval("ProductID")%>' 
    alt="<%# Eval("ProductName") %>" title="<%# Eval("ProductName") %>" />

…与像这样的图像HttpHandler类一起使用(适合您自己的特定DB模式):

public class ImageHandler : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        if (context.Request.QueryString["productID"] != null)
        {
            try
            {
                string ProductID = context.Request.QueryString["ProductID"];
                if (Convert.ToInt32(ProductID) > 0)
                {
                    const string CONN 
                        = "Initial Catalog=xxx;Data Source=xxx;Integrated Security=SSPI;";
                    string selectQuery 
                        = "SELECT Photo FROM dbo.Products WHERE dbo.Products.ProductID=" 
                            + ProductID.ToString();
                    SqlConnection conn = new SqlConnection(CONN);
                    SqlCommand cmd = new SqlCommand(selectQuery, conn);
                    conn.Open();
                    SqlDataReader dr = cmd.ExecuteReader();
                    dr.Read();
                    context.Response.BinaryWrite((Byte[])dr[0]);
                    dr.Close();
                    conn.Dispose();
                    // context.Response.End(); 
                    // caused an "Abort thread" error 
                    // - this is correct and is a special exception
                }
            }
            catch (Exception ex)
            {
                ErrorReporting.LogError(ex);   
            }
        }
        else
            throw new ArgumentException("No ProductID parameter specified");
    }
    public bool IsReusable
    {
        get
        {
            return true; // multiple images otherwise false
        }
    }
}

好吧，我还没有尝试过其他解决方案，但我这样做了，它的工作:以下是一些c#全局变量:

protected int count;
protected string[] arr = new string[20];

然后我在Page_Load方法中给数据库中的字符串数组赋值。

然后我用javascript在我的页面上写nivo滑块:

    <script type="text/javascript">
        document.write("<div id='slider' class='nivoSlider'>");
        var count = <%= count %>; 
        var myArray = <% = new JavaScriptSerializer().Serialize(arr) %>;
        for(var i = 0; i < count; i++) {
            document.write(myArray[i]);
        }
        document.write("</div>");
    </script>

这个解决方案对我来说似乎更容易，但如果有人认为我应该使用另一个解决方案，请告诉我。哦，不要忘记命名空间System.Web.Script.Serialization

我也有同样的需求，并尝试了下面的代码来完成基于类别的图像动态加载。这些图像从我的数据库加载。我是ASP的新手。如果我做错了什么，请告诉我:)。

在ASP。网络文件:我正在使用nivo滑块追加方法

    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').append('<img id="ad5" src=<%=__ad1ImageUrl %> />');
        $('#slider').append('<img id="ad6" src=<%=__ad2ImageUrl %> />');
        $('#slider').append('<img id="ad7" src=<%=__ad3ImageUrl %> />');
        $('#slider').append('<img id="ad8" src=<%=__ad4ImageUrl %> />');
        $('#slider').nivoSlider();
    });
</script>

我的表是这样的:

    <table style="height: 183px; width: 100%" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td align="left">
            <div id="wrapper">
                <div class="slider-wrapper theme-default">
                    <div class="ribbon">
                    </div>
                    <div id="slider" class="nivoSlider">
<!-- note that no images added here -->
                    </div>
                </div>
            </div>
        </td>
    </tr>
</table>

后面的代码:使用变量来存储图像url。现在可以从DB获取URL并进行填充。在我的代码中，我使用了这些变量(也可以使用数组)来捕获url路径。您可以从任何来源获得路径，如Database, Xml或…

public string __ad1ImageUrl = "";
public string __ad2ImageUrl = "";
public string __ad3ImageUrl = "";
public string __ad4ImageUrl = "";
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        __ad1ImageUrl = "UserControls/Images/mainBanner1.jpg";
        __ad2ImageUrl = "UserControls/Images/mainBanner2.jpg";
        __ad3ImageUrl = "UserControls/Images/mainBanner3.jpg";
        __ad4ImageUrl = "UserControls/Images/mainBanner4.jpg";
    }
}
相关文章：