Pages

Showing posts with label User Controls. Show all posts
Showing posts with label User Controls. Show all posts

Monday, August 13, 2012

Below is an example of the Captcha Control

Download the complete solution from CodePlex.

Captcha Control added to ASP.NET Page.

<li>

//Captcha Control
<cc1:CaptchaControl ID="myCaptchaControl" ClientIDMode="Static"
  Width="800"
  Height="75"
  ImageWidth="400"
  ImageHeight="75"
  Minimum="5"
  Maximum="6"
  CaptchaHandlerUrl="~/CaptchaHandler.ashx"
  Overlap="6"
  RefreshButtonPath="~/Images/refresh.png"  runat="server" />

<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>

Please enter characters displayed above&nbsp;

<asp:TextBox ID="CaptchaCharacters" ClientIDMode="Static" Text="" Width="100" ToolTip="Enter characters displayed above" runat="server">
</asp:TextBox>

<asp:RequiredFieldValidator runat="server" ValidationGroup="RegisterGroup" ontrolToValidate="CaptchaCharacters" CssClass="field-validation-error" ErrorMessage="*Required" />

</li>
 
Captcha Control will render out a HTML image element (image displaying characters) and a HTML input element of type button (refresh button - retrieving a new set of display characters).
Below the Capthca Control, I added a Textbox, which is where the user would type the Captcha characters and will be verified once the form is submitted.



Code Behind - Verifing Captcha Characters

Note: Captcha control had been place within a CreateUserWizard control. Referencing Captcha Control, I must FindControl within CreateUserWizard control (ID="RegisterUserWizardStep").

 //CreatingUser is raised before the Memebership Provider's CreateUser. Setting LoginCancelEventArgs Cancel property equal to true, the user will not be created.
protected void RegisterUser_CreatingUser(object sender, LoginCancelEventArgs e)
{
    var err = ((Literal)GetControl("ErrorMessage"));
    var parent = err.Parent;
    err.Text = "";

    Page.Validate();
    if (!Page.IsValid)
    {
       err.Text = "Required fields are empty or incorrect information was entered.";
       e.Cancel = true;
     }
     else
     {
       //Initiate the EncodeCaptcha class
       var ec = new EncodeCaptcha(GetCaptchaKey());

       //GetCaptchaCharacters returns clear Captcha characters represented in the displayed image.
       //Test they must be equal
       if (ec.characters != GetCaptchaCharacters())
       {
          err.Text = "Characters incorrectly entered. Please reenter correct characters displayed";
          e.Cancel = true;
       }
      }
}

//Return submited Captcha characters. the characters that the user had entered.
string GetCaptchaCharacters()
{
    return ((TextBox)GetControl("CaptchaCharacters")).Text;
}

//Return encrypted Captcha character string. The encrypted string had be UrlEncode, so the return
//string is UrlDecoded.
string GetCaptchaKey()
{
    var cc = GetControl("myCaptchaControl");
    var captchaCharacters = (HiddenField)cc.FindControl("Captcha-Key");

    return HttpUtility.UrlDecode(Request[captchaCharacters.UniqueID]);
}

//Abstracted findng fields within CreateUserWizard.
Control GetControl(string value)
{
    return RegisterUserWizardStep.ContentTemplateContainer.FindControl(value);
}

Sunday, August 12, 2012

New Update Captcha Image Control

I have updated my captcha image control. I believe it is sleeker and is overall better code wise.

Initiates an asynchronous call, and the returned result, will be a single image of alphanumeric characters. Image’s characters are presented in various font sizes and or (+/-) rotated in some degree.

This project offers the complete Visual Studio 2012 solution within a compressed zip file. Download the complete solution from CodePlex.

Shown below is the Captcha type which generates randomly selected characters and draws an image displaying those specific random characters.

Two files are involved rendering the Captcha image:
  • CaptchaControl.cs and CaptchaHandler.ashx
  • CaptchaControl.cs is a generic control rendering out an image and an Image Button. The rendered image’s ImageUrl property is dynamically set, and calls CaptchaHandler.ashx with an attached query string. The query string has a particular name/value pair specifying the particular Captcha characters.
CaptchaControl.cs generates and encodes characters appending the generated string to the rendering image’s query string.

CaptchaHandler.ashx returns a HTTPResponse bitmap and is displayed on the client side webpage.


CaptchaControl Class

Namespace: Captcha.Control
Assembly: CaptchaControl.dll

Syntax
public CaptchaControl : WebControl

Constructors
CaptchaControl(): base(HtmlTextWriterTag.Fieldset) Initializes a new instance of the CaptchaControl class

Properties
string RefreshButtonPath Absolute path to the Image Button’s image
string CaptchaHandlerUrl Absolute path to the Captcha Handler
int Minimum Minimum number of characters to be selected
int Maximum Maximum number of characters to be selected
int Overlap Amount of overlap between character placement.
int ImageWidth Captcha image’s width
int ImageHeight Captcha image’s height
string CharacterSet The character domain to select from. Default character set: ABDEGHMNQRTabdeghmnqr3456789#@&$%

Tuesday, July 26, 2011

Dialog Shell UserControl

**(Must include JQuery)

Writing a UserControl that will accept another external UserControl for its content display area.
I found myself continually developing and rewriting dialogs, so I thought of writing a dialog shell, which is shown below:
dialogShell
The User Control ascx is:
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="dialogControl.ascx.cs"
ViewStateMode="Disabled" Inherits="DialogControl.Dialog" %>
<%--
Dialog Box Shell
--%>

<div class="dialog borderRaised">
<div class="dialogHead">
Page Information
<img src="<%: VirtualPathUtility.ToAbsolute("~/dialog/images/close.jpg") %>"
alt="Close Dialog" onclick="return Dialog.close();" title="Close Page Information Dialog" />
</div>
<div class="dialogPgeHeader">
<span class="dialogWait">
<img src="<%: VirtualPathUtility.ToAbsolute("~/dialog/images/wait.gif") %>" style="width: 20px;
height: 20px;" alt="" />
Please Wait...</span><div id="dialogPageName"></div>
</div>
<div id="dialogContent">
<asp:PlaceHolder ID="plhControl" runat="server"></asp:PlaceHolder>
</div>
<div class="dialogAnswerBox">
<div class="dialogAnswerMsg">
</div>
</div>
</div>

C# Code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using pageInfoDialog.dialogInfo;

namespace DialogControl
{
public partial class Dialog : System.Web.UI.UserControl
{

protected void Page_Load(object sender, EventArgs e)
{
infoDialogControl uc = new infoDialogControl();
uc = (infoDialogControl)LoadControl("../dialogInfo/infoDialogControl.ascx");
PlaceHolder plhCtrl = (PlaceHolder)this.FindControl("plhControl");
plhCtrl.Controls.Add(uc);
}
}
}

The UserControl will load an external UserControl. So, separating the shell from the content by loading the content through an external UserControl, I don’t have rewrite the shell.

Since it’s appearance is CSS driven in an external CSS page, changing its appearance is manipulating the CSS.

All JavaScript for the shell has also been put in an external JS file.

Additionally, all needed images have been place in related folder.

dialogShellFile

I haven’t tested this idea, but it seem feasible. Next post I will include the external UserControl.

This is my notes, and intended for any ideas some may have. Happy Coding!

Javascript and CSS code below:

Javascript for Shell:
var Dialog = {
close: function () {
$(".dialog").hide();

return false;
}
, init: function (id) {
$(".dialog").show();
$(".dialog").draggable({ handle: "div.dialogHead" });

if (typeof dialogInfo !== "undefined") {
dialogInfo.init(id);
}
return false;
}
}

CSS for Shell:
/*
Dialog Box 
----------------------------------- */
.dialog
{
position: absolute;
top: 24px;
left: 124px;
padding: 4px 4px 12px 4px;
width: 612px;
background-color: #E1EAE1;
font-size:1.4em;
display:none;
}
.dialog .dialogAnswerBox
{
display:none;
position:absolute;
background-color:#1B73AF;
width:250px;
padding:2px;
top:0px;
left:0px;
}
.dialog .dialogAnswerMsg
{
padding:6px;
background-image: url(../images/answerBoxBG.jpg);
}
.dialog .dialogHead
{
position: relative;
font-weight: bold;
margin-bottom: 8px;
cursor: move;
padding: 12px;
font-size: 2em;
background-image: url(../images/headBG.jpg);
}
.dialog .dialogHead img
{
position: absolute;
top: 4px;
width: 20px;
height: 20px;
cursor: pointer;
right: 4px;
}
.dialog .dialogPgeHeader
{
font-size:1.6em;
overflow:hidden;
}
.dialog .dialogPgeHeader .dialogWait
{
float:right;
text-align:right;
width:30%;
font-size:0.6em;
color:#b01e1e;
display:none;
}
.dialog .dialogPgeHeader #dialogPageName
{
float:left;
padding-left:8px;
}
.dialog .dialogPgeHeader .dialogWait img
{
display:inline;
margin-bottom:-5px;
}
.dialog #dialogContent 
{
padding:0px 8px;
overflow:hidden;
}
.dialog.borderRaised
{
border-top: 1px solid #c6c6c6;
border-left: 1px solid #c6c6c6;
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
}