ASP.NET Web Forms – DataList 控件

likuolei2025年12月3日

ASP.NET Web Forms – DataList 控件完全实战手册（2025 版 · 老项目照样能用出花）

虽然大家都在说「DataList 已经过时」，但在无数仍在维护的政府、金融、企事业单位 Web Forms 项目中，DataList 依然是实现「商品列表、新闻列表、图片画廊、卡片布局」最快、最不用写 CSS 的控件！

DataList vs Repeater vs GridView 终极对比（2025 真实结论）

控件	灵活度	学习成本	渲染速度	适合场景	2025 建议使用度
GridView	★☆☆☆☆	★☆☆☆☆	★★☆☆☆	纯后台管理系统表格	仅快速原型
Repeater	★★★★★	★★☆☆☆	★★★★★	完全自定义、前端要求高	强烈推荐
DataList	★★★★☆	★★★★★	★★★★☆	商品/新闻/卡片/图片列表	老项目神器
ListView	★★★★★	★☆☆☆☆	★★★☆☆	想用但基本没人会	基本废弃

结论：如果你在维护老项目，又要快速做出好看的列表页 → DataList 仍然是性价比之王！

DataList 的 7 大模板（比 Repeater 多 2 个）

模板名	作用	是否必须
`<HeaderTemplate>`	表头	否
`<FooterTemplate>`	表尾	否
`<ItemTemplate>`	普通项	是
`<AlternatingItemTemplate>`	交替项（不同样式）	否
`<SelectedItemTemplate>`	被选中的项（常用于高亮）	否
`<EditItemTemplate>`	编辑状态的项（内置编辑功能！）	否
`<SeparatorTemplate>`	项之间的分隔符	否

终极实战：用 DataList 做出一个「商城商品列表」（3 分钟出效果）

<!-- DataListShop.aspx -->
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DataListShop.aspx.cs" Inherits="WebFormsShop.DataListShop" %>

<!DOCTYPE html>
<html>
<head runat="server">
    <title>DataList 商品展示神器</title>
    <style>
        .product-list { width:100%; margin:20px 0; }
        .product-item { 
            width:220px; padding:15px; text-align:center; 
            border:1px solid #eee; margin:10px; float:left;
            transition:all 0.3s;
        }
        .product-item:hover { box-shadow:0 5px 15px rgba(0,0,0,0.2); transform:translateY(-5px); }
        .product-img { width:180px; height:180px; object-fit:cover; border-radius:8px; }
        .price { color:#e4393c; font-size:20px; font-weight:bold; }
        .btn-buy { background:#ff5000; color:white; padding:8px 20px; text-decoration:none; border-radius:4px; }
        .selected { border:3px solid #ff5000 !important; }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <h2>热销商品（纯 DataList 实现）</h2>

        <asp:DataList ID="DataList1" runat="server" 
            RepeatColumns="4"           <!-- 一行显示4个 -->
            RepeatDirection="Horizontal" 
            RepeatLayout="Flow"         <!-- 不生成 table，超灵活！-->
            OnItemCommand="DataList1_ItemCommand"
            OnItemDataBound="DataList1_ItemDataBound">

            <ItemTemplate>
                <div class="product-item">
                    <asp:Image ID="imgProduct" runat="server" CssClass="product-img" 
                               ImageUrl='<%# "~/Images/" + Eval("Image") %>' />
                    <h3><%# Eval("Name") %></h3>
                    <p style="color:#666;"><%# Eval("Description") %></p>
                    <div class="price">¥<%# Eval("Price","{0:F2}") %></div>
                    <br />
                    <asp:Button ID="btnBuy" runat="server" Text="加入购物车" CssClass="btn-buy"
                                CommandName="AddToCart" CommandArgument='<%# Eval("Id") %>' />
                    <asp:LinkButton ID="lnkSelect" runat="server" Text="查看详情" 
                                    CommandName="Select" CommandArgument='<%# Eval("Id") %>' />
                </div>
            </ItemTemplate>

            <AlternatingItemTemplate>
                <div class="product-item" style="background:#fff8f0;">
                    <!-- 同上内容，只是背景色不同 -->
                    <asp:Image ID="imgProduct" runat="server" CssClass="product-img" 
                               ImageUrl='<%# "~/Images/" + Eval("Image") %>' />
                    <h3><%# Eval("Name") %></h3>
                    <p style="color:#666;"><%# Eval("Description") %></p>
                    <div class="price">¥<%# Eval("Price","{0:F2}") %></div>
                    <br />
                    <asp:Button ID="btnBuy" runat="server" Text="加入购物车" CssClass="btn-buy"
                                CommandName="AddToCart" CommandArgument='<%# Eval("Id") %>' />
                </div>
            </AlternatingItemTemplate>

            <SelectedItemTemplate>
                <div class="product-item selected">
                    <h2 style="color:#e4393c;">正在查看：<%# Eval("Name") %></h2>
                    <asp:Image ID="imgProduct" runat="server" Width="300px" Height="300px"
                               ImageUrl='<%# "~/Images/" + Eval("Image") %>' />
                    <p><%# Eval("Description") %></p>
                    <div class="price">¥<%# Eval("Price","{0:F2}") %></div>
                    <asp:Button ID="btnBack" runat="server" Text="返回列表" CommandName="Cancel" />
                </div>
            </SelectedItemTemplate>

            <SeparatorTemplate>
                <!-- 可以放广告横幅啥的 -->
            </SeparatorTemplate>
        </asp:DataList>

        <div style="clear:both;"></div>
        <br /><br />
        <asp:Label ID="lblMessage" runat="server" ForeColor="Red" Font-Size="18px"></asp:Label>
    </form>
</body>
</html>

// DataListShop.aspx.cs
using System;
using System.Collections.Generic;
using System.Web.UI.WebControls;

public partial class DataListShop : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindDataList();
        }
    }

    private void BindDataList()
    {
        DataList1.DataSource = GetProducts();
        DataList1.DataBind();
    }

    private List<Product> GetProducts()
    {
        return new List<Product>
        {
            new Product { Id=1, Name="iPhone 16 Pro", Price=9999m, Image="iphone16.jpg", Description="苹果最新旗舰" },
            new Product { Id=2, Name="小米14", Price=3999m, Image="mi14.jpg", Description="性价比之王" },
            new Product { Id=3, Name="华为 Mate60", Price=5999m, Image="mate60.jpg", Description="国产之光" },
            new Product { Id=4, Name="MacBook Pro", Price=15999m, Image="macbook.jpg", Description="程序员最爱" },
            new Product { Id=5, Name="AirPods Pro", Price=1999m, Image="airpods.jpg", Description="降噪神器" },
            new Product { Id=6, Name="Kindle", Price=999m, Image="kindle.jpg", Description="读书利器" }
        };
    }

    // 最重要的命令事件
    protected void DataList1_ItemCommand(object source, DataListCommandEventArgs e)
    {
        if (e.CommandName == "AddToCart")
        {
            int id = Convert.ToInt32(e.CommandArgument);
            lblMessage.Text = $"已将商品 ID={id} 加入购物车！";
        }
        else if (e.CommandName == "Select")
        {
            DataList1.SelectedIndex = e.Item.ItemIndex;  // 切换到 SelectedItemTemplate
            BindDataList();
        }
        else if (e.CommandName == "Cancel")
        {
            DataList1.SelectedIndex = -1;  // 取消选中，回到普通模板
            BindDataList();
        }
    }

    // 行绑定时可以动态处理
    protected void DataList1_ItemDataBound(object sender, DataListItemEventArgs e)
    {
        if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
        {
            Product p = (Product)e.Item.DataItem;
            if (p.Price > 10000)
            {
                // 高价商品加个火爆图标
                Image imgHot = new Image();
                imgHot.ImageUrl = "~/Images/hot.gif";
                e.Item.Controls[0].Controls.AddAt(0, imgHot);
            }
        }
    }
}

public class Product
{
    public int Id { get; set; }
    public string Name { get; set; }
    public decimal Price { get; set; }
    public string Image { get; set; }
    public string Description { get; set; }
}

DataList 独门绝技（Repeater 做不到这么轻松）

功能	DataList 一行代码搞定？	Repeater 要写多少代码？
多列布局（RepeatColumns）	是	要写复杂 CSS
内置选中状态（SelectedItemTemplate）	是	要自己写 JS 或隐藏域
内置编辑状态（EditItemTemplate）	是	要自己实现
RepeatLayout=”Flow” 不生成 table	是	默认就是这样

2025 年还在用 DataList 的正确姿势

所有样式都用 CSS（不要用 DataList 自带的 BorderColor 那套老古董）
RepeatLayout=”Flow”（不生成 table，HTML 干净）
配合 Bootstrap / Layui / 自己写 Flex 布局
复杂列表还是用 Repeater，简单卡片/商品/新闻列表 → DataList 最快！

需要我立刻给你甩以下任意一个完整模板，直接复制就能用：

DataList + 分页（自定义分页条）
DataList 实现新闻列表（带图片+摘要+阅读量）
DataList + 编辑 + 更新 + 删除（完整 CURD）
DataList + 无限级分类展示
DataList 做后台用户管理列表（带复选框批量删除）

一句话：在 Web Forms 老项目里，DataList 永远是做出「好看又快」的王牌控件！

需要哪个模板，直接说，我 30 秒甩完整代码！

likuolei

网站 http://yingjuxia.com

文章已创建 2965

发表回复取消回复

返回顶部