How to Use LiteBox in GridView ASP.NET

Step 1 : Your .aspx page will look like:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="LiteboxGridview.aspx.cs"

    Inherits="LiteboxGridview" %>

<!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>GridView With Lite Box</title>

    <!-- You must add jQuery for litebox-->

    <script src="js/prototype.js" type="text/javascript"></script>

    <script src="js/scriptaculous.js" type="text/javascript"></script>

    <script src="js/lightbox.js" type="text/javascript"></script>

    <!-- You must add css for litebox-->

    <link href="css/lightbox.css" rel="stylesheet" type="text/css" />

</head>

<body>

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

    <div>

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

            Width="100%" onrowdatabound="GridView1_RowDataBound">

            <Columns>

                <asp:BoundField DataField="Empid" HeaderText="Empid">

                    <ItemStyle  />

                </asp:BoundField>

                <asp:TemplateField HeaderText="Empname">

                    <ItemTemplate>

                       <a id="employeeimage" runat="server"><asp:Label ID="empname" runat="server" Text='<%#Eval("Empname") %>'></asp:Label></a>

                    </ItemTemplate>

                </asp:TemplateField>

                <asp:BoundField DataField="City" HeaderText="City">

                    <ItemStyle />

                </asp:BoundField>

            </Columns>

        </asp:GridView>

    </div>

    </form>

</body>

</html>

Step 2 : Your .cs file:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.HtmlControls;

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

    DataHelper helper = new DataHelper();

    List<Employee> emplist = new List<Employee>();

    protected void Page_Load(object sender, EventArgs e)

        if (!IsPostBack)

            BindGridView();

    private void BindGridView()

        helper = new DataHelper();

        emplist = helper.GetEmployeeData();

        if (emplist != null)

            if (emplist.Count > 0)

                GridView1.DataSource = emplist;

                GridView1.DataBind();

    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)

        if (e.Row.RowType == DataControlRowType.DataRow)

            //logic for Creating litebox effect.

            HtmlAnchor employeeimage = e.Row.FindControl("employeeimage") as HtmlAnchor;

            if (employeeimage != null)

                string imagepath = "empimage/l2.jpg";

                employeeimage.Attributes.Add("title", "View Image");

                employeeimage.Attributes.Add("rel", "lightbox");

                employeeimage.Attributes.Add("href", imagepath);

Up Next

Ebook Download

View all

Read by 9.3k people

Download Now!

Learn

View all