C#-WebForm-Repeater的灵活运用、ItemCommand的用法-增删改查、如何不适用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>
        * {
            margin: 0px;
            padding: 0px;
        }

        #header {
            position: relative;
            width: %;
            height: 80px;
            background-color: aqua;
        }

        #footer {
            position: relative;
            width: %;
            height: 150px;
            background-color: #e0e0e0;
        }

        #items {
            position: relative;
            width: %;
            margin-left: %;
            border: 1px solid yellow;
        }

        .item {
            position: relative;
            float: left;
            width: %;
            height: 300px;
            margin: 10px 0.5%;
            background-color: green;
        }

            .item img {
                position: relative;
                width: %;
                /*width: 200px;*/
                /*margin:5px 1%;*/
            }
            .item div {
            position:relative;
            width:%;
            margin:4px %;
            }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div id="header"></div>
        <div id="items">
            <asp:Repeater ID="Repeater1" runat="server">
                <ItemTemplate>
                    <div class="item">
                        <img src="<%#Eval("pic") %>" />
                        <div>品种：<%#Eval("name") %></div>
                        <div>现价：<%#Eval("nowprice") %></div>
                        <div>原价：<%#Eval("oldprice") %></div>
                        <div>简述：<%#Eval("context") %></div>
                    </div>
                </ItemTemplate>
            </asp:Repeater>
            <div style="clear: both;"></div>
        </div>
        <div id="footer"></div>
    </form>
</body>
</html>

后台代码

重点：（李献策lxc）

在流式布局中，流式div是不占有位置的，所以要用 “<div style="clear:both;"></div>” 撑起位置（李献策lxc）

=======================================================

ItemCommand的用法：

在DataList中生成事件时的激发。

前台代码：

<%@ 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>
        * {
            margin: 0px;
            padding: 0px;
        }

        #header {
            position: relative;
            width: %;
            height: 80px;
            background-color: aqua;
        }

        #footer {
            position: relative;
            width: %;
            height: 150px;
            background-color: #e0e0e0;
        }

        #items {
            position: relative;
            width: %;
            margin-left: %;
            border: 1px solid yellow;
        }

        .item {
            position: relative;
            float: left;
            width: %;
            height: 300px;
            margin: 10px 0.5%;
            background-color: green;
        }

            .item img {
                position: relative;
                width: %;
                /*width: 200px;*/
                /*margin:5px 1%;*/
            }
            .item div {
            position:relative;
            width:%;
            margin:4px %;
            }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div id="header"></div>
        <div id="items">
            <asp:Repeater ID="Repeater1" runat="server">
                <ItemTemplate>
                    <div class="item">
                        <img src="<%#Eval("pic") %>" />
                        <div>品种：<%#Eval("name") %></div>
                        <div>现价：<%#Eval("nowprice") %></div>
                        <div>原价：<%#Eval("oldprice") %></div>
                        <div>简述：<%#Eval("context") %></div>
                        <asp:Button ID="Button1" runat="server" CommandName="Update" CommandArgument='<%#Eval("ids") %>' Text="修改" />
                        <asp:Button ID="Button2" runat="server" CommandName="Delete" CommandArgument='<%#Eval("ids") %>' Text="删除" />
                    </div>
                </ItemTemplate>
            </asp:Repeater>
            <div style="clear: both;"></div>
        </div>
        <div id="footer"></div>
    </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 _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            Repeater1.DataSource = new petData().Select();
            Repeater1.DataBind();
        }
        //Repeater 中按钮触发事件
        Repeater1.ItemCommand += Repeater1_ItemCommand;
    }
    //Repeater 中按钮触发事件
    void Repeater1_ItemCommand(object source, RepeaterCommandEventArgs e)
    {
        if (e.CommandName == "Update")
        {

        }
        if (e.CommandName == "Delete")
        {

            bool ok = new petData().Delete(Convert.ToInt32(e.CommandArgument));

            Repeater1.DataSource = new petData().Select();
            Repeater1.DataBind();
        }
    }

}

后台代码

知识点：

1、后台注册ItemCommand事件（李献策lxc）

2、前台按钮添加属性：CommandName 和 CommandArgument

3、判断按钮返回的值CommandName是什么，进行相应的操作

4、object source - 触发事件的对象　　RepeaterCommandEventArgs e - 触发事件的数据

=======================================================

如何不适用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>
        * {
            margin: 0px;
            padding: 0px;
        }

        #header {
            position: relative;
            width: %;
            height: 80px;
            background-color: aqua;
        }

        #footer {
            position: relative;
            width: %;
            height: 150px;
            background-color: #e0e0e0;
        }

        #items {
            position: relative;
            width: %;
            margin-left: %;
            border: 1px solid yellow;
        }

        .item {
            position: relative;
            float: left;
            width: %;
            height: 300px;
            margin: 10px 0.5%;
            background-color: green;
        }

            .item img {
                position: relative;
                width: %;
                /*width: 200px;*/
                /*margin:5px 1%;*/
            }
            .item div {
            position:relative;
            width:%;
            margin:4px %;
            }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div id="header"></div>
        <div id="items">
            <asp:Literal ID="Literal1" runat="server"></asp:Literal>
            </div>
        <div id="footer"></div>
    </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 _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            Literal1.Text = DataBind();
        }
    }
    public string DataBind()
    {
        List<pet> plist = new petData().Select();

        string end = "";

        foreach (pet p in plist)
        {
            if(p.name=="哈士奇")
            {
                continue;
            }
            end += "<div class=\"item\">";
            end += "<img src=\"" + p.pic + "\" />";
            end += "<div>品种：" + p.name + "</div>";
            end += "<div>现价：" + p.nowprice + "</div>";
            end += "<div>原价：" + p.oldprice + "</div>";
            end += "<div>简述：" + p.context + "</div>";
            end += "<a href=\"Delete.aspx?ids=" + p.ids + "\">修改</a>";
            end += "&nbsp;";
            end += "<a href=\"Update.aspx?ids=" + p.ids + "\">删除</a>";
            end += "</div>";
        }
        end += "<div style=\"clear:both;\"></div>";
        return end;
    }

    //<div class="item">
    //<img src="<%#Eval("pic") %>" />
    //<div>品种：<%#Eval("name") %></div>
    //<div>现价：<%#Eval("nowprice") %></div>
    //<div>原价：<%#Eval("oldprice") %></div>
    //<div>简述：<%#Eval("context") %></div>
    //<asp:Button ID="Button1" runat="server" CommandName="Update" CommandArgument='<%#Eval("ids") %>' Text="修改" />
    //<asp:Button ID="Button2" runat="server" CommandName="Delete" CommandArgument='<%#Eval("ids") %>' Text="删除" />
    //</div>
}

后台代码

优势：进行权限验证，如果不满足权限则不会拼接需要展示的代码，即使“审查代码”也不会显示（李献策lxc）