Question

Before while my web application was “on-premise” solution I used “standard” asp.net chart control with disk storage mode. Like this :

<asp:Chart ID="AssetDistChart" runat="server" BackColor="Transparent" 
    Width="250px" Height="350px" ImageStorageMode="UseImageLocation" ImageLocation="~/files/categories_#SEQ(30,20)"> ...

With this all my chart’s pictures are generated with name categories_XXX in folder /files… And that worked perfect.

Now, I need to transfer my solution to Azure platform and storing chart images on disk is not option for me anymore. So I created my own chart handler which saves/loads chart images from Blob storage. Handler is below :

public class ChartImageHandler : IChartStorageHandler
    {
        ...

        public void Delete(string key)
        {
            CloudBlob csv = chartContainer.GetBlobReference(key);
            csv.Delete();
        }

        public bool Exists(string key)
        {
            bool exists = true;
            WebClient webClient = new WebClient();
            try
            {
                using (Stream stream = webClient.OpenRead(key))
                { }
            }
            catch (WebException)
            {
                exists = false;
            }
            return exists;
        }

        public byte[] Load(string key)
        {
            CloudBlob image = chartContainer.GetBlobReference(key);
            byte[] imageArray;
            try
            {
                imageArray = image.DownloadByteArray();
            }
            catch (Exception e)
            {
                System.Threading.Thread.Sleep(1000);
                imageArray = image.DownloadByteArray();

            }
            return imageArray;
        }

        public void Save(string key, byte[] data)
        {
            CloudBlockBlob pictureBlob = chartContainer.GetBlockBlobReference(key);
            pictureBlob.UploadByteArray(data);
        }
    }

Also, my asp.net chart control is now like this :

<asp:Chart ID="AssetDistChart" runat="server" BackColor="Transparent" 
    Width="250px" Height="350px" ImageStorageMode="UseHttpHandler">

And also I edited chart settings in web.config to use this new handler.

This handler works but my pictures are saved with generic name :

chart_0.png
chart_1.png
…

How can I manage my own names of files like before. I try to add ImageLocation="~/files/categories_#SEQ(30,20)"

to asp.net chart control but without success. How can I set my own name(keys) and where to place that? In handler, asp.net chart control or in codebehind file where char control is declared.

Answer 1

In above code, when you store your image in Azure Blob storage you are directly storing it inside a container so you when access them you retrieve as

http://azure_storage_name.*/_containername_/chartimage_name

Alternatively you can create a folder type chart image name such as files/categories_1 and files/categories_2 etc, which will be stored in Azure Blob store as:

http://azure_storage_name.*/_containername_/files/categories_1
http://azure_storage_name.*/_containername_/files/categories_2

To get it, you just need to change your code while you are saving it in your Save() function:

string key = "files/myimage_1.jpg";
CloudBlockBlob pictureBlob = container.GetBlockBlobReference(key);

So when you image will save it will be saved as in your azure storage /container_name/files/myimage_1.jpg which you can verify by accessing the Windows Azure Storage.

Now when you read it just read the key and you will get file name as you expected. You may need to massage your code to get the way you want, but I have given you an idea how to do it.