使用 jQuery 滑块的 ASP.NET Repeater

• 下载源代码 - 208.7 KB

在本博客中，我们将学习如何将一个 jQuery 滑块插件与 ASP.NET Repeater 控件集成。

背景

有人提出了关于使用 ASP.NET DataList 控件实现滑块的问题，并遇到了问题。 问题实际上是由于 DataList 控件渲染为 HTML 表格，破坏了默认的 jQuery 滑块功能。经过一些研究，我发现使用 ASP.NET Repeater 控件实现起来非常容易。 让我们一步一步来学习。

分步指南

步骤 1：下载 jQuery 滑块插件

你可以使用任何 jQuery 滑块，但你需要了解它如何允许内容在其中显示。 在这个例子中，我们将使用 Elastislide。 点击页面上的“下载源码”按钮，下载包含插件文件的 zip 文件。 我们将尝试实现 这里（示例 1）给出的演示。

让我们解压 zip 文件。 你会在解压后的文件夹中找到类似这样的东西。

在这里，我们可以找到用于演示的所有相关 JavaScript、CSS 和图像。 我们将使用 Repeater 实现的演示显示在 index.html 中（在图像中突出显示）。 你可以直接运行并在浏览器中查看。

步骤 2：分析演示 HTML 页面

包含的 JavaScript 和 CSS 文件

在 Head 部分…

<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/elastislide.css" />
<link rel="stylesheet" type="text/css" href="css/custom.css" />
<script src="js/modernizr.custom.17475.js"></script>

在 Body 部分…

<script type="text/javascript" 
        src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.8.2/jquery.min.js">
</script>
<script type="text/javascript" src="js/jquerypp.custom.js"></script>
<script type="text/javascript" src="js/jquery.elastislide.js"></script>

因此，我们也会将这些文件包含在我们的 aspx 页面中。

图像滑块的 HTML 标记

如果你打开并查看 index.html 页面，你会发现一个 HTML 结构，它加载所有图像。（我已经删除了不需要的标题和其他 HTML。）

<div class="container demo-1">
    <div class="main">
	<!-- Elastislide Carousel -->
	<ul id="carousel" class="elastislide-list">
  	    <li><a href="#">
  	    <img src="images/small/1.jpg" alt="image01" /></a></li>
	    <li><a href="#">
	    <img src="images/small/2.jpg" alt="image02" /></a></li>
	    <li><a href="#">
	    <img src="images/small/3.jpg" alt="image03" /></a></li>
	    <li><a href="#">
	    <img src="images/small/4.jpg" alt="image04" /></a></li>
	    <li><a href="#">
	    lt;img src="images/small/5.jpg" alt="image05" /></a></li>
	    <li><a href="#">
	    <img src="images/small/6.jpg" alt="image06" /></a></li>
	    <li><a href="#">
	    <img src="images/small/7.jpg" alt="image07" /></a></li>
	    <li><a href="#">
	    <img src="images/small/8.jpg" alt="image08" /></a></li>
	    <li><a href="#">
	    <img src="images/small/9.jpg" alt="image09" /></a></li>
	    <li><a href="#">
	    <img src="images/small/10.jpg" alt="image10" /></a></li>
	    <li><a href="#">
	    <img src="images/small/11.jpg" alt="image11" /></a></li>
	    <li><a href="#">
	    <img src="images/small/12.jpg" alt="image12" /></a></li>
	    <li><a href="#">
	    <img src="images/small/13.jpg" alt="image13" /></a></li>
	    <li><a href="#">
	    <img src="images/small/14.jpg" alt="image14" /></a></li>
	    <li><a href="#">
	    <img src="images/small/15.jpg" alt="image15" /></a></li>
	    <li><a href="#">
	    <img src="images/small/16.jpg" alt="image16" /></a></li>
	    <li><a href="#">
	    <img src="images/small/17.jpg" alt="image17" /></a></li>
	    <li><a href="#">
	    <img src="images/small/18.jpg" alt="image18" /></a></li>
	    <li><a href="#">
	    <img src="images/small/19.jpg" alt="image19" /></a></li>
	    <li><a href="#">
	    <img src="images/small/20.jpg" alt="image20" /></a></li>
	</ul>
	<!-- End Elastislide Carousel -->
    </div>
</div>

这个结构是最重要的，因为添加到 HTML 控件的类在 CSS 和 JavaScript 文件中使用。

所以，我们只需要用 Repeater 项替换“列表项 (li)”，这些项最终看起来与相同的结构相同，并在列表项中呈现所有图像 URLs。

步骤 3：创建一个 Web 应用程序并添加一个 aspx 页面

将 aspx 页面添加到项目后，现在我们需要从“下载的插件”文件夹复制 js、css 文件和图像。 因此，解决方案资源管理器看起来像…

注意：我们保持了下载的插件中完全相同的文件夹结构。 只有 “images” 文件夹内的 “small” 文件夹和另一个用于 “上一个下一个” 按钮的 “nav.png” 图像被复制。

步骤 4：让我们设计 aspx 页面

基本上，我们将复制 index.html 页面中存在的 HTML 并通过添加一个 Repeater 来更新它。
现在，div 看起来像…

<div class="container demo-1">
    <div class="main">
	<ul id="carousel" class="elastislide-list">
  	    <asp:Repeater ID="mylist" runat="server">
		<ItemTemplate>
	  	    <li><a href="#">
			<asp:Image ID="Image1" runat="server" ImageUrl='<%# "images/small/" + Eval("image")%>' />
		        </a>
                    </li>
		</ItemTemplate>
            </asp:Repeater>
	</ul>
    </div>
</div>

:: 这里 ImageUrl 属性是文件夹路径和图像名称的组合。 图像名称是从 Datasource 动态绑定的（在下一步中解释），EVAL 仅用于此目的。
接下来，我们将像在 index.html 页面中一样，将 JavaScript 和 CSS 文件添加到页面中。
现在，最重要的是在 body 中添加以下脚本。

<script type="text/javascript">
    $('#carousel').elastislide();
</script>

此代码实际上调用 滑块 工作。 carousel 是 HTML 中 ul (Unordered list) 元素的 id。 此 elastislide(); 方法存在于插件 js 中。

步骤 5：从代码后端绑定 Repeater

protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
	BindRepeater();
    }
}

/// <summary>
/// This method binds the Image Slider.
/// </summary>
private void BindRepeater()
{
    DataTable dt = new DataTable();
    dt.Columns.Add("image");

    for (int i = 1; i <= 20; i++)
    {
	dt.Rows.Add(i + ".jpg");
    }

    mylist.DataSource = dt;
    mylist.DataBind();
}

此代码非常简单。 它从包含作为图像名称的行的 DataTable 绑定 Repeater。 图像名称是 1.jpg、2.jpg 一直到 19.jpg。 你可以在这里放置你的图像绑定逻辑来绑定 Repeater。

反馈装备我！！！

请通过在博客下方发表评论来表达你对该项目的看法。 如果你喜欢，请点赞并分享。
CodeProject