WebPart to display Images from SQl Server database

I had a requirenment for creating a WebPart which will display Images stored in SQL Server database.

The Steps Involved are :

1. Create a WebPart Project using vsewss (Download Vsewss extensions, if you dont have this). or wspbuilder as per your choice.

2. Add a gridview control in the class file for the project. This grid will display the Images in the webpart.

3. Create a Httphandler - To Pull in the Images from SQL, we will create an HttpHandler and will deploy it along with our webpart soultion file. To see how to create an HttpHandler see : Create Custom HttpHandler in SharePoint

4. Now, once you have created that blank httphandler in your webpart project, you need to simply Change the Code in the httpHandler file to below

<%@ Assembly Name="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c " %>

<%@ Assembly Name="OurCustomWebPartNameSpace, Version=1.0.0.0, Culture=neutral, PublicKeyToken=9f4da00116c38ec5" %> // Add this after you build the soultion with Cutsom handler.

<%@ WebHandler Language="C#" Class="OurCustomWebPartNameSpace.MyCustomHandler" %>

using System;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;
using Microsoft.SharePoint.WebPartPages;
using System.Data.Common;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;

namespace OurCustomWebPartNameSpace
{

public class MyCustomHandler: IHttpHandler
{

public bool IsReusable
{

get { return false; }

}

public void ProcessRequest(HttpContext context)
{

SPSite mySite = SPContext.Current.Site;
SPWeb myWeb = mySite.OpenWeb();

//Using RunWithElevatedPrivileges
SPSecurity.RunWithElevatedPrivileges(delegate()
{
using (SPSite siteCollection = new SPSite(mySite.ID))
{

using (SPWeb web = siteCollection.OpenWeb(myWeb.ID))
{

web.AllowUnsafeUpdates = true;
try
{

context.Response.ContentType = "image/jpeg";

SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["MyConnString"].ConnectionString);

SqlDataReader Reader = null;
string imageid = context.Request.QueryString["ImgID"];

// SqlConnection conn = new SqlConnection("your_connectionstring");
conn.Open();
SqlCommand comm = new SqlCommand("select empphoto from EmployeeDetailTable where EmpNumber="+ imageid, conn);

Reader = comm.ExecuteReader(CommandBehavior.CloseConnection);
Reader.Read();
context.Response.BinaryWrite((Byte[])Reader["empphoto"]);

context.Response.End();

}
catch (Exception myException)
{

Microsoft.Office.Server.Diagnostics.PortalLog.LogString("Exception Occurred: {0} {1}", myException.Message, myException.StackTrace);
} // Error logging in SharePoint logs.

web.AllowUnsafeUpdates = false;
}
}
});
}
}}}

5. Now, In your WebPart Class file add a new template for the Gridview control. In Item template add a Image type control and specify its url propery as below :

ImageUrl="../../_LAYOUTS/MyWebPartHandler/MyCustomHandler.ashx?ImgID=1000"

Or if you are using a user control then use

<asp:Image ID="Image1" runat="server" ImageUrl='<%# "../../_LAYOUTS/MyWebPartHandler/MyCustomHandler.ashx?ImgID=1000" %>'/>
Thats it.

6. Now build and deploy your WebPart. Verify that the handler gets deployed to layouts folder.

2 comments:

  1. Are you a Sharepoint developer? If Yes, the why not Sell your webparts and earn some extra money.
    Visit
    Submit Your WebPart

    ReplyDelete
  2. I've tried this but instead of displaying the image, it display the binary data, i'm trying with sharepoint 2010 though, any idea why? thanks in advance...

    ReplyDelete

Disclaimer

This is a personal weblog. The opinions expressed here represent my own and not those of my employer or anyone else. Should you have any questions or concerns please e-mail me at sharepointprogrammingblogger@gmail.com .

Copyright (c) 2010 @ myshaepointwork.blogspot.com. All rights are reserved.Do Not Copy.

@ Learning SharePoint.com