Image from DB as ToolTip in GridView(IE only)

January 9, 2008

Image from DB as ToolTip in GridView(IE only)

In ASPX

<html xmlns=”http://www.w3.org/1999/xhtml” >
<head id=”Head1″ runat=”server”>
<title>Untitled Page</title>
<script type=”text/javascript”>
<!–
var browserName, browserVersion, isInternetExplorer, theDiv, myPath;
var tempX = 0;
var tempY = 0;
var bFlag = false;

function GetBrowser()
{
browserName=navigator.appName;
browserVersion=parseInt(navigator.appVersion)
isInternetExplorer = (browserName == “Microsoft Internet Explorer”) ? true : false;
}

function DisplayToolTip(row,path)
{
bFlag = true;
myPath = path;
// Set-up to use getMouseXY function onMouseMove
document.onmousemove = getMouseXY;
}

function HideToolTip()
{
bFlag = false;
if (browserVersion >= 4)
{
theDiv.style.visibility = “hidden”;
theDiv.innerHTML =”";
}
}

function getMouseXY(e)
{
if (isInternetExplorer)
{
// grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.scrollLeft
tempY = event.clientY + document.body.scrollTop
}
else
{
// grab the x-y pos.s if browser is NS
tempX = e.pageX
tempY = e.pageY
}
// catch possible negative values in NS4
if (tempX < 0){tempX = 0}
if (tempY < 0){tempY = 0}
if (browserVersion >= 4 && bFlag)
{
theDiv =document.getElementById(“picdiv”);
theDiv.innerHTML = ‘<img src=’ + myPath + ‘ height=”30px” width=”30px”/>’;
theDiv.style.top = tempY + ‘px’;
theDiv.style.left = tempX + ‘px’;
theDiv.style.visibility = “visible”;
}
}
window.onresize=GetBrowser;

//–>
</script>
</head>

<body onload=”GetBrowser();”>
<form id=”form1″ runat=”server”>
<div>
<div id=”picdiv” style=”position: absolute; visibility: hidden; width:30px”>
</div>
<table style=”margin-left:auto;margin-right:auto;”>
<tr>
<td>
<asp:GridView ID=”GridView1″ runat=”server”
OnRowDataBound=”GridView1_RowDataBound”>
</asp:GridView>
</td>
</tr>
</table>
</div>
</form>
</body>

</html>

In ASPX.CS

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
bind();
}

private void bind()
{
DataTable table = new DataTable();
table.Columns.Add(“booktitle”);
table.Columns.Add(“tooltip”);

DataRow dr = table.NewRow();
dr["booktitle"] = “aaaaa”;
dr["tooltip"] = “AJAX.gif”;
table.Rows.Add(dr);

dr = table.NewRow();
dr["booktitle"] = “sheldon”;
dr["tooltip"] = “Image/sheldon.jpg”;
table.Rows.Add(dr);

dr = table.NewRow();
dr["booktitle"] = “archer”;
dr["tooltip"] = “Image/archer.jpg”;
table.Rows.Add(dr);

dr = table.NewRow();
dr["booktitle"] = “click”;
dr["tooltip"] = “Image/click.jpg”;
table.Rows.Add(dr);

this.GridView1.DataSource = table;
GridView1.DataBind();
}

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
DataRowView drv = ((DataRowView)e.Row.DataItem);
string path = drv["tooltip"].ToString();
e.Row.Attributes.Add(“onmouseover”, “DisplayToolTip(this,’” + path + “‘)”);
e.Row.Attributes.Add(“onmouseout”, “HideToolTip()”);
}
}

Leave a Comment » | .NET, JavaScript | Permalink
Posted by naveenj

To Display Image thats stored as Type Image in DB

January 9, 2008

To Display Image thats stored as Type Image in DB

ASPX Page

<html xmlns=”http://www.w3.org/1999/xhtml” >
<head runat=”server”>
<title>Untitled Page</title>
</head>
<body>
<form id=”form1″ runat=”server”>
<div>
<asp:GridView ID=”gvwImages” runat=”server”
AutoGenerateColumns=”false”
DataSourceID=”dsImages”>
<%–DataSourceID=”dsImages”–%>
<Columns>

<asp:TemplateField HeaderText=”Name”>
<ItemTemplate>
<%–//field img_name is the name given to image–%>
<asp:Label ID=”lblName” runat=”server” Text=’<%#Eval(“img_name”) %>’>
</asp:Label>
</ItemTemplate>
</asp:TemplateField>

<asp:TemplateField HeaderText=”Image”>
<ItemTemplate>
<%–//here field img_id is the id of the image–%>
<asp:Image ID=”Image1″ runat=”server”
ImageUrl=’<%# “Handler.ashx?id=” + Eval(“img_id”) %>’ />
</ItemTemplate>
</asp:TemplateField>

</Columns>

</asp:GridView>
<asp:SqlDataSource ID=”dsImages” runat=”server”
ConnectionString=’<%$ConnectionStrings: LoginCon %>’
SelectCommand=”Select img_id,img_name from Images”>
</asp:SqlDataSource>
</div>
</form>
</body>
</html>

In Handler.ashx

<%@ WebHandler Language=”C#” Class=”Handler” %>

using System;
using System.Web;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;

public class Handler : IHttpHandler
{

public bool IsReusable
{
get {return false;}
}
public void ProcessRequest(HttpContext context)
{
SqlConnection myConnection = new SqlConnection(ConfigurationManager.ConnectionStrings["LoginCon"].ConnectionString);
myConnection.Open();
//here field img_data is the content of the image (type image in DB)
//field img_contenttype is the type of the image (optional)
string sql = “Select img_data,img_contenttype from Images where img_id=@ImageId”;
SqlCommand cmd = new SqlCommand(sql, myConnection);
cmd.Parameters.Add(“@ImageId”, SqlDbType.Int).Value = context.Request.QueryString["id"];
cmd.Prepare();
SqlDataReader dr = cmd.ExecuteReader();
dr.Read();
context.Response.ContentType = dr["img_contenttype"].ToString();
context.Response.BinaryWrite((byte[])dr["img_data"]);
}

}

Leave a Comment » | .NET | Permalink
Posted by naveenj