How to use graphics inside update panel?

Last post 06-09-2007 3:53 PM by jrboddie. 2 replies.

Sort Posts:

  • How to use graphics inside update panel?

    06-09-2007, 9:03 AM
    • Loading...
    • jrboddie
    • Joined on 05-24-2007, 5:45 PM
    • Posts 6

    I am trying to create graphics "on the fly" and display the results without updating the whole page.  I have a method in a button click handler which creates and saves a graphic.  I have an image control which has the graphic file as its imageUrl source.  When the image control is outside the update panel, I can redraw the image on each button click (but, of course the whole page updates).  When I put the image control inside the update panel and trigger the panel with the button click, the graphic does not update.

     Can anyone please direct me to the proper way to do this?

     Thanks.

  • Re: How to use graphics inside update panel?

    06-09-2007, 2:02 PM
    Answer

    I use the following approach for custom graphics generation for image verification inside an UpdatePanel. Try converting your custom graphic into an aspx file using the model of VerificationImage.aspx[.cs] as shown below. Use a parameter to make sure you pull the required image instead of getting a stale cached version if needed.

    EXAMPLE 

     VerificationImage.aspx
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="VerificationImage.aspx.cs" Inherits="Example.WebSite.VerificationImage" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
    <title>Untitled Page</title>
    </head>
    <body>
    <form id="form1" runat="server">
    <div>
    <asp:Image ID="m_verificationImage" runat="server" />
    </div>
    </form>
    </body>
    </html>
     VerificationImage.aspx.cs
    using System;
    using System.Data;
    using System.Configuration;
    using System.Collections;
    using System.Web;
    using System.Web.Security;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.UI.WebControls.WebParts;
    using System.Web.UI.HtmlControls;
    using System.Drawing;
    using System.Diagnostics;

    namespace Example.WebSite
    {
    public partial class VerificationImage : System.Web.UI.Page
    {
    protected void Page_Load(object sender, EventArgs e)
    {
    Session[Helpers.SessionInfo.ImageText] = "";

    Verify.ImageVerify imgVer = new Verify.ImageVerify(); // Note: Verify.ImageVerify is my custom class
    string imageText = imgVer.GetRandomAlphaNumeric(4);
    Session[Helpers.SessionInfo.ImageText] = imageText;
    Bitmap imageBitMap = imgVer.GenerateImage(imageText);
    imageBitMap.Save(Response.OutputStream, System.Drawing.Imaging.ImageFormat.Gif);

    }
    }
    }

    Reference to image used in an UpdatePanel

    <asp:Image ID="m_verificationCodeImage" runat="server" ImageUrl="~/UtilityControls/VerificationImage.aspx" />
     

     Updating the ImageUrl server side in code behind
     

        private void UpdateVerificationImage()
    {
    string postbackUrlParam = ? // add code to generate a unique parameter to prevent caching m_verificationCodeImage.ImageUrl = "~/UtilityControls/VerificationImage.aspx?" + postbackUrlParam;
    }
     
     
  • Re: How to use graphics inside update panel?

    06-09-2007, 3:53 PM
    • Loading...
    • jrboddie
    • Joined on 05-24-2007, 5:45 PM
    • Posts 6

    Thank you for your detailed reply.  The cache was my problem.  Your solution for getting a fresh copy of the image by generating a parameter works for me.

Page 1 of 1 (3 items)
Microsoft Communities
Page view counter