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


litebox.gif
litebox1.gif

Next Recommended Readings