ASP.NET的数据控件repeater应用

最新推荐文章于 2022-10-08 10:46:09 发布
最新推荐文章于 2022-10-08 10:46:09 发布
阅读量606 收藏 1
点赞数 1
文章标签： c# asp.net
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41775769/article/details/105948375
版权

1.0 Repeater控件概览

  • 掌握数据绑定控件Repeater使用方式
  • 学会使用Repeater控件展示批量数据
  • 通过一个小案例来实现repeater的实际应用

2.0 什么是Repeater控件

Repeater 控件用于显示被绑定在该控件上的项目的重复列表
举一个栗子（如下图书的列表）：
在这里插入图片描述
Step1：首先让前端设计人员写一个列表页（这里我是通过Bootstrap实现的）
demo.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>书籍列表页</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap-grid.min.css" />
    <link rel="stylesheet" href="http://jrain.oscitas.netdna-cdn.com/tutorial/css/fontawesome-all.min.css">

    <style type="text/css">
        .product-grid {
            font-family: 'Open Sans', sans-serif;
            text-align: center;
        }

            .product-grid .product-image {
                position: relative;
                overflow: hidden;
            }

                .product-grid .product-image a.image {
                    display: block;
                }

                .product-grid .product-image img {
                    width: 75%;
                    height: auto;
                    transition: all 0.3s;
                }

                .product-grid .product-image:hover img {
                    transform: scale(1.05);
                }

            .product-grid .product-new-label {
                color: #fff;
                background: #cd1b29;
                font-size: 10px;
                font-weight: 600;
                text-transform: uppercase;
                padding: 3px 10px 10px;
                position: absolute;
                top: 0px;
                left: 33px;
                clip-path: polygon(0 0, 100% 0, 100% 75%, 15% 75%, 0 85%, 0% 25%);
            }

            .product-grid .social li {
                margin: 5px 0;
            }

                .product-grid .social li a {
                    color: #fff;
                    background: #033772;
                    font-size: 16px;
                    line-height: 40px;
                    width: 40px;
                    height: 40px;
                    display: block;
                    position: relative;
                    transition: all .3s ease;
                }

                    .product-grid .social li a:hover {
                        background: #1f72ce;
                    }

                    .product-grid .social li a:before {
                        content: attr(data-tip);
                        color: #fff;
                        background-color: #1f72ce;
                        font-size: 13px;
                        font-weight: 600;
                        line-height: 22px;
                        padding: 9px 12px;
                        white-space: nowrap;
                        visibility: hidden;
                        position: absolute;
                        left: 100%;
                        top: 0;
                        transition: all 0.3s ease;
                    }

                    .product-grid .social li a:hover:before {
                        visibility: visible;
                    }

            .product-grid .product-content {
                width: 100%;
                padding: 12px 0;
                display: inline-block;
            }

            .product-grid .title {
                margin: 0 0 7px;
                font-size: 16px;
                font-weight: 600;
                text-transform: capitalize;
            }

                .product-grid .title a {
                    color: #000;
                    transition: all 0.4s ease-out;
                }

                    .product-grid .title a:hover {
                        color: #033772;
                    }

        @media only screen and (max-width:990px) {
            .product-grid {
                margin: 0 0 30px;
            }
        }
    </style>
</head>
<body>
    <div class="demo">
        <div class="container">
            <div class="row">
                <div class="col-md-3 col-sm-6">
                    <div class="product-grid">
                        <div class="product-image">
                            <a href="#" class="image">
                                <img class="pic-1" src="imgs/哲学中的智慧.jpg">
                            </a>
                            <span class="product-new-label">new</span>
                        </div>
                        <div class="product-content">
                            <h3 class="title"><a href="#">哲学中的智慧</a></h3>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <div class="product-grid">
                        <div class="product-image">
                            <a href="#" class="image">
                                <img class="pic-1" src="imgs/软件工程导论.jpg">
                            </a>
                            <span class="product-new-label">new</span>
                        </div>
                        <div class="product-content">
                            <h3 class="title"><a href="#">软件工程导论</a></h3>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <div class="product-grid">
                        <div class="product-image">
                            <a href="#" class="image">
                                <img class="pic-1" src="imgs/新闻传播概述.jpg">
                            </a>
                            <span class="product-new-label">new</span>
                        </div>
                        <div class="product-content">
                            <h3 class="title"><a href="#">新闻传播概述</a></h3>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <div class="product-grid">
                        <div class="product-image">
                            <a href="#" class="image">
                                <img class="pic-1" src="imgs/数据库实用技术.jpg">
                            </a>
                            <span class="product-new-label">new</span>
                        </div>
                        <div class="product-content">
                            <h3 class="title"><a href="#">数据库实用技术</a></h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

完成的效果和上面展示的一样。
Step2：需要后台数据库的设计人员，将需要展示的表准备好
在这里插入图片描述
拖放sqlDataSource空间之后的展示数据如下：
在这里插入图片描述Step3：拖放数据控件，绑定数据源

一、 后端获取数据

  • 拖放数据控件SqlDataSource
  • 创建数据库连接字符串（手动设置）
  • 写SQL语句，查询相关表的属性
  • 查询的数据集发送给前端
    • <%#Eval(“属性名”) %>数据绑定式

二、前端设置数据
自行设置数据的显示方式

<HeaderTemplate> </Header Template>
    ·  设置Repeater开始显示内容
<ItemTemplate> </Item Template>
    · 设置Repeater反复显示的内容
<FooterTemplate> </Footer Template>
    ·  设置Repeater最后显示的内容

三、具体编码如下：
SqlDataSource数据源：控件标识ID、连接字符串、查询命令

<asp:SqlDataSource ID="CourseSource" runat="server" ConnectionString="<%$ ConnectionStrings:StudentSoreConnectionString %>" SelectCommand="SELECT TOP(8) [课程名], [课程封面], [备注] FROM [课程表]"></asp:SqlDataSource>

Repeater控件的具体操作

<asp:Repeater ID="AllCourses" runat="server" DataSourceID="courseSource">
                    <ItemTemplate>
                        <div class="col-md-3 col-sm-6">
                            <div class="product-grid">
                                <div class="product-image">
                                    <a href="#" class="image">
                                        <img class="pic-1" src="./img/course/<%#Eval("课程封面") %>" style="width:220px;height:300px;">
                                    </a>
                                    <span class="product-new-label">new</span>
                                </div>
                                <div class="product-content">
                                    <h3 class="title"><a href="#"><%#Eval("课程名") %></a></h3>
                                    <p style="color:darkblue;font-size:small;">
                                                 <%#Eval("备注") %>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </ItemTemplate>
                </asp:Repeater>

注：这里我又增加了一个p标签用来加入课程的描述字段

这些都可以通过VS2013集成，根本不用写一句代码哦！
我们来看看测试的效果吧！
在这里插入图片描述

通过Repeater控件将前后台完美的结合，这里仅仅读取了数据表中的前8条数据。

3.0 Repeater小结

在这里插入图片描述
原创不易，欢迎点赞关注

Training.L
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
asp:repeater控件使用
weixin_33922672的博客
11-15 304
repeater.aspx: <%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="repeater.aspx.cs"Inherits="MyWebservice.repeater"%> <!DOCTYPEhtmlPUBLIC"-//W3C//DT...
ASP.NET WEB中三层架构使用Repeater控件实现的真分页效果(详细代码案例)
最新发布
code_xu的博客
04-23 242
【代码】ASP.NET WEB中三层架构使用Repeater控件实现的真分页效果(详细代码案例)
aspx repeater 用法_ASP.NET笔记之 Repeater的使用
weixin_39853892的博客
12-21 316
1、数据绑定combox-->BingdSource-->ObjectDataSource//连接数据库**后台代码：T_UserTableAdapter adpter=T_UserTableAdpter();adpater.调用T_User表的自定义方法//设置初始数据：AppenddateBource="true";2、Repeater 动态显示数据表中所有数据：(相当于一个for...
asp.net动态网站repeater控件使用及分页操作介绍
weixin_30819085的博客
11-04 416
asp.net动态网站repeater控件使用及分页操作介绍 1.简单介绍 Repeater控件是一个容器控件，可用于从网页的任何可用数据中创建自定义列表。Repeater 控件没有自己内置的呈现功能，这意味着用户必须通过创建模板来提供 Repeater 控件的布局。当网页运行时，Repeater 控件会循环通过数据源中的记录，并为每个记录呈现一个项。 2.布局 一个完整的Repeater包括...
ASP.NET基础（二）数据展示Repeater
diaomen1607的博客
08-10 131
展示数据： Repeater 后台代码写： Repeater1.DataSource = 查询的数据的方法；Repeater1.DataBind(); //不要忘了写这句话； <tbody> <asp:Repeater ID="Repeater1" runat="server"> <%-- 在内容里...
ASP.NET数据绑定之Repeater控件
01-20
在ASP.NET的应用程序开发中，Repeater控件经常被用来动态地呈现数据库或其他数据源中的信息。它的核心特点在于允许开发者自定义数据展示的格式，而不像其他控件如GridView那样提供预设的样式。 Repeater控件包含...
ASP.NET中repeater控件用法实例
10-24
主要介绍了ASP.NET中repeater控件用法,实例分析了repeater控件数据绑定、删除等相关技巧,具有一定实用价值,需要的朋友可以参考下
详解ASP.NET数据绑定操作中Repeater控件的用法
10-22
.NET中的Repeater控件支持数据模板,而且可以自由地定义样式,这里我们就来详解ASP.NET数据绑定操作中Repeater控件的用法,需要的朋友可以参考下
asp.net Repeater控件的说明及详细介绍及使用方法
10-29
Repeater控件是Web 服务器控件中的一个容器控件，它使您可以从页的任何可用数据中创建出自定义列表。
ASP.NET数据绑定控件详解
10-20
主要为大家详细介绍了ASP.NET数据绑定控件，为大家解析了ListBox、GridView、Repeater三个数据绑定控件的“高效分页”，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
asp:Repeater绑定
05-24
asp:Repeater页面元素，后台绑定，js操作 <asp:Repeater ID="TreatySignTblRowRepeater" runat="server"> <ItemTemplate> <tr class="row"><td class="hidden"><%# Eval("treatySignID") %></td><td><%# Eval("treatyGovernment") %></td><td><%# Eval("signerTitle") %></td><td><%# Eval("treatySigner") %></td> <td><input type="button" value="编辑" /><input type="button" value="删除" /></td></tr> </ItemTemplate> </asp:Repeater>
asp.net 遍历repeater中的控件的几种方式
10-29
遍历repeater中的控件的几种方式小结，需要的朋友可以参考下。
asp.net Repeater取得CheckBox选中的某行某个值
01-20
1、 foreach (Control c in this.rptTables.Controls) {     CheckBox cbx = (CheckBox)c.FindControl(“cbxId”);     TextBox tbx = (TextBox)c.FindControl(“tbxTableName”);     if (cbx != null)     {         if (cbx.Checked == true)         {              common.salert(tbx.Text);         }     } } 2、 for (int
asp.net Repeater 数据绑定的具体实现(图文详解)
10-27
此例子绑定的数据源为微软在mssql2000中提供的Northwind数据库中的表Categories。
asp.net学习之Repeater控件
weixin_34111819的博客
10-19 133
    Repeater控件和DataList控件，可以用来一次显示一组数据项。比如，可以用它们显示一个数据表中的所有行。     Repeater控件完全由模板驱动，提供了最大的灵活性，可以任意设置它的输出格式。DataList控件也由模板驱动，和Repeater不同的是，DataList默认输出是HTML表格，DataList将数据源中的记录输出为HTML表格一个个的单元格。 1....
C# ASP.NET中Repeater控件
weixin_44498188的博客
10-08 553
C# ASP.NET中Repeater控件
.NET中ASP.NET丶Repeater介绍
weixin_44870681的博客
10-21 465
Repeater介绍 （1）：Repeater(foreach)用于对绑定数据源中的数据进行遍历并按格式显示，每条数据以什么格式显示是由Repeater的来决定的，模板会多次显示，就像foreach， ItemTemplate 中相当于{}中的语句。姓名：<%#Eval(“Name”)%>年龄：<%#Eval(“Age”)%> 。注意：%和#中间不能有空格。 （2）：&lt...
ASP.NET Repeater 数据分页实现与Ajax分页控件
"本文将详细介绍如何在ASP.NET中使用Repeater控件实现高效的数据分页功能，包括分页控件的源代码示例和关键属性的解释。" 在ASP.NET Web开发中，Repeater控件是一种非常灵活的数据绑定控件，它允许开发者自定义模板...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值