How to display dynamic images stored in a database in a Visual WebGui application
Eyal.Albert posted on August 26, 2008 :: 3254 Views :: User Rating:
In this “How to” we will learn how to display dynamic images stored in a database in a Visual WebGui application.
You should be familiar by now with What is Visual WebGui and What is Visual WebGui over Silverlight. It’s recommended that you read “How to create a Visual WebGui Silverlight application” and other articles in our “Get Started with Silverlight” section.
Prior to version 6.1.3, in case you wanted to display dynamic images stored in a database you had to create your own Gateway that will provide you with a virtual URL to the image. As of version 6.1.3 we can use DatabaseResourceHandle to create a virtual URL to the image.
DatabaseResourceHandle provides a base class that enables you to create a smart database resource handle. The DatabaseResourceHandle implements StaticGatewayResourceHandle, IStaticGateway.
I’ve created a new Database with a table that holds images in it.
Let’s create a new Visual WebGui Silverlight application.
Next, we’ll add three PictuerBox to our form.
Now, we’ll add a new class named DBPictureResourceHandle
DBPictureResourceHandle will inherit from DatabaseResourceHandle
public class DBPictureResourceHandle: DatabaseResourceHandle
We will add a constructor to our class.
public DBPictureResourceHandle()
{
}
public DBPictureResourceHandle(int intImageId)
: base(intImageId.ToString())
{
}
Next, we’ll override the GetConnection function that will set the connection to our Database.
protected override IDbConnection GetConnection()
{
return new SqlConnection(@"Data Source=DEVSRV\SQLEXPRESS;Initial Catalog=ImageTest;Integrated Security=True;");
}
We will also override the GetDataReader function to return a Data reader according to a query that we created.
protected override IDataReader GetDataReader(IDbConnection objConnection, string strQualifier)
{
SqlCommand objCommand = new SqlCommand("SELECT Image AS [Content], 'image/jpeg' AS ContentType FROM Images WHERE (Id = @Id)", (SqlConnection)objConnection);
objCommand.Parameters.Add(new SqlParameter("Id", strQualifier));
return objCommand.ExecuteReader();
}
Next, we will override the UseAuthentication property to allow us decide if the Url will require an authentication or not. For the first one we will not use authentication.
protected override bool UseAuthentication
{
get
{
return false;
}
}
Let’s open the Form1 in our application and add a button and two picture boxes.
On the button click event we will set the image to the picture box. We’ll add an int member called mPicId that will be the picture id that we want to display and will change every time we click the button.
int mPicId = 0;
private void button1_Click_1(object sender, EventArgs e)
{
mPicId++;
pictureBox1.Image = new DBPictureResourceHandle(mPicId);
}
Ok let’s run our application and see the result.
Now, we’ll create another ResourceHandle but this time it will require authentication. Create a new class named DBPictureResourceHandleAuth and copy the
DBPictureResourceHandle to it. Change the UseAuthentication to return true.
protected override bool UseAuthentication
{
get
{
return true;
}
}
Next, we’ll set the second picture box to use the DBPictureResourceHandleAuth.
public Form1()
{
InitializeComponent();
pictureBox2.Image = new DBPictureResourceHandleAuth(1);
}
Let’s run the application and see the result.
Now, let’s see how well the authentication works. To get the URL of the image I use the IE Developer Toolbar. Open it and select the first PictureBox without the authentication and copy the image URL from the value column.
Open a new browser and paste the URL there and you will see the image.
Now do the same thing with the other PictureBox with the authentication and past the URL in a new browser. You will get a server error Session authentication failed.
This is happens because when UseAuthentication is set to true we add the session guid to the URL.
You can override the authentication mechanism by doing this:
Adding a constructor that will get a token.
public DBPictureResourceHandleAuth(int intEmployeeID, string strToken)
: base(intEmployeeID.ToString(), strToken)
{
}
Overriding the authentication method
protected override void Authenticate(IDbConnection objConnection, string strToken)
{
if (strToken != "dd")
{
throw new HttpException(401, "The token must be 'dd'...");
}
}
And using the new constructor to create the instance.
pictureBox2.Image = new DBPictureResourceHandleAuth(1, "dd");
To summarize:
We have seen how to use Visual WebGui DatabaseResourceHandle and we used it to display dynamic images form a database. We create a DatabaseResourceHandle without authentication and seen how to get the URL and re use it. And we’ve seen how to create an authenticated DatabaseResourceHandle that can not be used unless the right token is given.
-- Eyal Albert @ Eyal.Albert (at) Gizmox.com
I have tried this solution but no picture shown. I tried to trace the class on GetConnection and GetDataReader, unfortunately, these two functions are never run.
I'm using VS 2008, VWG 6.2a and .Net 3.5
Posted by Chen Bin on Sunday, October 26, 2008 7:05 AM
is there an article that shows how to store the images into a database?
Posted by conrad on Tuesday, July 21, 2009 1:09 PM