LIGHTBOX EXAMPLE

--- title: "Lightbox with reCaptcha in ASP.NET" description: "This article describes Lightbox as a simple, unobtrusive script used to overlay images on the current page. It delivers a nice, professional looking m" author: "AVADHESH PATEL" published: 2012-08-07 updated: 2019-09-07 canonical: https://www.mindstick.com/articles/975/lightbox-with-recaptcha-in-asp-dot-net category: "asp.net" tags: ["asp.net"] reading_time: 8 minutes --- # Lightbox with reCaptcha in ASP.NET This article describes Lightbox as a simple, [unobtrusive](https://www.mindstick.com/interview/23012/what-is-unobtrusive-javascript) script used to overlay images on the current page. It delivers a nice, [professional](https://www.mindstick.com/articles/13107/scaling-the-gap-between-a-graduate-and-a-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](https://www.mindstick.com/articles/43/validation-controls-in-asp-dot-net) 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](https://www.mindstick.com/mindstickarticle/14b1334d-a40c-4be5-ab9c-fc89c3448c87/images/636f560f-2413-47cb-af51-e427cb5f63bf.png) 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](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" %> LIGHTBOX EXAMPLE <%-- class for LightBox--%>

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

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

User Information

<%--reCaptcha control--%>

Name:	<%-- script for Name validation--%> <%--script for trim space--%>

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

Salary:	<%--script for salary validator or numeric values validator--%> <%-- Convert into Money Formate--%>

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

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

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

Id Name Age Salary Country City Operation No record available
<%-- hyperlink for display lightbox--%> Add New Record

``` 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(); } } ///

/// function for fill gridview ///

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 { } } ///

/// adding new record from lightbox page ///

/// /// 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); } } ///

/// Deleting record from gridview ///

/// /// 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](https://www.mindstick.com/mindstickarticle/14b1334d-a40c-4be5-ab9c-fc89c3448c87/images/422d0a09-0b48-4038-b1b7-08e888bbbf62.png) Step 8:- Now a Lightbox popup and require for proper inputs. ![Lightbox with reCaptcha in ASP.NET](https://www.mindstick.com/mindstickarticle/14b1334d-a40c-4be5-ab9c-fc89c3448c87/images/37a517cc-ff0e-4514-9e92-97f75c03ba6b.png) 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](https://www.mindstick.com/mindstickarticle/14b1334d-a40c-4be5-ab9c-fc89c3448c87/images/c65db4c0-c555-4e79-ba64-3bcbac9c6f71.png) ![Lightbox with reCaptcha in ASP.NET](https://www.mindstick.com/mindstickarticle/14b1334d-a40c-4be5-ab9c-fc89c3448c87/images/d088b1b4-6f35-4f17-a69d-ef186142c86b.png) Note: - Here “Id” automatic generated in database when any new record entered. \ --- Original Source: https://www.mindstick.com/articles/975/lightbox-with-recaptcha-in-asp-dot-net Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.