ImageURL doesn't work inside Update Panel

问题

I am writing a captcha authentication program in ASP.NET C#. The problem i face is that the image gets refreshed on entering wrong value during a postback; but same image doesn't get refreshed during a partial postback, when i keep them inside an update panel.

aspx source

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>            
            <asp:Image ID="ImageCaptcha" runat="server" ImageUrl="~/BringImg.aspx" /><br />
            <asp:TextBox ID="txtCaptcha" runat="server" ></asp:TextBox><br />                        
            <asp:Button ID="btnSubmit" runat="server" Text="Submit Project"  OnClick="btnSubmit_Click"/>
            </ContentTemplate>
</asp:UpdatePanel>

Code Behind:

private System.Random rand = new System.Random();
protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            this.Session["Captcha"] = GenerateRandomCode();
        }
    }
protected void btnSubmit_Click(object sender, EventArgs e)
    {
        string temp = this.Session["Captcha"].ToString();
        if (string.Compare(temp, this.txtCaptcha.Text.Trim()) == 0)
        {            
            // success logic
        }
        else
        {                     
            this.lblResult.Text = "Validation Text was not correct.";
            this.Session["Captcha"] = GenerateRandomCode();
            ImageCaptcha.ImageUrl = "~/BringImg.aspx";
            ImageCaptcha.DataBind();
        }
    }

回答1:

I'm guessing your ~/BringImg.aspx page is setting it's content type to an image and generating your captcha image based off that session value. The image likely isn't updating during partial postback because the browser doesn't realize that the image content has changed. There are several ways to let the browser know the image has changed but one of the easiest to test is to apply a meaningless querystring (different for each image) to the ImageUrl of the captcha.

protected void btnSubmit_Click(object sender, EventArgs e)
{
    string temp = this.Session["Captcha"].ToString();
    if (string.Compare(temp, this.txtCaptcha.Text.Trim()) == 0)
    {            
        // success logic
    }
    else
    {                     
        this.lblResult.Text = "Validation Text was not correct.";
        this.Session["Captcha"] = GenerateRandomCode();
        ImageCaptcha.ImageUrl = string.Format("~/BringImg.aspx?refresh={0}", Guid.NewGuid());
        ImageCaptcha.DataBind(); //This isn't necessary
    }
}

回答2:

Try setting update panel update mode to "Conditional" and update the update panel after binding the captcha.

UpdatePanel1.Update();

Hope this might work.

回答3:

I fully agree with commenty above from @Aren . I have worked with update panels for 4 years and seen it doing all weired stuff sometimes . Use Jquery ajax rather which u can see transparently whats happened and IMO its really faster too.

This sounds like a caching issue. Make sure the end image has a random value to url . that way it will not use a cached version of image. Use firebug to see the GET request in Net panel and see if its dowloading latest image or not.

Not sure What does it mean at this line . What will be imageurl set to after execution .

ImageCaptcha.ImageUrl = "~/BringImg.aspx";

回答4:

Any reason not to use recaptcha? I guarantee its a better solution and its free. http://www.google.com/recaptcha/whyrecaptcha

Your code above uses two different values in session - is this intentional or a source of your issue?:

Captcha and CaptchaImageTest

来源：https://stackoverflow.com/questions/7259587/imageurl-doesnt-work-inside-update-panel

标签

ASP.NET

ajax

updatepanel

captcha