Home > DeveloperSection > Articles > Lightbox with reCaptcha in ASP.NET

Lightbox with reCaptcha in ASP.NET


ASP.Net ASP.Net 
Ratings:
0 Comment(s)
 5052  View(s)
Rate this:

Lightbox with reCaptcha in ASP.NET

This article describes Lightbox as a simple, unobtrusive script used to overlay images on the current page. It delivers a nice, professional looking method for displaying images as overlays through the use of hyperlinks. Lightbox allows the developer the option of displaying images singly or in sequence. Images grouped into sequences may be viewed by the user in a slideshow like presentation that the user can control with either the mouse or the left and right arrow keys.

But here I’m going to describe how to use Lightbox as for taking input and populate to GridView Control and database. Here I used validation and captcha in Lightbox. Steps are given below:

Step 1:- Create a table in SqlServer and ‘id’ column make automatic generated.

Lightbox with reCaptcha in ASP.NET

Step 2:- Create a web page and take one GridView (for display populated records) and one HyperLink (for opening Lightbox).

Step 3:- Download reCaptcha from given link and save it on your local system.

http://www.google.com/recaptcha/whyrecaptcha

Step 4:- Now click on Add Reference… and select recently downloaded reCaptcha.dll file.

Step 5:- Now write down the following code on .aspx page where you want to bind GridView, design Lightbox and adds Google reCaptcha with proper validation.

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"  Inherits="_Default" %>

<%@ Register TagPrefix="recaptcha" Namespace="Recaptcha" Assembly="Recaptcha" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>LIGHTBOX EXAMPLE</title>

  <%--  class for LightBox--%>

    <style type="text/css">

        .black_overlay

        {

            display: none;

            position: absolute;

            top: 0%;

            left: 0%;

            width: 100%;

            height: 100%;

            background-color: black;

            z-index: 1001;

            -moz-opacity: 0.8;

            opacity: .60;

            filter: alpha(opacity=80);

        }

       

        .white_content

        {

            display: none;

            position: absolute;

            top: 15%;

            left: 35%;

            width: 30%;

            padding: 0px;

            border: 0px solid #a6c25c;

            background-color: white;

            z-index: 1002;

            overflow: auto;

        }

       

        .headertext

        {           

            font-family: Times New Roman, Helvetica, sans-serif;

            font-size: 14px;

            color: teal;

            font-weight: bold;

        }

       

        .textfield

        {

            border: 1px solid #a6c25c;

            width: 135px;

        }

       

        .button2

        {

            background-color: Teal;

            color: White;

            font-size: 11px;

            font-weight: bold;

            border: 1px solid #7f9db9;

            width: 68px;

        }

    </style>

</head>

<body>

 

    <form id="form1" runat="server">

   <%-- function for clear lightbox textbox values and call lightbox--%>

    <script type="text/javascript" language="javascript">

        function ClearTextboxes()

        {

            document.getElementById('txtlbName').value = '';

            document.getElementById('txtlbAge').value = '';

            document.getElementById('txtlbSalary').value = '';

            document.getElementById('txtlbCountry').value = '';

            document.getElementById('txtlbCity').value = '';

            document.getElementById('light').style.display = 'none';

            document.getElementById('fade').style.display = 'none';                           

        }

    </script>

 

    <div id="light" class="white_content">

        <div align="center" class=" headertext">

        </div>

        <div>

            <table width="100%"  style=" background-color: Black; z-index: 1001;  -moz-opacity: 0.8; opacity: .60; filter: alpha(opacity=80); " height="27">

                <tr>

                    <td style="width: 50%"></td>

                    <td style="float: right; width:50%; margin-right:-2px" height="6px">

                        <a href="javascript:void(0)" onclick="ClearTextboxes()">

                            <img src="images/close.png" style="border: 0px" width="32px" align="right" height="32px" /></a>

                    </td>

                </tr>

            </table>

        </div>

<%--        table with asp.net controls in lightbox--%>

        <table cellpadding="0" cellspacing="0" border="0" style="background-color: teal"

            width="100%" >

            <tr>

                <td style="padding: 4px;">

                    <table align="center" border="0" cellpadding="0" cellspacing="0" style="background-color: #fff"

                        width="100%">

                        <tr>

                            <td align="center" colspan="0" class="headertext" style="border-bottom: 1px solid teal;">

                            <br />

                                User Information

                            </td>

                        </tr>

                        <tr>

                            <td>

                                &nbsp;

                            </td>

                        </tr>

                        <tr>

                            <td align="center">

                                <table>

                                    <tr>

                                        <td align="right">

                                            Name:

                                        </td>

                                        <td>

                                    <%--   script for Name validation--%>

                                        <script language ="javascript" type = "text/javascript">

                                            function Name_Validation(e) {

                                                if ((event.keyCode > 97) && (event.keyCode <= 123)) {

                                                    return true;

                                                }

                                                else if ((event.keyCode >= 65) && (event.keyCode <= 97)) {

                                                    return true;

                                                }

                                                else if (event.keyCode == 32) {

                                                    return true;

                                                }

                                                else {

                                                    alert('Please enter alphabate only');

                                                    return false;

                                                }

                                            }

                                          </script>

                                          <%--script for trim space--%>

                                          <script type="text/javascript">

                                              function trim(stringToTrim) {

                                                  return stringToTrim.replace(/^\s+|\s+$/g, "");

                                              }

 

                                              function RemoveSpace(id) {

                                                  if (id != null)

                                                      id.value = trim(id.value);

                                              }

  

                                          </script>

                                            <asp:TextBox ID="txtlbName" runat="server" MaxLength="50" OnKeyPress ="return Name_Validation(this);" onblur="RemoveSpace(this)" CssClass="textfield"></asp:TextBox>

                                        </td>

                                        <td>

                                            <asp:RequiredFieldValidator ID="rfvtxtlbName" runat="server" Text="*" ToolTip="Enter name"

                                                ControlToValidate="txtlbName"></asp:RequiredFieldValidator>

                                        </td>

                                    </tr>

                                    <tr>

                                        <td height="10px">

                                        </td>

                                    </tr>

                                    <tr>

                                        <td align="right">

                                            Age:

                                        </td>

                                        <td>

                                        <%--script for age validation--%>

                                        <script language ="javascript" type = "text/javascript">

                                            function Age_Validation(e) {

                                                if ((event.keyCode >= 48) && (event.keyCode <= 57)) {

                                                    return true;

                                                }

                                                else {

                                                    alert('Please enter numeric value');

                                                    return false;

                                                }

                                            }

                                        </script>

                                                                      

                                            <asp:TextBox ID="txtlbAge" runat="server" MaxLength="2" CssClass="textfield" OnKeyPress ="return Age_Validation(this);"></asp:TextBox>

                                        </td>

                                        <td>

                                            <asp:RequiredFieldValidator ID="rfvtxtlbAge" runat="server" Text="*" ToolTip="Enter age"

                                                ControlToValidate="txtlbAge"></asp:RequiredFieldValidator>

                                            <asp:RangeValidator ID="rrvtxtlbAge" runat="server" Text="*" MaximumValue="99" MinimumValue="15" Display="Dynamic" ControlToValidate="txtlbAge" Type="Integer" ToolTip="Min age 15 & Max age 99"></asp:RangeValidator>

                                            <asp:Label ID="lblErrorMsg" runat="server" Text="Min age 15 & Max age 99" Visible="false"></asp:Label>

                                        </td>

                                    </tr>

                                    <tr>

                                        <td height="10px">

                                        </td>

                                    </tr>

                                    <tr>

                                        <td align="right">

                                            Salary:

                                        </td>

                                        <td>

                                        <%--script for salary validator or numeric values validator--%>

                                         <script language ="javascript" type = "text/javascript">

                                             function Salary_Validation(e) {

                                                 if ((event.keyCode >= 48) && (event.keyCode <= 57)) {

                                                     return true;

                                                 }

                                                 else {

                                                     alert('Please enter numeric value');

                                                     return false;

                                                 }

                                             }

                                         </script>

 

                                        <%-- Convert into Money Formate--%>

                                        <script type="text/javascript">

 

                                            function formatCurrency(usFormat) {

 

                                                usFormat = usFormat.toString().replace(/\$|\,/g, '');

 

                                                if (isNaN(usFormat)) {

                                                    usFormat = "0";

                                                }

                                                sign = (usFormat == (usFormat = Math.abs(usFormat)));

 

                                                usFormat = Math.floor(usFormat * 100 + 0.50000000001);

 

                                                cents = usFormat % 100;

 

                                                usFormat = Math.floor(usFormat / 100).toString();

 

                                                if (cents < 10) {

                                                    cents = "0" + cents;

                                                }

                                                for (var i = 0; i < Math.floor((usFormat.length - (1 + i)) / 3); i++) {

                                                    usFormat = usFormat.substring(0, usFormat.length - (4 * i + 3)) + ',' + usFormat.substring(usFormat.length - (4 * i + 3));

                                                }

                                                return (((sign) ? '' : '-') + usFormat + '.' + cents);

                                            }

                                        </script>

                                            <asp:TextBox ID="txtlbSalary" runat="server" MaxLength="10" CssClass="textfield" OnKeyPress ="return Salary_Validation(this);" onblur="this.value=formatCurrency(this.value);"></asp:TextBox>

                                        </td>

                                        <td>

                                            <asp:RequiredFieldValidator ID="rfvtxtlbSalary" runat="server" Text="*" ToolTip="Enter salary"

                                                ControlToValidate="txtlbSalary"></asp:RequiredFieldValidator>

                                        </td>

                                    </tr>

                                    <tr>

                                        <td height="10px">

                                        </td>

                                    </tr>

                                    <tr>

                                        <td align="right">

                                            Country:

                                        </td>

                                        <td>

                                        <%--script for alphabate enter in textbox--%>

                                        <script language ="javascript" type = "text/javascript">

                                            function Country_Validation(e) {

                                                if ((event.keyCode > 97) && (event.keyCode <= 123)) {

                                                    return true;

                                                }

                                                else if ((event.keyCode >= 65) && (event.keyCode <= 97)) {

                                                    return true;

                                                }

                                                else {

                                                    alert('Please enter Alphabate only');

                                                    return false;

                                                }

                                            }

                                        </script>

                                            <asp:TextBox ID="txtlbCountry" runat="server" MaxLength="20" CssClass="textfield" OnKeyPress ="return Country_Validation(this);"></asp:TextBox>

                                        </td>

                                        <td>

                                            <asp:RequiredFieldValidator ID="rfvtxtlbCountry" runat="server" Text="*" ToolTip="Enter country"

                                                ControlToValidate="txtlbCountry"></asp:RequiredFieldValidator>

                                        </td>

                                    </tr>

                                    <tr>

                                        <td height="10px">

                                        </td>

                                    </tr>

                                    <tr>

                                        <td align="right">

                                            City:

                                        </td>

                                        <td>

                                         <%--script for alphabate enter in textbox--%>

                                         <script language ="javascript" type = "text/javascript">

                                             function City_Validation(e) {

                                                 if ((event.keyCode > 97) && (event.keyCode <= 123)) {

                                                     return true;

                                                 }

                                                 else if ((event.keyCode >= 65) && (event.keyCode <= 97)) {

                                                     return true;

                                                 }

                                                 else {

                                                     alert('Please enter Alphabate only');

                                                     return false;

                                                 }

                                             }

                                        </script>

                                            <asp:TextBox ID="txtlbCity" runat="server" MaxLength="20" CssClass="textfield" OnKeyPress ="return City_Validation(this);"></asp:TextBox>

                                        </td>

                                        <td>

                                            <asp:RequiredFieldValidator ID="rfvtxtlbCity" runat="server" Text="*" ToolTip="Enter city"

                                                ControlToValidate="txtlbCity"></asp:RequiredFieldValidator>

                                        </td>

                                    </tr>

                                    <tr>

                                        <td height="10px"></td>

                                    </tr>

                                    <tr>

                                    <%--reCaptcha control--%>

                                        <table>

                                        <tr>

                                            <td align="center">

                                               <recaptcha:RecaptchaControl

                                                  ID="recaptcha"

                                                  runat="server"

                                                  PublicKey="6LfqmdQSAAAAAHcyeGDCoLodLISt4d3LyC5ghIOS"

                                                  PrivateKey="6LfqmdQSAAAAAFkZJAH9zivztO5VSwwJp_9XxcAt"/>

                                               <asp:Label ID="lblResult" runat="server" Text="Label" Visible="false"></asp:Label>

                                                 

                                            </td>

                                        </tr>

                                        </table>

                                    </tr>

                                    <tr>

                                        <td height="10px" align="center"><asp:Button ID="btnlbAdd" runat="server" Text="Add" OnClick="AddNewRecord" class="button2" /></td>

                                    </tr>

                                    <tr>

                                    <td align="center">

                                                                        

                                    </td>

                                    </tr>

                                    <tr>

                                        <td height="10px"></td>

                                    </tr>

                                    <tr>

                                        <td align="center"></td>                                        

                                   </tr>

                                  

                                </table>

                            </td>

                        </tr>

                        <tr>

                            <td height="10px">

                            </td>

                        </tr>

                    </table>

                </td>

            </tr>

        </table>

        <asp:Label ID="txtlbl" runat="server"></asp:Label></div>

    <div id="fade" class="black_overlay">

    </div>

    <%--GridView with asp.net control for bind record from database--%>

    <div>

        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" OnRowDeleting="RowDeleting"

            CellPadding="4" EnableModelValidation="True" GridLines="None" Width="1297px"

            ForeColor="#333333">

            <RowStyle HorizontalAlign="Center" />

            <AlternatingRowStyle BackColor="White" />

            <EditRowStyle BackColor="#7C6F57" />

            <FooterStyle BackColor="#1C5E55" ForeColor="White" Font-Bold="True" />

            <HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />

            <PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" />

            <RowStyle BackColor="#E3EAEB" />

            <SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />

            <Columns>

                <asp:TemplateField>

                    <HeaderTemplate>

                        Id</HeaderTemplate>

                    <ItemTemplate>

                        <asp:Label ID="lblId" runat="server" Text='<%#Bind("id")%>'></asp:Label>

                    </ItemTemplate>

                </asp:TemplateField>

                <asp:TemplateField>

                    <HeaderTemplate>

                        Name</HeaderTemplate>

                    <ItemTemplate>

                        <asp:Label ID="lblName" runat="server" Text='<%#Bind("name") %>'></asp:Label>

                    </ItemTemplate>

                </asp:TemplateField>

                <asp:TemplateField>

                    <HeaderTemplate>

                        Age</HeaderTemplate>

                    <ItemTemplate>

                        <asp:Label ID="lblAge" runat="server" Text='<%#Bind("age") %>'></asp:Label>

                    </ItemTemplate>

                </asp:TemplateField>

                <asp:TemplateField>

                    <HeaderTemplate>

                        Salary</HeaderTemplate>

                    <ItemTemplate>

                        <asp:Label ID="lblSalary" runat="server" Text='<%#Bind("salary") %>'></asp:Label>

                    </ItemTemplate>

                </asp:TemplateField>

                <asp:TemplateField>

                    <HeaderTemplate>

                        Country</HeaderTemplate>

                    <ItemTemplate>

                        <asp:Label ID="lblCountry" runat="server" Text='<%#Bind("country") %>'></asp:Label>

                    </ItemTemplate>

                </asp:TemplateField>

                <asp:TemplateField>

                    <HeaderTemplate>

                        City</HeaderTemplate>

                    <ItemTemplate>

                        <asp:Label ID="lblCity" runat="server" Text='<%#Bind("city") %>'></asp:Label>

                    </ItemTemplate>

                </asp:TemplateField>

                <asp:TemplateField>

                    <HeaderTemplate>

                        Operation</HeaderTemplate>

                    <ItemTemplate>

                        <asp:Button ID="btnDelete" runat="server" CommandName="Delete" Text="Delete" CausesValidation="true"

                            OnClientClick="return confirm('Are you sure?')" />

                    </ItemTemplate>

                </asp:TemplateField>

            </Columns>

            <EmptyDataTemplate>

                No record available

            </EmptyDataTemplate>

        </asp:GridView>

        </br>

    <%--    hyperlink for display lightbox--%>

        <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">

            Add New Record</a></div>

    </form>

</body>

</html>

Step 6:- For displaying records in GridView and Opening Lightbox and to validate the reCaptcha, write down the following code in “.cs” file.

using System;

using System.Data;

using System.Data.SqlClient;

using System.Configuration;

using System.Web.UI.WebControls;

 

public partial class _Default : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

        if (!IsPostBack)

        {

            FillGridView();

        }

    }

 

    /// <summary>

    /// function for fill gridview

    /// </summary>

    public void FillGridView()

    {

        try

        {

            string cnString = ConfigurationManager.ConnectionStrings["dbconnection"].ConnectionString;

            SqlConnection con = new SqlConnection(cnString);

            GlobalClass.adap = new SqlDataAdapter("select * from gridview", con);

            SqlCommandBuilder bui = new SqlCommandBuilder(GlobalClass.adap);

            GlobalClass.dt = new DataTable();

            GlobalClass.adap.Fill(GlobalClass.dt);

            GridView1.DataSource = GlobalClass.dt;

            GridView1.DataBind();

        }

        catch

        {

 

        }

    }

 

    /// <summary>

    /// adding new record from lightbox page

    /// </summary>

    /// <param name="sender"></param>

    /// <param name="e"></param>

    protected void AddNewRecord(object sender, EventArgs e)

    {

        recaptcha.Validate();

        if (Page.IsValid)

        {

            DataRow dr = GlobalClass.dt.NewRow();

            dr[1] = txtlbName.Text.Trim();

            dr[2] = txtlbAge.Text.Trim();

            dr[3] = txtlbSalary.Text.Trim();

            dr[4] = txtlbCountry.Text.Trim();

            dr[5] = txtlbCity.Text.Trim();

            txtlbName.Text = txtlbAge.Text = txtlbAge.Text = txtlbSalary.Text = txtlbCountry.Text = txtlbCity.Text = "";

            GlobalClass.dt.Rows.Add(dr);

            GridView1.DataSource = GlobalClass.dt;

            GlobalClass.adap.Update(GlobalClass.dt);

            GridView1.DataBind();

            FillGridView();

            lblResult.Visible = false;

        }

 

        else

        {

 

            lblResult.Visible = true;

            lblResult.Text = "Please input correct image value!";

            lblResult.ForeColor = System.Drawing.Color.Red;

            ClientScript.RegisterStartupScript(GetType(), "JavaScript", "javascript: document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'", true);

        }

 

    }

 

 

 

    /// <summary>

    /// Deleting record from gridview

    /// </summary>

    /// <param name="sender"></param>

    /// <param name="e"></param>

    protected void RowDeleting(object sender, GridViewDeleteEventArgs e)

    {

        try

        {

            GlobalClass.dt.Rows[GridView1.Rows[e.RowIndex].RowIndex].Delete();

            GlobalClass.adap.Update(GlobalClass.dt);

            FillGridView();

        }

        catch

        {

 

        }

    }

}

Step 7:- Compile and run the webpage and click Hyperlink control “Add New Record”

Lightbox with reCaptcha in ASP.NET

Step 8:- Now a Lightbox popup and require for proper inputs.

Lightbox with reCaptcha in ASP.NET

 Step 9:- For Example I fill record and click button “add”. If all inputs in a proper way then Lightbox will be closed and records are populated in GridView. 

Lightbox with reCaptcha in ASP.NET

Lightbox with reCaptcha in ASP.NET

Note: - Here “Id” automatic generated in database when any new record entered.


Don't want to miss updates? Please click the below button!

Follow MindStick