65.9K
CodeProject 正在变化。 阅读更多。
Home

LightBox 连接到 Microsoft SQL DB

Orane Cole
starIconstarIconstarIconstarIconemptyStarIcon

4.00/5 (3投票s)

2010年2月22日

CPOL

4分钟阅读

viewsIcon

42869

downloadIcon

1023

lightbox 控件从后端 SQL Server 读取数据

引言

我目前正在为客户开发一个网站，该网站需要一个 LightBox 控件，该控件可以从 Microsoft SQL DB 中提取信息。这起初很有挑战性，因为 Lightbox 控件是标准的，需要一个嵌入的 href 标签才能启用。我找到了绕过这个限制的方法，希望本文对您有所帮助。

什么是 LightBox

Lightbox 是一个 JavaScript 应用程序，用于通过模态对话框显示大图像。

Lightbox 如何工作

在 Lightbox 启用的页面上，用户可以单击图像，在 Lightbox 窗口中将其放大，该窗口会使用平滑的动画根据图像的大小进行调整。Lightbox 通过 XHTML "rel" 属性确定要在模态窗口中显示哪些图像，该属性用于包装 <img> 元素的 <a> 元素。Lightbox 还提供了一种为图像附加说明以及运行幻灯片放映的方法，可以通过箭头键进行导航。

Lightbox 功能

Lightbox 允许用户在不离开当前页面的情况下查看更大版本的图像，并且还能够显示简单的幻灯片放映。使用使页面变暗的深色背景，也能突出显示正在查看的图像。虽然 Lightbox 的功能依赖于浏览器对 Prototype 的兼容性，但 Lightbox 是通过标准链接标签触发的。因此，不支持 JavaScript 的浏览器将图像直接加载为单独的文件，丢失了 Lightbox 效果，但仍然能够显示全尺寸图像。
我不会详细介绍 LightBox 脚本，因为它相当标准。您可以下载脚本并尝试进行改进。

Repeater 控件中的数据绑定

Repeater 控件用于显示绑定到该控件的项目列表。与其他数据绑定控件一样，Repeater 控件支持 DataSource 属性，该属性允许您绑定任何有效的 DataSource ，例如 sqlDataSource、XML 文件或实现 ICollection、IEnumerable 或 IListSource 接口的任何数据集。一旦调用了 Repeater 控件的 DataBind 方法，ASP.NET 将遍历 DataReader （即通过 DataSourceMode= "DataReader" 设置的）并用我们指定的数据填充 Repeater 。Databinder.Eval 方法使用反射在运行时解析和评估数据绑定表达式相对于一个对象，在这种情况下，该对象是我们的 Repeater。所以这行代码

<a id="LightBox_Content" href="<%#DataBinder.Eval(Container.DataItem, "href")%>" 
rel="<%#DataBinder.Eval(Container.DataItem, "rel")%>" 
title="<%#DataBinder.Eval(Container.DataItem, "title")%>"></a>

将渲染从 SQL DB 检索到的 "href"、"rel" 和 "title" 值在 DataReader 中的每一行。

SqlDataSource

<asp:SqlDataSource ID="SqlDataLightBox" runat="server"
ConnectionString="<%$ ConnectionStrings:YourConnectionString %>" 
SelectCommand="SELECT * FROM [LightBox]"
DataSourceMode="DataReader">

</asp:SqlDataSource>

SqlDataSource 控件在调用 Select 方法时检索数据。此方法提供对 SelectMethod 属性指定的方法的编程访问。当绑定到 SqlDataSource 的控件调用其 DataBind 方法时，会为 Select 方法自动调用。如果设置了数据绑定控件的 DataSourceID 属性，则该控件会自动按照要求与数据源的数据绑定。推荐使用设置 DataSourceID 属性将 ObjectDataSource 控件绑定到数据绑定控件。或者，您可以使用 DataSource 属性，但然后必须显式调用数据绑定控件的 DataBind 方法。

Using the Code

只需下载附件的 LightBox Extended.zip 文件，在 Visual Studio 中打开，然后运行项目。运行此应用程序的另一种方法是将解压后的版本加载到通常位于 C:\Inetpub\wwwroot 的 wwwroot 文件夹中，然后在 IIS 中创建一个虚拟目录。完成后，只需转到 Default.aspx 页面并浏览。

这是我的做法

步骤 1

创建一个 SQL DB，其中包含锚标签的各种属性。
例如 href varchar(250), rel varchar(250), title varchar(250)。用您会嵌入到页面中的相同值填充它们。

第二步

在 Default.aspx 页面中，创建一个连接到 DB 的 SqlDataSource 。例如

<asp:sqldatasource selectcommand="SELECT * FROM [LightBox]" 
	connectionstring="<%$ ConnectionStrings:YOURConnectionString %>" 
	runat="server" id="SqlDataLightBox">

注意：LightBox 是我的数据库名称。您必须在 Web.config 文件中的 ConnectionStrings 属性中有一个适当的连接字符串。

魔术实际上发生在 Repeater 控件。
解释：标签被评估并绑定到从 SQL DB 检索到的列。Repeater 控件在加载时将页面中的所有字面量值渲染为 HTML。所以这就好了，您已成功从 DB 检索数据并加载到 LightBox。您可以嵌入一个灯箱图像，就像一个超链接一样，确保它具有与数据库中相同的 rel 属性，这样它就会对图像进行分组。

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Light Box Extended</title>
    <link rel="stylesheet" href="LightBox/css/lightbox.css" type="text/css" media="screen" />
    <script type="text/javascript" src="LightBox/js/prototype.js"></script>
    <script type="text/javascript" src="LightBox/js/scriptaculous.js?load=effects,builder">
    </script>
    <script type="text/javascript" src="LightBox/js/lightbox.js"></script>
    
    <style type="text/css">
    #pic
    {
        width:200px;
        height:200px;
    }
    
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
                <div> 
                    <a id="LightBoxImage" href="Images/Bear.jpg" 
			rel="lightbox[Photo]" title="my caption">
                        <img id="pic" src="Images/Bear.jpg" alt="No Pic Available!" />
                    </a>
               
                </div>
      <asp:Repeater ID="RepeaterLightBox" runat="server" DataSourceID="SqlDataLightBox">
                  <HeaderTemplate>
                    <table border="0" cellpadding="5" cellspacing="1">
                </HeaderTemplate>
                <ItemTemplate>
                <tr>
                    <td>
                        <a id="LightBox_Content" href="<%#DataBinder.Eval(Container.DataItem,
			 "href")%>" rel="<%#DataBinder.Eval
					(Container.DataItem, "rel")%>"
			 title="<%#DataBinder.Eval(Container.DataItem, "title")%>"></a>
                    </td>
                </tr>
                </ItemTemplate>
                <FooterTemplate>
                </table>
                </FooterTemplate>
                </asp:Repeater>
    </div>
    <div>
      <asp:SqlDataSource    ID="SqlDataLightBox" runat="server"
                            ConnectionString="<%$ ConnectionStrings:YourConnectionString %>" 
                            SelectCommand="SELECT * FROM [LightBox]">
      </asp:SqlDataSource>
              
    </div>
    </form>
</body>
</html>

关注点

Repeater 控件在 HTML 中重复字面量值，最好尽可能频繁地查看页面源代码以获得一些好主意。

历史

  • 2010年2月22日：初始发布
© . All rights reserved.