Sử dụng JQuery lightbox để tạo Gallery trong Datalist Asp.net

By Unknown - Tuesday, August 25, 2015 - No Comments

(JQuery lightbox image slideshow in Datalist asp.net) – Lightbox là một plugin jquery phổ biến được sử dụng để hiển thị hình ảnh và nội dung trong cửa sổ popup. Bài viết dưới đây sẽ giới thiệu với các bạn cách lấy danh sách hình ảnh từ thư mục và kết hợp với jquery Lightbox để tạo Gallery và trình diễn nó.

Xem những Video hay dành cho thiếu nhi - Nghe trên Youtube

- B1: Tạo Project trong Microsoft Visual Studio 2010

Trong Visual Studio tạo 1 Class có tên: FileSystemItem và nhập đoạn Code phía dưới cho Class này.

C# Code

using System.IO;

public class FileSystemItem

{

public FileSystemItem(FileInfo file)

{

this.Name = file.Name;

this.FullName = file.FullName;

}

public string Name { get; set; }

public string FullName { get; set; }

}

VB.NET Code

Imports System.IO

Public Class FileSystemItem

Public Sub New(ByVal file As FileInfo)

Me.Name = file.Name

Me.FullName = file.FullName

End Sub

Public Property Name As String

Public Property FullName As String

End Class

- B2: Tạo thư mục Images trong Project, Download thư viện ảnh tại đây và Copy vào thư mục vừa tạo

- B3: Download file jquery.lightbox-0.5.css -> Copy vào thư mục Styles

- B4: Download jquery-1.3.2.js, jquery.lightbox-0.5.js-> Copy vào thư mục Styles

- B5: Mở file Default.aspx dưới dạng HTML và nhập mã HTML
C# Code

<%@ Page Title="Use jQuery Lightbox in Asp.net Datalist" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="jQueryLightboxDatalist._Default" %>

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<h3>

Use jQuery Lightbox in Asp.net Datalist

</h3>

function pageLoad() {

$('#gallery a').lightBox();

};

</script>

<asp:UpdatePanel ID="updatePanel" runat="server" UpdateMode="Conditional">

<tr>

<td>

<asp:DataList ID="lstEmployees" runat="server" CellPadding="0" CellSpacing="0" Width="100%"

RepeatDirection="Horizontal" RepeatColumns="6" OnItemDataBound="lstEmployees_ItemDataBound">

<asp:HyperLink id="lnkEmployee" runat="server" CssClass="Image">

<asp:Image id="imgEmployee" runat="server" ImageAlign="Middle" Width="100px" hspace="0" vspace="0"></asp:Image>

</asp:HyperLink>

</td>

</tr>

<tr>

<asp:Label ID="lblName" Text='<%# Eval("Name") %>' Runat="server" />

</td>

</tr>

</table>

</ItemTemplate>

</asp:DataList>

</td>

</tr>

</table>

</ContentTemplate>

</asp:UpdatePanel>

</asp:Content>

VB.NET Code

<%@ Page Title="Use jQuery Lightbox in Asp.net Datalist" Language="vb" MasterPageFile="~/Site.Master" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="jQueryLightboxDatalist._Default" %>

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<h3>

Use jQuery Lightbox in Asp.net Datalist

</h3>

function pageLoad() {

$('#gallery a').lightBox();

};

</script>

<asp:UpdatePanel ID="updatePanel" runat="server" UpdateMode="Conditional">

<tr>

<td>

<asp:DataList ID="lstEmployees" runat="server" CellPadding="0" CellSpacing="0" Width="100%" RepeatDirection="Horizontal" RepeatColumns="6">

<asp:HyperLink id="lnkEmployee" runat="server" CssClass="Image">

<asp:Image id="imgEmployee" runat="server" ImageAlign="Middle" Width="100px" hspace="0" vspace="0"></asp:Image>

</asp:HyperLink>

</td>

</tr>

<tr>

<asp:Label ID="lblName" Text='<%# Eval("Name") %>' Runat="server" />

</td>

</tr>

</table>

</ItemTemplate>

</asp:DataList>

</td>

</tr>

</table>

</ContentTemplate>

</asp:UpdatePanel>

</asp:Content>

- B4: Viết Code cho file Default.aspx

C# Code

//Visit http://www.laptrinhdotnet.com for more ASP.NET Tutorials

using System;

using System.Data;

using System.IO;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web;

using System.Collections;

using System.Collections.Generic;

namespace jQueryLightboxDatalist

{

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

{

#region "Private Members"

private string FilePath = "";

#endregion

#region "Private Methods"

private void SetFilePath()

{

FilePath = MapPath("~/Images");

if (!Directory.Exists(FilePath))

{

Directory.CreateDirectory(FilePath);

}

private string GetFullyQualifiedFolderPath(string folderPath)

{

if (folderPath.StartsWith("~"))

{

return Server.MapPath(folderPath);

}

else

{

return folderPath;

}

#endregion

#region "Bind Data"

private void BindData()

{

DirectoryInfo currentDirInfo = new DirectoryInfo(GetFullyQualifiedFolderPath(FilePath));

dynamic folders = currentDirInfo.GetDirectories();

dynamic files = currentDirInfo.GetFiles();

List<FileSystemItem> fsItems = new List<FileSystemItem>(folders.Length + files.Length);

foreach (var file in files)

fsItems.Add(new FileSystemItem(file));

lstEmployees.DataSource = fsItems;

lstEmployees.DataBind();

}

#endregion

#region "Datalist Methods"

protected void lstEmployees_ItemDataBound(object sender, DataListItemEventArgs e)

{

if (e.Item.ItemType == ListItemType.Item | e.Item.ItemType == ListItemType.AlternatingItem)

{

FileSystemItem item = (FileSystemItem)e.Item.DataItem;

Image imgEmployee = (Image)e.Item.FindControl("imgEmployee");

if (imgEmployee != null)

{

imgEmployee.ImageUrl = Page.ResolveUrl("Images/" + item.Name);

}

#endregion

#region "Event Handles"

protected void Page_Load(object sender, System.EventArgs e)

{

try

{

if (!IsPostBack)

{

SetFilePath();

BindData();

}

catch

{

}

#endregion

}

VB.NET Code

'Visit http://www.laptrinhdotnet.com for more ASP.NET Tutorials

Imports System.IO

Namespace jQueryLightboxDatalist

Public Class _Default

Inherits System.Web.UI.Page

#Region "Private Members"

Private FilePath As String = ""

#End Region

#Region "Private Methods"

Private Sub SetFilePath()

FilePath = MapPath("~/Images")

If Not Directory.Exists(FilePath) Then

Directory.CreateDirectory(FilePath)

End If

End Sub

Private Function GetFullyQualifiedFolderPath(ByVal folderPath As String) As String

If folderPath.StartsWith("~") Then

Return Server.MapPath(folderPath)

Else

Return folderPath

End If

End Function

#End Region

#Region "Bind Data"

Private Sub BindData()

Dim currentDirInfo As New DirectoryInfo(GetFullyQualifiedFolderPath(FilePath))

Dim folders = currentDirInfo.GetDirectories()

Dim files = currentDirInfo.GetFiles()

Dim fsItems As New List(Of FileSystemItem)(folders.Length + files.Length)

For Each file In files

fsItems.Add(New FileSystemItem(file))

lstEmployees.DataSource = fsItems

lstEmployees.DataBind()

End Sub

#End Region

#Region "Datalist Methods"

Private Sub lstEmployees_ItemDataBound(ByVal sender As Object, ByVal e As DataListItemEventArgs) Handles lstEmployees.ItemDataBound

If (e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem) Then

Dim item As FileSystemItem = CType(e.Item.DataItem, FileSystemItem)

Dim lnkEmployee As HyperLink = DirectCast(e.Item.FindControl("lnkEmployee"), HyperLink)

If Not lnkEmployee Is Nothing Then

lnkEmployee.NavigateUrl = Page.ResolveUrl("Images/" & item.Name)

Dim imgEmployee As Image = DirectCast(lnkEmployee.FindControl("imgEmployee"), Image)

If Not imgEmployee Is Nothing Then

imgEmployee.ImageUrl = Page.ResolveUrl("Images/" & item.Name)

End If

End Sub

#End Region

#Region "Event Handles"

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

Try

If Page.IsPostBack = False Then

SetFilePath()

BindData()

End If

Catch ex As Exception

End Try

End Sub

#End Region

End Class

End Namespace

Bây giờ chạy Project bạn sẽ có kết quả như ảnh phía dưới.

Chúc các bạn thành công!

Quang Bình

News Ticker