Friday, May 21, 2010

Captcha with asp.net using LINQ and Jquery

Hi, we all need to display captcha when ever we fill form.
So you can get thousands of captcha example when you search.
But the one i am providing you is interested and easy to implement.

First of all we need to create Http Handler(generic handler) below :

using System;
using System.Linq;
using System.Web;
using System.Drawing;
using System.IO;
using System.Web.SessionState;

namespace YourNamespace
{
public class Captcha : IHttpHandler,IRequiresSessionState
{
#region "ProcessRequest"

public void ProcessRequest(HttpContext context)
{
HttpContext.Current.Response.ContentType = "image/png";
var no = RandomText.GenerateRandomText(3);
//if (context.Session["Captcha"] == null) return;
HttpContext.Current.Session["Captcha"] = no;
//var bmpOut = new Bitmap(200, 50);
var bmpOut = new Bitmap(60, 25);
var g = Graphics.FromImage(bmpOut);
g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
g.FillRectangle(Brushes.White, 0, 0, 60, 23);
g.DrawString(HttpContext.Current.Session["Captcha"].ToString(), new Font("Verdana", 18), new SolidBrush(Color.Gray), 0, 0);
var ms = new MemoryStream();
bmpOut.Save(ms, System.Drawing.Imaging.ImageFormat.Png);
var bmpBytes = ms.GetBuffer();
bmpOut.Dispose();
ms.Close();
context.Response.BinaryWrite(bmpBytes);
context.Response.End();
}
#endregion

#region "Properties"
public bool IsReusable
{
get
{
return true;
}
}
#endregion
}

public static class RandomText
{
#region "GenerateRandomText"

public static string GenerateRandomText(int textLength)
{

const string chars = "ABCDEFGHIJKLMNPQRSTUVWXYZ23456789";
var random = new Random();
var result = new string(
Enumerable.Repeat(chars, textLength)
.Select(s => s[random.Next(s.Length)])
.ToArray());
return result;
}
#endregion
}
}

Alert creating http handler now we need to create the .aspx part
where we will generate this image :

<!-- This part will placed in .aspx -->
<div class="float_left">
<img src="/Captcha.ashx?" id="img1" alt="" />
</div>
<div class="float_left paddingtop3">
 <a href="javascript:void(0);" class="message" id="newchapta">(Can’t see the image?)</a> 
</div>
Now in the same page, to change change content or re-generate image again on hyper link click,add the following code :

<script type="text/javascript">
// with this method this captcha gets chaned on client side ! have fun
$(function(e) {
$("#newchapta").click(function(e) {
var imgNew = $("#imgCode");
d = new Date();
imgNew.attr("src", 'Captcha.ashx?' + d.getTime());
});
});
</script>

Now on the server side we can match input entered by user like following code snippet :
<!-- For code behind here you can check text value entered by user where captcha.Text is the text box value -->
if (HttpContext.Session["Captcha"] != null)
{
if (HttpContext.Session["Captcha"].ToString().ToLower() != captcha.Text.ToLower())
{
error = "The digits you entered do not match the digits in the image.";
}
}

<!-- Till here -->

Create Polling System with Asp.net & jQuery

Hi,
You can find many polling system on internet that are working .But here is the
one which is merged with jQuery poll. You can use this with update panel and with out update panel as well.


At first Create the database using the following script :

SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[Poll](
[PollID] [int] IDENTITY(1,1) NOT NULL,
[Name] [nvarchar](400) COLLATE SQL_Latin1_General_CP1_CI_AS NOT NULL,
[Published] [bit] NOT NULL,
[CreatedOn] [datetime] NULL
)

script for poll question answer:

SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[YourPollAnswer](
[PollAnswerID] [int] IDENTITY(1,1) NOT NULL,
[PollID] [int] NOT NULL,
[PollAnswerName] [nvarchar](400) COLLATE SQL_Latin1_General_CP1_CI_AS NOT NULL,
[Count] [int] NOT NULL,
[DisplayOrder] [int] NOT NULL,
[CreatedOn] [datetime] NULL


)

Stored Procedures for selecting and updating counts/votes

update YourPollAnswer set [Count] = ([Count]+1) where PollAnswerID = @PollAnswerID and PollID = @PollID


select PollAnswerName,[Count],PollAnswerID,PollID,DisplayOrder,CreatedOn from YourPollAnswer where PollID=@PollID
------------------------



Now create the aspx page :
------------------------------------------------------------------------
<asp:ScriptManager ID="scrMgr" runat="server"></asp:ScriptManager>
<table width="90%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<asp:UpdatePanel ID="upPanelPoll" RenderMode="Block" runat="server">
<ContentTemplate>
<div>
<div id="poll-container">
<span class="black12"><strong>
<asp:Label ID="lblQuestion" runat="server"></asp:Label></strong></span><br />
<p>
<asp:RadioButtonList ID="rblPollAnswers" CssClass="black12" runat="server" DataTextField="PollAnswerName"
DataValueField="PollAnswerID">
</asp:RadioButtonList>
<asp:Button ID="btnsubmit" runat="server" Text="Vote" OnClientClick="javascript:return CheckAnswer();"
class="vote_button" OnClick="btnsubmit_Click" />
</p>
</div>
<div id="poll-results" style="display: none;">
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
<tr>
<td>
 
</td>
</tr>
</table>
<script type="text/javascript">
function CheckAnswer()
{
var all=document.getElementsByTagName("input");
var check=0;
for(i=0;i<all.length;i++)
{
if(all[i].type == "radio" && all[i].checked == true)
{
check=0;
break;
}
else
{
check=1;
}
}
if(check == 1)
{
alert("Please select answer before voting.");
return false;
}
}
</script>
------------------------------------------------------------------------
Now, Create an JS file which will contains the necessary JavaScript functions :
------------------------------------------------------------------------

var OPT_ID = 0;
var OPT_TITLE = 1;
var OPT_VOTES = 2;
var votedID;

function animateResults() {
$("#poll-results div").each(function() {
var percentage = $(this).next().text();
$(this).css({ width: "0%" }).animate({
width: percentage
}, 'slow');
});
}
$("#btnshowresult").click(function() {
// alert('show result');
$("#divfill").fadeOut('normal', function() {
$(this).css("display", "none");
$("#divresult").fadeIn('normal', function() {
$("#divresult").css("display", "block");
});
});
});

$("#btnshowpoll").click(function() {
//alert('Show poll');
$("#divresult").fadeOut('normal', function() {
$("#divresult").css("display", "none");
$("#divfill").fadeIn('normal', function() {
$("#divfill").css("display", "block");
});
});
});

function loadResults(data) {
//alert('here');
var total_votes = 0;
var percent;
for (id in data) {
total_votes = total_votes + parseInt(data[id][OPT_VOTES]);
}
//alert(total_votes);

var results_html = "Poll Results\n
\n";
for (id in data) {
percent = Math.round((parseInt(data[id][OPT_VOTES]) / parseInt(total_votes)) * 100);
if (data[id][OPT_ID] !== votedID) {
results_html = results_html + "
" + data[id][OPT_TITLE] + "
 
" + percent + "%
\n";
} else {
results_html = results_html + "
" + data[id][OPT_TITLE] + "
 
" + percent + "%
\n";
}
}

results_html = results_html + "
\n
Total Votes : " + total_votes + "
<input type='button' class='voteagain_button' style='margin-left:20px;' id='btnret' value='Vote Again' onclick='backtopoll()' />\n";



$("#poll-container").fadeOut('normal', function() {
$(this).css("display", "none");
$("#poll-results").empty();
$("#poll-results").append(results_html).fadeIn('normal', function() {
$("#poll-results").css("display", "block");
animateResults();
});
});
}
function backtopoll() {
$("#poll-results").fadeOut('normal', function() {
$("#poll-results").css("display", "none");
$("#poll-container").fadeIn('normal', function() {
$("#poll-container").css("display", "block");
});
});
}

another milestone achieved


Hi all,

Another milestone achieved on 21 may 2010.

Wednesday, May 5, 2010

Following the gurus


Following the path set by DotNet Gurus.... I am trying my best to contribute my thoughts and ideas to help people working with Asp.Net. One small achievement on 6th may 2010 is to get into Top 10.