Displaying Images from Database into an ASP:IMAGE control

Just recently, while working on a project, I stumbled upon a need to fetch images from the SQL Database and display them in the image control on the page.

I did a bit of research and landed upon a concept of using GENERIC HANDLERS for that purpose.

I found that really useful as compared to any other approach of saving the files to disk and setting the URLs etc.

Here is what can be done:

1. Add a new GENERIC HANDLER (ImageDisplay.ashx) to the project.
2. Set the ImageControl's ImageUrl to this ashx page..

imgDisplay.ImageUrl = "ImageDisplay.ashx?imageId=1";

where imageId is the Database ID of the image that needs to be fetched.
3. Now write code to fetch data from Database for that imageId in the ProcessRequest event of the ashx page.

public void ProcessRequest(HttpContext context)
{
Int32 imageId = Convert.ToInt32(context.Request.QueryString["imageId"]);

// This is the function that returns the Byte Array from the Database
Byte[] pict = GetImageById(imageId);
context.Response.ContentType = "image/bmp";
context.Response.OutputStream.Write(pict, 0, pict.Length);
}

4. The method GetImageById would depend upon the Database and data-type that you have for the column for image. Since I had a MySQL database with BLOB column, which can hold a Byte[], the method was quite simple for me and I just had to pull it out from Database and insert it into a Byte[] object.

-- Ashutosh

TabContainer cannot have children of type.....

Recently, I encountered the problem quite similiar to the one above.....

TabContainer cannot have children of type
'System.Web.UI.WebControls.Repeater'

to be precise...

I googled quite a bit for this error, but could not find much about it.. No wonders.. It was a careless mistake that I had made. Here is the control that caused this issue....

<cc1:tabcontainer id="tabToolbox" runat="server">
<cc1:tabpanel id="pnl" headertext="Most Popular">
<contenttemplate>
<asp:repeater id="rptMostPopular" runat="server">
<itemtemplate>
<asp:linkbutton id="lnkPopular" runat="server" text=""></asp:linkbutton>
</itemtemplate>
</asp:repeater>
</contenttemplate>
</cc1:tabpanel>
<cc1:tabpanel id="pnl2" headertext="Most Viewed">
<contenttemplate>
<asp:repeater id="rptMostViewed" runat="server">
<itemtemplate>
<asp:linkbutton id="lnkPopular" runat="server" text="">&jt;/asp:linkbutton>
</itemtemplate>
</asp:repeater>
</contenttemplate>
</cc1:tabpanel>
<cc1:tabpanel id="pnl3" headertext="Most Emailed">
<contenttemplate>
<asp:repeater id="rptMostEmailed" runat="server">
<itemtemplate>
<asp:linkbutton id="lnkPopular" runat="server" text=""></asp:linkbutton>
</itemtemplate>
</asp:repeater>
</contenttemplate>
</cc1:tabpanel>
</cc1:tabcontainer>

Well...... A very simple reason for getting this error, even on the designer and also at runtime..
I FORGOT THE TAG "RUNAT=SERVER" WHILE DESCRIBING THE TAB PANELS AND therefore could not get the tab-panels to be server side...

This is what raised the issue.

A simple addition of RUNAT=SERVER solves the issue...


Hope this would help someone in need... :)

--Ashutosh

Showing ModalPopUpExtender from Client Side

Just recently, I came across a situation where I needed to display a modal popup dialog box from my left navigation bar links.

Now the problem it had was all those links were actually Anchor (HREFs) and therefore they had a few problems in getting it to show the modal pop-up.

So here is how I finally got it done through Javascript...

This is the HREF that I created

<a href='' onclick='javascript:fncShowPopUp();return false;'>Edit Profile</a>

And here is what is required in the fncShowPopUp function:

function fncShowPopUp()

{

var popUpExtender = $find("ModalPopupExtender");

if(popUpExtender)

{

popUpExtender.show();

}

return false;

}

return false; is something that would actually stop the HREF from inducing a postback on the page, since if there is a post back, the Modal Popup would be hidden once again..

Njoy

-- Ashutosh