Ajax Captcha

June 9, 2008

<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”AjaxCaptcha.aspx.cs” Inherits=”AjaxCaptcha” %>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<title>Ajax Captcha</title>

<script language=”javaScript” type=”text/javascript”>

var url = ‘Services/AjaxServiceRequestPages/CheckImageCaptcha.aspx?code=’;
var captchaOK = 2; // 2 – not yet checked, 1 – correct, 0 – failed
function getHTTPObject()
{
try
{
req = new XMLHttpRequest();
}
catch (err1)
{
try
{
req = new ActiveXObject(“Msxml12.XMLHTTP”);
}
catch (err2)
{
try
{
req = new ActiveXObject(“Microsoft.XMLHTTP”);
}
catch (err3)
{
req = false;
}
}
}
return req;
}

var http = getHTTPObject(); // We create the HTTP Object
function handleHttpResponse()
{
if (http.readyState == 4)
{
captchaOK = http.responseText.charAt(0);
if(captchaOK != 1)
{
alert(‘The entered code was not correct. Please try again’);
document.forms[0].code.value=”;
document.forms[0].code.focus();
return false;
}
document.forms[0].submit();
}
}

function checkcode(thecode)
{
http.open(“GET”, url + escape(thecode), true);
http.onreadystatechange = handleHttpResponse;
http.send(null);
}

function checkform()
{
// First the normal form validation
if(document.forms[0].req.value==”)
{
alert(‘Please complete the “required” field’);
document.forms[0].req.focus();
return false;
}
if(document.forms[0].code.value==”)
{
alert(‘Please enter the string from the displayed image’);
document.forms[0].code.value=”;
document.forms[0].code.focus();
return false;
}
// Now the Ajax CAPTCHA validation
checkcode(document.forms[0].code.value);
return false;
}

</script>

</head>
<body>
<form name=”myform” runat=”server”>
<table>
<tr>
<td>
Required field:
</td>
<td>
<input type=”text” name=”req” value=”” />
</td>
</tr>
<tr>
<td>
Optional field:
</td>
<td>
<input type=”text” name=”opt” value=”” />
</td>
</tr>
<tr>
<td>
Captcha image:
</td>
<td>
<img alt=”Security Image” src=”Services/AjaxServiceRequestPages/SecurityCodeImage.aspx”/>
</td>
</tr>
<tr>
<td>
String:
</td>
<td>
<input type=”text” name=”code” value=”” />
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type=”submit” value=”Submit Form” onclick=”return checkform()” />
</td>
</tr>
</table>
</form>
</body>
</html>


Nested GridView with JS

January 31, 2008

Nested GridView with JS

<html xmlns=”http://www.w3.org/1999/xhtml&#8221; >
<head runat=”server”>
<title>Nested GridView</title>

<script type=”text/C#” runat=”server”>

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if(e.Row.RowType == DataControlRowType.DataRow)
{
GridView gv = (GridView)e.Row.FindControl(“GridView2”);
SqlDataSource dbSrc = new SqlDataSource();
dbSrc.ConnectionString = ConfigurationManager.ConnectionStrings[“LoginCon”].ConnectionString;
dbSrc.SelectCommand = “SELECT * FROM Orders WHERE CustomerID = ‘” + GridView1.DataKeys[e.Row.RowIndex].Value + “‘ ORDER BY OrderDate”;
gv.DataSource = dbSrc;
gv.DataBind();
}
}

</script>

<script type=”text/javascript”>

function ShowChildGrid(obj)
{
var div = document.getElementById(obj);
var img = document.getElementById(‘img’ + obj);
var theFlag = div.style.display == “none”;
div.style.display = (theFlag) ? “inline” : “none”;
img.src = (theFlag) ? “Images/arrowdown.jpg” : “Images/arrowright.jpg”;
}

</script>
</head>
<body>
<form id=”form1″ runat=”server”>
<div>
<asp:GridView ID=”GridView1″ runat=”server”
AllowPaging=”True”
AutoGenerateColumns=”False”
DataKeyNames=”CustomerID”
DataSourceID=”SqlDataSource1″
PageSize=”20″
OnRowDataBound=”GridView1_RowDataBound”>

<HeaderStyle CssClass=”dataTable” />
<RowStyle CssClass=”dataTable” />
<AlternatingRowStyle CssClass=”dataTableAlt” />

<Columns>
<asp:TemplateField>
<ItemTemplate>
<a href=”javascript:ShowChildGrid(‘div<%# Eval(“CustomerID”) %>’);”>
<img id=”imgdiv<%# Eval(“CustomerID”) %>” alt=”Click to show/hide orders” border=”0″ src=”Images/arrowright.jpg” />
</a>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField=”CompanyName” HeaderText=”CompanyName” SortExpression=”CompanyName” />
<asp:BoundField DataField=”ContactName” HeaderText=”ContactName” SortExpression=”ContactName” />
<asp:BoundField DataField=”Address” HeaderText=”Address” SortExpression=”Address” />
<asp:BoundField DataField=”City” HeaderText=”City” SortExpression=”City” />
<asp:BoundField DataField=”PostalCode” HeaderText=”PostalCode” SortExpression=”PostalCode” />
<asp:BoundField DataField=”Phone” HeaderText=”Phone” SortExpression=”Phone” />
<asp:TemplateField>
<ItemTemplate>
</td></tr>
<tr>
<td colspan=”100%”>
<div id=”div<%# Eval(“CustomerID”) %>” style=”display:none;position:relative;left:25px;” >
<asp:GridView ID=”GridView2″ runat=”server”
AutoGenerateColumns=”false”
DataKeyNames=”OrderID”
EmptyDataText=”No orders for this customer.”
Width=”80%”>
<HeaderStyle CssClass=”dataTable” />
<AlternatingRowStyle CssClass=”dataTableAlt” />
<RowStyle CssClass=”dataTable” />
<Columns>
<asp:BoundField DataField=”OrderDate” HeaderText=”Order Date” DataFormatString=”{0:MMM-dd-yyyy}” HtmlEncode=”False” />
<asp:BoundField DataField=”ShippedDate” HeaderText=”Shipped Date” DataFormatString=”{0:MMM-dd-yyyy}” HtmlEncode=”False” />
<asp:BoundField DataField=”ShipCity” HeaderText=”Shipped To” />
</Columns>
</asp:GridView>
</div>
</td>
</tr>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:SqlDataSource ID=”SqlDataSource1″ runat=”server” ConnectionString=”<%$ ConnectionStrings:LoginCon %>”
SelectCommand=”SELECT [CustomerID], [CompanyName], [ContactName], [Address], [City], [PostalCode], [Phone] FROM [Customers]”>
</asp:SqlDataSource>

</div>
</form>
</body>
</html>

Create two tables Customers and Orders with the relationship field (Foreign Key) “CustomerID”.
P.S Dont forget to find two images appropriate images

Images arrowright arrowdown


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&#8221; >
<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()”);
}
}


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&#8221; >
<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”]);
}

}


Flip DataSet

January 4, 2008

public DataSet FlipDataSet(DataSet my_DataSet)
{
DataSet ds = new DataSet();
foreach (DataTable dt in my_DataSet.Tables)
{
DataTable table = new DataTable();
for (int i = 0; i <= dt.Rows.Count; i++)
{
table.Columns.Add(Convert.ToString(i));
}
DataRow r = null;
for (int k = 0; k < dt.Columns.Count; k++)
{
r = table.NewRow();
r[0] = dt.Columns[k].ToString();
for (int j = 1; j <= dt.Rows.Count; j++)
r[j] = dt.Rows[j – 1][k];
table.Rows.Add(r);
}

ds.Tables.Add(table);
}
return ds;
}


Trim Function in JavaScript

December 26, 2007

function trim(stringToTrim)
{
return stringToTrim.replace(/^\s+|\s+$/g,””);
}


Bind GridView with XML

December 21, 2007

XML File

<?xml version=”1.0″ encoding=”UTF-8″?>
<root>
<fruit id=”1″>
<fid>1</fid>
<fname>Lemons</fname>
<fcolor>Yellow</fcolor>
</fruit>
<fruit id=”2″>
<fid>2</fid>
<fname>Grape</fname>
<fcolor>White</fcolor>
</fruit>
<fruit id=”3″>
<fid>3</fid>
<fname>Grape</fname>
<fcolor>Black</fcolor>
</fruit>
<fruit id=”4″>
<fid>4</fid>
<fname>Banana</fname>
<fcolor>Yellow</fcolor>
</fruit>
</root>

ASPX Page

<asp:GridView ID=”GridView1″ runat=”server”
AutoGenerateColumns=”false”
DataKeyNames=”id”
DataSourceID=”XmlDataSource1″
Width=”60%”
OnRowCancelingEdit=”GridView1_RowCancelingEdit”
OnRowEditing=”GridView1_RowEditing”
OnRowUpdating=”GridView1_RowUpdating”
OnRowDeleting=”GridView1_RowDeleting”>
<Columns>

<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID=”btnEdit” runat=”server”
Text=”Edit”
CommandName=”Edit”>
</asp:LinkButton>
<asp:LinkButton ID=”btnDelete” runat=”server”
Text=”Delete”
CommandName=”Delete”>
</asp:LinkButton>
</ItemTemplate>
<EditItemTemplate>
<asp:LinkButton ID=”btnUpdate” runat=”server”
Text=”Update”
CommandName=”Update”>
</asp:LinkButton>
<asp:LinkButton ID=”btnCancel” runat=”server”
Text=”Cancel”
CommandName=”Cancel”>
</asp:LinkButton>
</EditItemTemplate>
<ItemStyle Width=”10%” />
</asp:TemplateField>

<asp:TemplateField HeaderText=”ID”>
<ItemTemplate>
<asp:Label ID=”lblID” runat=”server”
Text='<%# XPathBinder.Eval(Container.DataItem, “fid”)%>’>
</asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID=”txtID” runat=”server”
Text='<%# XPathBinder.Eval(Container.DataItem, “fid”)%>’>
</asp:TextBox>
</EditItemTemplate>
<ItemStyle Width=”30%” />
</asp:TemplateField>

<asp:TemplateField HeaderText=”Name”>
<ItemTemplate>
<asp:Label ID=”lblName” runat=”server”
Text='<%# XPathBinder.Eval(Container.DataItem, “fname”)%>’>
</asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID=”txtName” runat=”server”
Text='<%# XPathBinder.Eval(Container.DataItem, “fname”)%>’>
</asp:TextBox>
</EditItemTemplate>
<ItemStyle Width=”30%” />
</asp:TemplateField>

<asp:TemplateField HeaderText=”Colour”>
<ItemTemplate>
<asp:Label ID=”lblColor” runat=”server”
Text='<%# XPathBinder.Eval(Container.DataItem, “fcolor”)%>’>
</asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID=”txtColor” runat=”server”
Text='<%# XPathBinder.Eval(Container.DataItem, “fcolor”)%>’>
</asp:TextBox>
</EditItemTemplate>
<ItemStyle Width=”30%” />
</asp:TemplateField>

</Columns>
<HeaderStyle ForeColor=”White” BackColor=”DarkGreen” />
</asp:GridView>
<asp:XmlDataSource ID=”XmlDataSource1″ runat=”server”
DataFile=”~/App_Data/myData.xml”
XPath= “root/fruit”>
</asp:XmlDataSource>

ASPX.CS

#region “GridView Events”

#region “Edit Events”

#region “Row Editing Event”

protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)
{
GridView1.EditIndex = e.NewEditIndex;
GridView1.DataBind();
}

#endregion

#region “Row Updating Event”

protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)
{
string myID = GridView1.DataKeys[e.RowIndex].Value.ToString();
string fruitID = ((TextBox)GridView1.Rows[e.RowIndex].FindControl(“txtID”)).Text;
string fruitName = ((TextBox)GridView1.Rows[e.RowIndex].FindControl(“txtName”)).Text;
string fruitColor = ((TextBox)GridView1.Rows[e.RowIndex].FindControl(“txtColor”)).Text;
XmlDocument xmlDoc = XmlDataSource1.GetXmlDocument();
XmlNodeList nodeList = xmlDoc.SelectNodes(“root/fruit[@id='” + myID + “‘]”);
nodeList[0].ChildNodes[0].InnerText = fruitID;
nodeList[0].ChildNodes[1].InnerText = fruitName;
nodeList[0].ChildNodes[2].InnerText = fruitColor;
//xmlDoc.Save(Server.MapPath(“./”)+”/App_Data/hi.xml”);
XmlDataSource1.Save();
GridView1.EditIndex = -1;
e.Cancel = true;
GridView1.DataBind();
}

#endregion

#region “Row Cancelling Edit Event”

protected void GridView1_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
{
GridView1.EditIndex = -1;
GridView1.DataBind();

}

#endregion

#endregion

#region “Deleting Events”

protected void GridView1_RowDeleting(object sender, GridViewDeleteEventArgs e)
{
System.Xml.XmlDocument Document = XmlDataSource1.GetXmlDocument();
string myID = GridView1.DataKeys[e.RowIndex].Value.ToString();
System.Xml.XmlNode node = Document.SelectSingleNode(“root/fruit[@id='” + myID + “‘]”);
node.ParentNode.RemoveChild(node);
XmlDataSource1.Save();
e.Cancel = true;
GridView1.DataBind();
}

#endregion

#endregion