zoukankan html css js c++ java

WebForm 【Repeater】展示数据

在 Webform 数据展示中 界面层： HTLM

业务逻辑层：只能用 C#

Repeater 重复器能够用来循环展示数据

具有5种模板

HeaderTemplate : 对页眉进行格式设置，在加载开始执行一遍，（不论放置什么位置都会首先执行）

FooterTemplate : 对页脚进行格式设置，在加载最后执行一遍

ItemTemplate : 对每一个数据项进行格式设置（有多少数据就执行多少次）

AlternatingItemTemplate : 对交替数据项进行格式设置

SeparatorTemplate : 对分隔符进行格式设置

绑定数据

<%@ %> 写一些声明语言或者引用

<% %> 编写C#代码，无法在界面上输出

<%= %> 等号后面接一个值，把一个变量的值输出

<%# %> 仅在数据展示中仅 Repeater 中使用

例 1 、用表格展示学生表的数据

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

/// <summary>
/// Users 的摘要说明
/// </summary>
public class Users
{
    public int Ids { get; set; }
    public string UserName { get; set; }
    public string PassWord { get; set; }
    public string NickName { get; set; }
    public bool Sex { get; set; }

    public string SexStr
    {
        get
        {
            return Sex ? "男" : "女";
        }
    }

    public DateTime Birthday { get; set; }
    public string Nation { get; set; }

    public int Age
    {
        get
        {
            return DateTime.Now.Year - Birthday.Year;
        }
    }

    public string WhiteOrRed
    {
        get
        {
            return Age >= 16 ? "white" : "red";
        }
    }

    public string SexImg
    {
        get
        {
            return Sex ? "images/1.png" : "images/0.png";
        }
    }


}

Users.cs

Users.cs

-- 在 WebForm 中原生的没有命名空间

-- 类的属性不全都是为了给用户展示的，也可以输出代码改变展示内容

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.SqlClient;

/// <summary>
/// UsersData 的摘要说明
/// </summary>
public class UsersData
{
    SqlConnection conn = null;
    SqlCommand cmd = null;
    public UsersData()
    {
        conn = new SqlConnection("server=.;database=Data0216_5;user=sa;pwd=123");
        cmd = conn.CreateCommand();
    }

    public List<Users> SelectAll()
    {
        List<Users> ulist = new List<Users>();
        cmd.CommandText = "select *from Users";

        conn.Open();
        SqlDataReader dr = cmd.ExecuteReader();
        while (dr.Read())
        {
            Users u = new Users();
            u.Ids = Convert.ToInt32(dr[0]);
            u.UserName = dr[1].ToString();
            u.PassWord = dr[2].ToString();
            u.NickName = dr[3].ToString();
            u.Sex = Convert.ToBoolean(dr[4]);
            u.Birthday = Convert.ToDateTime(dr[5]);
            u.Nation = dr[6].ToString();
            ulist.Add(u);
        }
        conn.Close();
        return ulist;
    }

}

UsersData

UsersData

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Repeater1.DataSource = new UsersData().SelectAll();
        Repeater1.DataBind();
    }
}

Default.aspx.cs

Default.aspx.cs

Repeater1.DataSource = new UsersData().SelectAll(); --数据源指向

Repeater1.DataBind(); -- DataBind 控件都需要它来控制数据的操作

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
  
      <asp:Repeater ID="Repeater1" runat="server">
  
          <HeaderTemplate>   <%--页眉设置--%>
 
               <table style=" 100%; background-color: navy; text-align: center;">
                    <tr style="color: white; height: 30px;">
                        <td>编号</td>
                        <td>用户名</td>
                        <td>密码</td>
                        <td>昵称</td>
                        <td>性别</td>
                        <td>生日</td>
                        <td>年龄</td>
                        <td>民族</td>
                    </tr>

            </HeaderTemplate>

            <ItemTemplate>        <%--数据项设置--%>

                <tr style="background-color: <%#Eval("WhiteOrRed") %>;">      <%--小于16变为红色--%>
                    <td><%#Eval("Ids") %></td>
                    <td><%#Eval("UserName") %></td>
                    <td><%#Eval("PassWord") %></td>
                    <td><%#Eval("NickName") %>同学</td>
                    <td>
                        <img src="<%#Eval("SexImg") %>" /></td>
                    <td><%#Eval("Birthday","{0:yyyy年MM月dd日}") %></td>
                    <td><%#Eval("Age") %></td>
                    <td><%#Eval("Nation") %></td>
                </tr>
            </ItemTemplate>



            <FooterTemplate>     <%--页脚设置-%>
                </table>
            </FooterTemplate>
        </asp:Repeater>

    </form>
</body>
</html>

Default.aspx1

Default.aspx1

<tr style = "background-color:<%#Eval(" WhiteOrRed") %>;">

-- 扩展属性作为调节改变展示内容

<%# Eval( " 属性名 " ) %>

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <form id="form1" runat="server">

        <asp:Repeater ID="Repeater1" runat="server">

            <HeaderTemplate>

                <table style=" 100%; background-color: navy; text-align: center;">
                    <tr style="color: white; height: 30px;">
                        <td>编号</td>
                        <td>用户名</td>
                        <td>密码</td>
                        <td>昵称</td>
                        <td>性别</td>
                        <td>生日</td>
                        <td>年龄</td>
                        <td>民族</td>
                    </tr>
            </HeaderTemplate>

            <ItemTemplate>

                <tr style="background-color: white;">
                    <td><%#Eval("Ids") %></td>
                    <td><%#Eval("UserName") %></td>
                    <td><%#Eval("PassWord") %></td>
                    <td><%#Eval("NickName") %>同学</td>
                    <td>
                        <img src="<%#Eval("SexImg") %>" /></td>
                    <td><%#Eval("Birthday","{0:yyyy年MM月dd日}") %></td>
                    <td><%#Eval("Age") %></td>
                    <td><%#Eval("Nation") %></td>
                </tr>

            </ItemTemplate>

            <AlternatingItemTemplate>  <%--读数据项交替格式设置--%>

                <tr style="background-color: aqua;">
                    <td><%#Eval("Ids") %></td>
                    <td><%#Eval("UserName") %></td>
                    <td><%#Eval("PassWord") %></td>
                    <td><%#Eval("NickName") %>同学</td>
                    <td>
                        <img src="<%#Eval("SexImg") %>" /></td>
                    <td><%#Eval("Birthday","{0:yyyy年MM月dd日}") %></td>
                    <td><%#Eval("Age") %></td>
                    <td><%#Eval("Nation") %></td>
                </tr>              

            </AlternatingItemTemplate>


            <FooterTemplate>
                </table>
            </FooterTemplate>

        </asp:Repeater>

    </form>
</body>
</html>

Default.aspx2

Default.aspx2

--使用 AlternatingItemTemplate 使展示结果交替变色展示

-- 在数据展示时可只用 ItemTemplate 数据项模板，防止因数据库没有数据而表头不显示。

-- 在数据库无内容时，Repeater 所夹内容都不会显示（包括页眉、页脚）

例2、用 Repeater 灵活展示购物站内容

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        * {
            padding: 0px;
            margin: 0px;
        }


        #header {
             100%;
            height: 80px;
            background-color: orange;
        }

        #footer {
             100%;
            height: 150px;
            background-color: black;
        }

        #main {
             94%;
            margin-left: 3%;
            background-color: lightblue;
        }

        .item {
             23%;
            margin: 10px 1%;
            float: left;
            height: 300px;
            background-color: red;
        }

        .item-img {
             98%;
            margin: 5px 1%;
            height: 60%;
            background-color: green;
        }

        .item-name {
             90%;
            margin: 5%;
            font-size: 20px;
            font-weight: bold;
        }

        .item-price {
             90%;
            margin-left: 5%;
        }

        .item-price-old {
            font-size: 16px;
            text-decoration: line-through;
        }

        .item-price-new {
            font-size: 25px;
            color: orange;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div id="header"></div>


        <%--中间部分--%>
        <div id="main">

            <%--开重复器--%>
            <asp:Repeater ID="Repeater1" runat="server">

                <ItemTemplate>

                    <%--每个div都是一个超链接，链接到单个商品信息--%>
                    <a href="Default2.aspx?i=<%#Eval("Ids") %>" target="_blank">

                        <div class="item">

                            <img src="<%#Eval("Pic") %>" class="item-img" />   <%--图片--%>

                            <div class="item-name"><%#Eval("Name") %></div>     <%--名称--%>  

                            <div class="item-price">                                 <%--价格--%>
                                <span class="item-price-new"><%#Eval("New_Price") %>元</span>
                                <span class="item-price-old"><%#Eval("Old_Price") %>元</span>
                            </div>

                        </div>

                    </a>

                </ItemTemplate>

            </asp:Repeater>

            <%--清流--%>
            <div style="clear: both;"></div>

            <%--中间部分结束--%>
        </div>

        <div id="footer"></div>
    </form>
</body>
</html>

综合展示

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        .img1 {
             50%;
            height: 400px;
            background-color: red;
            float: left;
        }

        .right {
             50%;
            height: 400px;
            background-color: green;
            float: left;
            font-size: 30px;
        }

        .content {
             100%;
            height: 500px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
                                                      <%--图片--%>
        <asp:Image ID="Image1" CssClass="img1" runat="server" />

           <%--右侧部分--%>
        <div class="right">

            <div class="name">                           <%--名称--%>
                <asp:Literal ID="lit_Name" runat="server"></asp:Literal>
            </div>


            <div class="has">
                库存：
                 <asp:Literal ID="lit_Has" runat="server"></asp:Literal>
                件
            </div>


            <div class="old_price">                          <%--老价格--%>
                <asp:Literal ID="lit_Old" runat="server"></asp:Literal>
            </div>


            <div class="new_price">                           <%-- 新价格--%>
                <asp:Literal ID="lit_New" runat="server"></asp:Literal>
            </div>


            <input type="button" value="加入购物车" />
        </div>

       
        <div style="clear: both;"></div>  <%--清流--%>


        <div class="content">              <%--产品介绍--%>
            <asp:Literal ID="lit_Content" runat="server"></asp:Literal>
        </div>

    </form>
</body>
</html>

单个商品展示

——先将 HTML 页面展示出来（搭起界面），碰到需要执行或接收服务器加载的表单元素再将其替换成控件

Repeater的Command用法

当Repeater里面循环控件时就会用到command，

是Repeater控件的原生事件用法

Repeater里面如果循环控件，控件的ID是会被改变的

ItemCommand -- 事件】任何控件执行提交都来触发这个事件

属性（循环的控件） CommandName="变量" -- 自己随便设的变量 ——定位用

CommandArgument="传递的参数" -- 传递要进行操作的参数

后台接收

e.CommandName =="变量" -- 找到要操作的对象

e.CommandArgument -- 要操作的数据

ItemCreated -- 绑定数据之前，创建行之后

ItemDataBound -- 绑定数据之后，执行一遍

例

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <form id="form1" runat="server">


        <table style=" 100%; text-align: center; background-color: navy;">
            <tr style="color: white;">
                <td>编号</td>
                <td>用户名</td>
                <td>密码</td>
                <td>昵称</td>
                <td>性别</td>
                <td>民族</td>
                <td>操作</td>
            </tr>

            <asp:Repeater ID="Repeater1" runat="server">
                <ItemTemplate>
                    <tr style="background-color: white;">
                        <td><%#Eval("Ids") %></td>
                        <td><%#Eval("UserName") %></td>
                        <td><%#Eval("PassWord") %></td>
                        <td><%#Eval("NickName") %></td>
                        <td><%#Eval("Sex") %></td>
                        <td><%#Eval("Nation") %></td>
                        <td>

                            <asp:Button ID="Button2" CommandName="u" CommandArgument='<%#Eval("Ids") %>' runat="server" Text="修改" />
                            <asp:Button ID="Button1" CommandName="d" CommandArgument='<%#Eval("Ids") %>' runat="server" Text="删除" />
                                                   <%--自定义属性，用以定位           传值--%>
                        </td>
                    </tr>
                </ItemTemplate>
            </asp:Repeater>

        </table>
                                        <%--测验展示用--%>
        <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
        <asp:Button ID="Button3" runat="server" Text="Button" />
    </form>
</body>
</html>

前台

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Default3 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Repeater1.ItemCommand += Repeater1_ItemCommand;
        Repeater1.ItemCreated += Repeater1_ItemCreated;
        Repeater1.ItemDataBound += Repeater1_ItemDataBound;

        if (!IsPostBack)
        {
            Repeater1.DataSource = new UsersData().SelectAll();
            Repeater1.DataBind();
        }
    }

     //绑定数据之后执行
    void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e)
    {

        RepeaterItem ri = e.Item;       //e.Item  e中的数据    
                                        // 每行是一个RepeaterItem 类型的数据

        Users u = ri.DataItem as Users;   // 将每行数据转换成users类型

        if (u.Sex)
        {
            ri.Visible = false;     //所有 男 的不显示 
        }
    }

     //绑定数据之前，创建行之后执行
    void Repeater1_ItemCreated(object sender, RepeaterItemEventArgs e)
    {
        Label1.Text += "1";
    }

    void Repeater1_ItemCommand(object source, RepeaterCommandEventArgs e)
    {
        if (e.CommandName == "u")   //当选择 u 时
        {
            Label1.Text += "修改" + e.CommandArgument;
        }
        else if (e.CommandName == "d")   //当选择 d 时
        {
            Label1.Text += "删除" + e.CommandArgument;
        }
    }
}

后台代码

查看全文

相关阅读:
web前端知识体系大全【欢迎补充】
ESA2GJK1DH1K基础篇: 阿里云物联网平台: 云平台显示单片机采集的温湿度数据,控制设备继电器(基于ESP8266,AT指令TCP_MQTT通信)(V0.1)
ESA2GJK1DH1K基础篇: 阿里云物联网平台: 使用阿里云物联网平台提供的物理模型Topic通信控制(ESP8266,TCP透传指令)
ESA2GJK1DH1K基础篇: 阿里云物联网平台: 使用阿里云物联网平台提供的自定义Topic通信控制(ESP8266,TCP透传指令)
ESA2GJK1DH1K基础篇: 关于各大物联网平台的MQTT通信
 ESA2GJK1DH1K微信小程序篇: 小程序连接MQTT简单的Demo
Android 开发基础入门: Android Studio 导入工程
 Android 开发基础入门: android studio安装教程
 ESA2GJK1DH1K升级篇: 移植远程更新程序到STM32F103RET6型号的单片机,基于(GPRS模块AT指令TCP透传方式)
【传输协议】http协议GET与POST传递数据的最大长度能够达到多少

原文地址：https://www.cnblogs.com/Tanghongchang/p/6897563.html