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 -->
Friday, May 21, 2010
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
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");
});
});
}
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";
- " + data[id][OPT_TITLE] + "
- " + data[id][OPT_TITLE] + "
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 + "
} else {
results_html = results_html + "
}
}
results_html = results_html + "
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");
});
});
}
Wednesday, May 5, 2010
Following the gurus
Subscribe to:
Posts (Atom)