使用 .NET Cookies 代码显示动态图像

Question

我正在使用 jQuery 和 C# 在页面上显示幻灯片图像。当所有图像都从 C# 代码加载时，JQuery 就会出现。

我在页面上有以下三个使用 c# 动态生成的图像。

<img id="image1" title="Enjoy a refreshing shower at 43,000 feet" alt="Enjoy a refreshing shower at 43,000 feet" src="/english/images/spa.jpg" style="display: block;">

<img id="image2"  title="The comfort of your own Private Suite" alt="The comfort of your own Private Suite" src="/english/images/suites.jpg" style="display: block;">

<img id="image3"  title="Socialize, relax, and indulge" alt="Socialize, relax, and indulge" src="/english/images/lounge.jpg" style="display: block;">

现在我想编写 C# 代码，它将读取上面的图像并将它们存储在 cookie 中。并根据 cookie 值显示图像。

因此，如果我看到了第一张图片，那么在下次访问该页面时，它将显示第二张图片，依此类推。在显示最后的图像之后，它将首先开始显示。基本上我希望实现以下逻辑。

"Each image will show in order and a cookie will maintain which image should be shown next. But the image should not change when the user logs in. Also the cookie will be cleared in case any one of the images are changed."

请指导我如何开始，如果我能提供一些示例代码将不胜感激

谢谢！

.NET 生成图像和隐藏输入的代码：

protected override void CreateChildControls()
        {

            // Always start with a clean form
            Controls.Clear();

            //Declaring the List for image list
            List<string> imageList = new List<string>();

            //Declaring the Collection object to add the image list
            NameValueCollection cookiecollection = new NameValueCollection();           

            int cntShow = 0;
            //Adding DIV4 for prev and next
            Panel div4 = new Panel();
            //Adding Input Hidden to get all the values from control
            HtmlGenericControl inputHidden = new HtmlGenericControl("input");
            foreach (FeaturedPromo promo in base.FeaturedPromos)
            {
                inputHidden = new HtmlGenericControl("input");
                inputHidden.Attributes["id"] = promo.ID + "Image";
                inputHidden.Attributes["type"] = "hidden";
                inputHidden.Attributes["src"] = promo.ImageSource;
                inputHidden.Attributes["alt"] = promo.ImageAlt;
                inputHidden.Attributes["title"] = promo.ImageTitle;
                inputHidden.Attributes["href"] = promo.ImageHref;
                inputHidden.Attributes["height"] = promo.ImageHeight;
                inputHidden.Attributes["width"] = promo.ImageWidth;
                inputHidden.Attributes["header"] = promo.ImageHeader;
                inputHidden.Attributes["subheader"] = promo.ImageSubHeader;
                inputHidden.Attributes["color"] = promo.ImageColor;

                this.Controls.Add(inputHidden);

                imageList.Add(promo.ID + "Image");

                if (cntShow == 0)
                {
                    //Add specific div for Featured Promo
                    Panel div1 = new Panel();
                    div1.Attributes["id"] = promo.ID;

                    if (cntShow == 0)
                    {
                        div1.Style["display"] = "block";
                    }
                    else
                    {
                        div1.Style["display"] = "none";
                    }

                    //Adding an Image
                    HtmlGenericControl image = new HtmlGenericControl("image");      
                    image.Attributes["src"] = promo.ImageSource;
                    image.Attributes["alt"] = promo.ImageAlt;
                    image.Attributes["title"] = promo.ImageTitle;

                    div1.Controls.Add(image);

                    //Adding two HREF for navigation
                    HtmlGenericControl alinkLeft = new HtmlGenericControl("a");
                    alinkLeft.Attributes["class"] = "slideshow-control-left";
                    alinkLeft.Attributes["href"] = "javascript:void(0);";
                    alinkLeft.Style["display"] = "inline";
                    div1.Controls.Add(alinkLeft);

                    HtmlGenericControl alinkRight = new HtmlGenericControl("a");
                    alinkRight.Attributes["class"] = "slideshow-control-right";
                    alinkRight.Attributes["href"] = "javascript:void(0);";
                    alinkRight.Style["display"] = "inline";
                    div1.Controls.Add(alinkRight);

                    //Adding Second div
                    Panel div2 = new Panel();
                    div2.CssClass = "slideshow-b";
                    div1.Controls.Add(div2);

                    //Adding Third div
                    Panel div3 = new Panel();
                    div3.CssClass = "slideshow-bl";
                    div2.Controls.Add(div3);

                    //Adding the A HREF Link
                    HtmlGenericControl alink = new HtmlGenericControl("a");
                    alink.Attributes["class"] = "slideshow-link";
                    alink.Attributes["href"] = promo.ImageHref;
                    div3.Controls.Add(alink);

                    //Adding the first span                
                    HtmlGenericControl span1 = new HtmlGenericControl("span");
                    span1.Attributes["class"] = "slideshow-header";
                    span1.InnerHtml = promo.ImageHeader;
                    alink.Controls.Add(span1);

                    //Adding line break
                    alink.Controls.Add(new LiteralControl("<br/>"));

                    //Adding the second span
                    HtmlGenericControl span2 = new HtmlGenericControl("span");
                    span2.Attributes["class"] = "slideshow-subheader";
                    span2.InnerHtml = promo.ImageSubHeader;
                    alink.Controls.Add(span2);
                    this.Controls.Add(div1);

                    if (base.FeaturedPromos.Count > 1)
                    {
                        //Adding DIV4 for prev and next
                        div4 = new Panel();
                        div4.CssClass = "slideshow-br";

                        //Adding DIV5 inside DIV4
                        Panel div5 = new Panel();
                        div5.CssClass = "slideshow-br-controls";
                        div4.Controls.Add(div5);

                        //Adding the PREV A HREF Link
                        HtmlGenericControl alinkPrev = new HtmlGenericControl("a");
                        alinkPrev.Attributes["class"] = "slideshow-br-controls-left";
                        alinkPrev.Attributes["href"] = "javascript:void(0);";
                        alinkPrev.Attributes["title"] = "Prev";
                        alinkPrev.Style["display"] = "inline";
                        alinkPrev.Attributes["CurrentDivID"] = promo.ID;
                        div5.Controls.Add(alinkPrev);

                        //Adding the span for prev and next buttons
                        HtmlGenericControl span3 = new HtmlGenericControl("span");
                        span3.Attributes["class"] = "slideshow-br-control-buttons";
                        int count = 0;
                        foreach (FeaturedPromo allPromo in base.FeaturedPromos)
                        {
                            if (count == 0)
                            {
                                //Adding the All HREF Link for Prev and Next
                                HtmlGenericControl aLLlinks = new HtmlGenericControl("a");
                                aLLlinks.Attributes["class"] = "" + count + "-banner-button";
                                aLLlinks.Attributes["href"] = "javascript:void(0);";
                                aLLlinks.Attributes["title"] = allPromo.ImageTitle;
                                aLLlinks.Style["display"] = "inline";

                                //aLLlinks.Attributes["id"] = "active-banner-slide";

                                span3.Controls.Add(aLLlinks);
                                count++;
                            }
                        }

                        div5.Controls.Add(span3);

                        //Adding the NEXT A HREF Link
                        HtmlGenericControl alinkNext = new HtmlGenericControl("a");
                        alinkNext.Attributes["class"] = "slideshow-br-controls-right";
                        alinkNext.Attributes["href"] = "javascript:void(0);";
                        alinkNext.Attributes["title"] = "Next";
                        alinkNext.Style["display"] = "inline";
                        alinkNext.Attributes["CurrentDivID"] = promo.ID;
                        div5.Controls.Add(alinkNext);
                        //div2.Controls.Add(div4);
                    }
                    this.Controls.Add(div1);
                    //this.Controls.Add(div4);
                    cntShow++;
                }
            }
            this.Controls.Add(div4);

            HttpCookie cookielist = new HttpCookie("ImageListOfCookies");

            for (int i = 0; i < imageList.Count; i++)
            {
                cookiecollection.Add("Image_" + i, imageList[i]);                
            }
            cookielist.Values.Add(cookiecollection);
            HttpContext.Current.Response.Cookies.Add(cookielist);


        }

Answer 1

如果您想使用 Cookie 来完成它，那么由于您自己首先要显示图像，因此您知道要显示哪些图像，因此不要存储指向图像的链接（可能会很长）这样做：

• 为每个图像分配一个 ID，例如 1 为 spa.jpg ，2 为 suites.jpg 或者更好，如果文件名始终是唯一的，那么让文件名作为 ID。

• 然后，当您显示图像时，像这样在 cookie 中附加 ID（我使用 | 来促进拆分并将 cookie 数量减少到只有一个）。

.

//For example to store "spa" if spa image has been stored
 if(Response.Cookies["Shown_Images"] != null)
 {
   Response.Cookies["Shown_Images"].Value = Response.Cookies["Shown_Images"] + "|spa";
 }
else
{
   Response.Cookies["Shown_Images"].Value = "spa";
}

然后检索spa.jpg是否已显示

if(Response.Cookies["Shown_Images"] != null)
{
   string[] images_shown = Response.Cookies["Shown_Images"];
   if(images_shown.Contains("spa"))
   {
       //If True then do processing;
   }
   else
   {
       //False then do as required
   }
}

Answer 2

如果你想用 jQuery 做这个客户端，你可以使用 cookies 插件来读/写 cookie。这是一个示例，它将默认显示第一个图像，然后创建一个具有 2 个值（LastDisplayed、Size）的 cookie 以确定接下来要显示的图像。

使用的脚本

<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/jquery.cookie.js" type="text/javascript"></script>
<script src="Scripts/json2.js" type="text/javascript"></script>

使用的样式

<style type="text/css">
    .hide
    {
        display: none;
    }
</style>

使用的 JavaScript（使用 jQuery's Cookie Plugin 和 JSON.org's JSON2）。

    $(document).ready(function () {
        // Add class to hide all the images
        $('img').addClass('hide');

        // Get the cookie to figure out the last image displayed
        var cookieval = $.cookie('the_cookie');


        if (cookieval != null) {
            // Parese cookie value into object
            var obj = JSON.parse(cookieval);

            // Check if last displayed is less than the total
            if (obj.LastDisplayed < obj.Size) {
                // Increment Count
                obj.LastDisplayed++;
                // Show next image
                $('img:eq(' + obj.LastDisplayed + ')').removeClass('hide');
            } else {
                // Reset last displayed to 0
                obj.LastDisplayed = 0;
                // Show first image
                $('img:eq(0)').removeClass('hide');
            }

            // Update Cookie
            $.cookie('the_cookie', JSON.stringify(obj));
        } else {
            // Show first image
            $('img :eq(0)').removeClass('hide');
            // Create object to store last displayed and total available
            var obj = {};
            obj.LastDisplayed = 0;
            obj.Size = $('img').length - 1;

            // Create the cookie
            $.cookie('the_cookie', JSON.stringify(obj));
        }
    });