Updating image button with AJAX

I just installed the new AJAX package from microsoft and I'm trying to update an existing program to AJAX. I added all the stuff to Config.web to make AJAX "work".

My original program contained an image button, some radio controls, and another button. When the page loads, or when either button is clicked, the code draws a new bitmap and saves it. When the postback completes, the image button displays the new image. So far, so good.

After my attempted conversion to AJAX, I added a script manager and put the image button inside an update panel. The other button is also used as a trigger for the same update panel.

When I click the bitmap, it calls the Load and Click routines as before. The code draws the new bitmap and saves it. However, the bitmap on the client side doesn't change. I would have expected the contents of the update panel to be updated.

When I click the other button, the Load and Click events are called, but nothing happens on the client side.

I added an UpdateProgress to the page. It becomes "visible" when I click the bitmap, but nothing visibly happens when I click the other button. The code in the click events take a second or more to draw the new bitmap, since a lot of "number-crunching" is involved.

You would need to post a minimal yet complete sample that reproduces the problem in order to accurately determine what you are doing wrong.

I would highly suggest testing with Firefox. Under the Tools menu, you will find an Error Console. That will help greatly with debugging client-side errors. Start with that and then get back to us.

Here's the event code for loading the page, the imagebutton click and the buttonclick. They each draw the bitmap and save it to the url for the bitmap button. Before I used AJAX, each event updated the image during a postback. Now only the Load event shows the initial image, but the button clicks do not update the image. They DO fire the events, and the bitmap does get redrawn and saved, but nothing changes on the page. Although the imagebutton is inside the UpdatePanel, it still isn't getting updated.

Code:

---


    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then
            imgPath = Server.MapPath("~/images/Brot.bmp")
            w = ImageButton1.Width.Value
            h = ImageButton1.Height.Value
            siz = New Size(w, h)
            bmp = New Bitmap(w, h, fmt)
            hgr = Graphics.FromImage(bmp)
            rectF = New RectangleF(-2, -1.5, 3, 3)
            zoom = 1 / 4
            PlotBmp(bmp, siz, rectf, 2, 100)
            bmp.Save(imgPath)
            Session("rectf") = rectf
            Session("zoom") = zoom

        End If
    End Sub
    Protected Sub ImageButton1_Click(ByVal sender As Object, ByVal e As System.Web.UI.ImageClickEventArgs) Handles ImageButton1.Click
        Dim x, y As Double
        Dim imax As Integer

        rectF = Session("rectf")
        zoom = Session("zoom")
        imgPath = Server.MapPath("~/images/Brot.bmp")
        w = ImageButton1.Width.Value
        h = ImageButton1.Height.Value
        siz = New Size(w, h)
        bmp = New Bitmap(w, h, fmt)
        hgr = Graphics.FromImage(bmp)
        x = CDbl(e.X) * rectF.Width / CDbl(w) + rectF.Left
        y = rectF.Bottom - CDbl(e.Y) * rectF.Height / CDbl(h)
        rectF.Width *= zoom
        rectf.Height *= zoom
        rectF.X = x - rectF.Width / 2
        rectF.Y = y - rectF.Height / 2
        imax = 300.0 / rectF.Width
        PlotBmp(bmp, siz, rectF, 2, imax)
        bmp.Save(imgPath)
        Session("rectf") = rectf
    End Sub
    Protected Sub btnReset_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnReset.Click
        imgPath = Server.MapPath("~/images/Brot.bmp")
        w = ImageButton1.Width.Value
        h = ImageButton1.Height.Value
        siz = New Size(w, h)
        bmp = New Bitmap(w, h, fmt)
        hgr = Graphics.FromImage(bmp)
        rectF = New RectangleF(-2, -1.5, 3, 3)
        PlotBmp(bmp, siz, rectF, 2, 100)
        bmp.Save(imgPath)
        Session("rectf") = rectF
    End Sub

---

Quote:

---

Originally Posted by bsaucer

Although the imagebutton is inside the UpdatePanel, it still isn't getting updated.

---

Could it be a cache problem?

Firefox shows no errors. I'm not getting any error messages. All of my server code is executing when it is supposed to. The updatePanel is just not updating the image button's image when it is supposed to.

I just added a label inside the update panel, and added code to update it within the load and click events. The label is getting updated properly, but the imagebutton is not. However, to verify that the image file itself is getting updated, I looked at it in a viewer, and it is getting updated by the code.

Is there some way to "flag" the imagebutton so that it gets redrawn whenever the updatepanel is updated?

Can you post the code that is supposed to handle the updating of the image on the clien't browser?

I assumed that updating the image is automatic in an update panel. I added a label to the update panel. I update the text in the label when I redraw the image. The label gets updated automatically, but the image does not.

So far all the reading I've done seems to indicate a caching problem, but I don't know how to turn that off. Other people also have problems with certain controls not getting updated. I have the same issues in IE7, Firefox (latest) and both engines in Netscape browser.

Quote:

---

Originally Posted by bsaucer

So far all the reading I've done seems to indicate a caching problem

---

Well, if you read my second post, you will see that I suggested that. You can fix it by adding headers.

Code:

---

<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

---

I tried adding that to the header. It still doesn't work.

Here's my main html file:

Code:

---

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Mandelbrot.aspx.vb" Inherits="_Default" %>

<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI" TagPrefix="asp" %>

<!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>Mandelbrot</title>
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
</head>
<body style="font-family: Times New Roman; background-color: silver">
    <form id="form1" runat="server">
    <div style="text-align: center">
        <strong><span style="font-size: 16pt"><em>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            Explore the</em><br /></span><span style="color: brown">
            <span style="font-size: 48pt; font-family: Arial"><span style="color: sienna">MANDELBROT!</span></span><br />
        </span>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" EnableViewState="False">
                <ContentTemplate>
                <asp:ImageButton ID="ImageButton1" runat="server" Height="400px" Width="400px" ImageUrl="~/images/brot.bmp" /><br />
                    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>&nbsp;
                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="btnReset" EventName="Click" />
                </Triggers>
            </asp:UpdatePanel>
            &nbsp;&nbsp;&nbsp;Click picture to:<asp:RadioButton ID="rbZoomIn" runat="server" Checked="True" GroupName="Click" Text="Zoom in" />
                    <asp:RadioButton ID="rbZoomOut"
                        runat="server" GroupName="Click" Text="Zoom out" />
                    <asp:RadioButton ID="rbPan" runat="server" GroupName="Click" Text="Pan" />&nbsp;
            <br />
                    <asp:Button ID="btnReset" runat="server" Font-Bold="True" Text="Reset" Width="66px" /><asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
                        <ProgressTemplate>
                            Updating. Please wait...
                        </ProgressTemplate>
                    </asp:UpdateProgress>
            </strong></div>
    </form>
</body>
</html>

---

Have you cleared your cache and then tried this code? If that doesn't work. Then it isn't a cache problem.

I finally figured out something that works:

After redrawing the bitmap, I "change" the imageURL of the imagebutton to something different each time, by appending "?a=" followed by a number which gets incremented each time.

Now I have one last problem (Should I start a new thread?): The ProgressTemplate control doesn't "show" itself when I click the reset button. The reset button is associated to the update panel, and does trigger an update. Clicking the image button does cause the ProgresTemplate to "show" itself after half a second.