C# ASP.NET实现DataList按ProductName搜索并展示匹配结果

嘿，刚好做过类似的需求，给你一步步拆解实现方法，亲测好用！

第一步：前端添加搜索控件 #

先在DataList上方加个搜索输入框和按钮，方便用户输入关键词。用ASP.NET的服务器控件就行，代码示例：

<div style="margin: 10px 0;">
    <asp:TextBox ID="txtSearch" runat="server" PlaceHolder="输入商品名称搜索..."></asp:TextBox>
    <asp:Button ID="btnSearch" runat="server" Text="搜索" OnClick="btnSearch_Click" />
    <asp:Button ID="btnShowAll" runat="server" Text="显示全部" OnClick="btnShowAll_Click" />
</div>

<!-- 这是你原来的DataList，保留你的ItemTemplate即可 -->
<asp:DataList ID="dlProducts" runat="server" RepeatColumns="3" CellPadding="5">
    <ItemTemplate>
        <div style="border:1px solid #eee; padding:10px; margin:5px; border-radius:4px;">
            <h4><%# Eval("ProductName") %></h4>
            <p>价格：<%# Eval("ProductPrice") %></p>
            <p><%# Eval("ProductDescription") %></p>
            <asp:Image ID="imgProduct" runat="server" ImageUrl='<%# Eval("ProductImage") %>' Width="120" />
        </div>
    </ItemTemplate>
</asp:DataList>

第二步：后端写通用数据绑定方法 #

写一个可复用的绑定方法，不管是显示全部还是搜索结果都能用，重点是要做参数化查询防SQL注入，绝对不能直接拼用户输入！

private void BindProducts(string searchKeyword = "")
{
    // 替换成你自己的数据库连接字符串
    string connStr = ConfigurationManager.ConnectionStrings["YourProductDB"].ConnectionString;
    string sqlQuery;

    if (!string.IsNullOrWhiteSpace(searchKeyword))
    {
        // 模糊搜索，用LIKE和参数化
        sqlQuery = "SELECT ID, ProductName, ProductPrice, ProductDescription, ProductImage FROM Products WHERE ProductName LIKE @SearchKey";
    }
    else
    {
        // 显示全部商品
        sqlQuery = "SELECT ID, ProductName, ProductPrice, ProductDescription, ProductImage FROM Products";
    }

    using (SqlConnection conn = new SqlConnection(connStr))
    {
        using (SqlCommand cmd = new SqlCommand(sqlQuery, conn))
        {
            // 如果有搜索关键词，添加参数
            if (!string.IsNullOrWhiteSpace(searchKeyword))
            {
                // 前后加%实现包含匹配，搜"B"就能找到所有名称带B的商品
                cmd.Parameters.AddWithValue("@SearchKey", $"%{searchKeyword}%");
            }

            SqlDataAdapter da = new SqlDataAdapter(cmd);
            DataTable productTable = new DataTable();
            da.Fill(productTable);

            // 绑定到DataList
            dlProducts.DataSource = productTable;
            dlProducts.DataBind();
        }
    }
}

第三步：绑定页面加载和按钮事件 #

在页面加载时默认显示全部商品，然后处理搜索和显示全部的按钮点击：

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        // 首次加载显示所有商品
        BindProducts();
    }
}

protected void btnSearch_Click(object sender, EventArgs e)
{
    // 取搜索框的内容，去掉前后空格
    string keyword = txtSearch.Text.Trim();
    BindProducts(keyword);
}

protected void btnShowAll_Click(object sender, EventArgs e)
{
    // 清空搜索框，显示全部
    txtSearch.Text = "";
    BindProducts();
}

几个关键提醒 #

• SQL注入防护：一定要用参数化查询，别图省事把用户输入直接拼进SQL里，不然很容易被攻击！
• 搜索规则调整：如果要精确匹配，就去掉%，改成@SearchKey；如果只想前缀匹配（比如搜"T"只找开头是T的），就用@SearchKey + "%"，按需调整。
• 空输入处理：用string.IsNullOrWhiteSpace判断，避免用户输入空字符串或全空格时出现奇怪的结果。

这样就能实现你要的效果了：页面打开显示"Toliet Paper A、Toliet Paper B"，输入"B"点搜索，就只显示"Toliet Paper B"啦！

内容的提问来源于stack exchange，提问作者SunAwtCanvas