Strange behaviour of ViewState

Question

I have an Asp.Net page (named 'PostAD') which allows user to upload up to 4 pictures. The file upload button function is as follows:

protected void btnUpload_Click(object sender, EventArgs e)
{
    if ((ViewState["Img1"] != null) && (ViewState["Img2"] != null) && (ViewState["Img3"] != null) && (ViewState["Img4"] != null))
    {
        lblUploadMsg.Text = "You cannot upload more than 4 pictures";
        return;
    }
    if (FileUpload1.HasFile)
    {
        //FileUpload1.Attributes.Clear();
        string fileExtension = System.IO.Path.GetExtension(FileUpload1.FileName);
        if (fileExtension.ToLower() == ".jpg")
        {
            int fileSize = FileUpload1.PostedFile.ContentLength;

            if (FileUpload1.PostedFile.ContentLength < 2097152)
            {

                //FileUpload1.SaveAs(Server.MapPath("~/Temp/" + FileUpload1.FileName));
                //Response.Write("Successfully Done");

                string sp = Server.MapPath("~/ItemPictures/");
                String fn = Guid.NewGuid().ToString() + FileUpload1.FileName.Substring(FileUpload1.FileName.LastIndexOf("."));
                if (sp.EndsWith("\\") == false)
                    sp += "\\";
                sp += fn;
                FileUpload1.PostedFile.SaveAs(sp);
                lblUploadMsg.ForeColor = System.Drawing.Color.Green;
                lblUploadMsg.Text = "Picture Uploaded successfully. You can upload upto 4 pictures";

                if (ViewState["Img1"] == null)
                {
                    ViewState["Img1"] = "~/ItemPictures/" + fn;
                }
                else if (ViewState["Img2"] == null)
                {
                    ViewState["Img2"] = "~/ItemPictures/" + fn;
                }
                else if (ViewState["Img3"] == null)
                {
                    ViewState["Img3"] = "~/ItemPictures/" + fn;
                }
                else if (ViewState["Img4"] == null)
                {
                    ViewState["Img4"] = "~/ItemPictures/" + fn;
                }
            }
            else
            {
                lblUploadMsg.Text = "Maximum 2MB files are allowed";
            }
        }
        else
        {
            lblUploadMsg.Text = "Only JPG files are allowed";
        }
    }
    else
    {
        lblUploadMsg.Text = "No File was Selected";
    }
    ShowAvailblImgs();
}

I have four Asp.Net images that are invisible at page load time. To show them i have the following code.

private void ShowAvailblImgs()
{
    if (ViewState["Img1"] != null)
    {
        //The string URL variable is used just to show what value ViewState["image1"] currently has.
        string URL = (string)ViewState["img1"];
        Response.Write(URL);
        Image1.ImageUrl = (string)ViewState["img1"];
        Image1.Width = 130;
        Image1.Height = 130;
        Image1.Visible = true;
    }
    else
        Image1.Visible = false;
    if (ViewState["Img2"] != null)
    {
        Image2.ImageUrl = (string)ViewState["img2"];
        Image2.Width = 130;
        Image2.Height = 130;
        Image2.Visible = true;
    }
    else
        Image2.Visible = false;
    if (ViewState["Img3"] != null)
    {
        Image3.ImageUrl = (string)ViewState["img3"];
        Image3.Width = 130;
        Image3.Height = 130;
        Image3.Visible = true;
    }
    else
        Image3.Visible = false;
    if (ViewState["Img4"] != null)
    {
        Image4.ImageUrl = (string)ViewState["img4"];
        Image4.Width = 130;
        Image4.Height = 130;
        Image4.Visible = true;
    }
    else
        Image4.Visible = false;
}

I am having very strange behaviour of ViewState variable. Upon loading images, they are not shown in Asp.Net image control. Instead empty image areas are shown. Though the URL variable i used print exact path to the image. Upon saving the image (which are really blank image areas), it get saved my .aspx page. I was using Session variable which worked fine but due to some reasons, i want to use ViewState variable.

Answer 1

ViewState is fine. You are using different case for your ViewState index string, so they don't refer to the same ViewState property. "Img1" is not equal to "img1".

ViewState["Img1"] != null)
    {
        Image2.ImageUrl = (string)ViewState["img1"];

I recommend either using a constant for the value name, as below.

    const string image1 = "img1";
    const string image2 = "img2";
    const string image3 = "img3";
    const string image4 = "img4";

Or refer to my blog post to create strongly-typed pseudo-properties using extension methods. http://coding.grax.com/2013/06/simple-strongly-typed-pattern-for.html

Answer 2

I don't want to say a wrong thing, but, reading from documentation, it was written that

"Viewstate is used to preserve page and control values between round trips" http://msdn.microsoft.com/en-us/library/ms178198(v=vs.85).aspx

Have you tried to put the URLs in variables, and then assigning to ViewState["imgX"], and try to do another Postback and see if the ViewState["imgX"] contains the URL?