Question

I create a chart, and save it in the path server.mappath(“/images/chart/chartname.png”), and if I go to the path, the image is there, and I can open it on my computer, but what I would really like to do is display the image on the page after I create it, preferably asynchronously. I’ve tried putting a asp:image control in the update panel and changing the url, but that doesn’t work. I’ve tried a bunch of different ways, if someone could point me to the right direction, that would be great. I won’t post any code simple because what I have so far IS working. Once I start attempting to print the image I’ll post snippets if I have answers.

Edit: Here is some code

The button event that starts the whole thing:

Protected Sub btnCreate_Click(sender As Object, e As EventArgs) Handles btnCreate.Click

    Dim worker As New backgroundWorker

    'Check input

    worker.RunWorker({})

    Session("worker") = worker

    Timer1.Enabled = True

End Sub

This starts the worker, which generates the chart fine, and starts the timer which is used to update the panel. Eventually in that code, this happens

Dim imgpath As String = Server.MapPath("images/chart/test.png")
chart.SaveImage(imgpath, ChartImageFormat.Png)
chartImg.ImageUrl = "~/images/chart/test.png"

Now, I know that the panel is being updated after this code is executed, because I output some messages to a multiline textbox, and they do appear. All these controls are also in the contentTemplate of the updatePanel.

Answer 1

Setting the ImageUrl property of an ASP.Net image control, while within and update panel, should do the trick without having to use Javascript, although that method can be very efficient. UpdatePanels tend to be “heavy”, that is the ScriptManager, UpdatePanel, and ASP.Net ViewState tend to send a lot of information back and forth via their AJAX methods. You can see what I mean by using Fiddler to watch your web traffic.

That being said, I was able to achieve the desired effect in the following manner. I have two static images, Image1.jpg and Image2.jpg, but it should work with your dynamically generated image, as long as the URL is correct.

Here’s the text of my ASPX page:

<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>

    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <asp:Image ID="Image1" runat="server" ImageUrl="~/Image1.jpg" Width="300"></asp:Image><br />
            <asp:Button runat="server" ID="btnSwitchImage" Text="Switch" />
        </ContentTemplate>
    </asp:UpdatePanel>

</div>
</form>

And here is the code-behind:

public partial class WebForm1 : System.Web.UI.Page
{
    protected void Page_Load( object sender, EventArgs e )
    {
        btnSwitchImage.Click += new EventHandler( btnSwitchImage_Click );
    }

    void btnSwitchImage_Click( object sender, EventArgs e )
    {
        Image1.ImageUrl = "~/Image2.jpg";
    }
}

As long as the button and image controls are within the UpdatePanel’s ContentTemplate everything should be relayed via AJAX. Once again, use Fiddler to confirm this.

If this example works for you but you still can’t get your application working try posting some code in your question. It might help everyone analyze the problem directly.