如何使用ASP.NET选择并修改嵌套HTML元素的文本及相关属性

核心问题说明 #

你原有逻辑的两个核心错误：

1. ASP.NET的FindControl方法不支持CSS选择器，仅能通过控件ID查找，且只能查找当前命名容器下的子控件
2. 同一页面下不能存在多个runat="server"且ID相同的控件，会直接导致编译错误或控件查找失败

推荐方案：使用Repeater控件实现动态列表 #

这是ASP.NET Web Forms处理重复结构的标准实现，无需手动查找控件，通过数据绑定自动渲染所有卡片，完全满足你不用前端脚本的要求。

第一步：前端页面改造 #

把你的卡片结构放到Repeater的项模板中，使用绑定表达式填充内容：

<div class="container">
    <asp:Repeater ID="rptFoodCards" runat="server">
        <ItemTemplate>
            <article class="card">
                <img runat="server" src='<%# Eval("ImageUrl") %>' alt="Sample Photo" />
                <div class="mealInfo">
                    <span class="left">
                        <a runat="server" href='<%# Eval("FoodDetailUrl") %>'><%# Eval("FoodName") %></a><br />
                        <span class="prepInfo"><%# Eval("PrepInfo") %></span>
                    </span>
                    <span class="right">
                        <i class="fas fa-clipboard"></i><br />
                        <%# Eval("Calorie") %>
                    </span>
                </div>
                <div class="cookInfo">
                    <a class="cookName" href='<%# Eval("CookHomeUrl") %>'>
                        <img src='<%# Eval("CookAvatarUrl") %>'/>
                        <%# Eval("CookName") %>
                    </a>
                    <a class="comment" href='<%# Eval("CommentUrl") %>'>
                        <i class="far fa-comment"></i>
                        <%# Eval("CommentCount") %>
                    </a>
                </div>
            </article>
        </ItemTemplate>
    </asp:Repeater>
</div>

第二步：后端绑定数据 #

先定义对应的数据实体类：

public class FoodCardItem
{
    public string ImageUrl { get; set; }
    public string FoodDetailUrl { get; set; }
    public string FoodName { get; set; }
    public string PrepInfo { get; set; }
    public int Calorie { get; set; }
    public string CookHomeUrl { get; set; }
    public string CookAvatarUrl { get; set; }
    public string CookName { get; set; }
    public string CommentUrl { get; set; }
    public int CommentCount { get; set; }
}

在页面加载逻辑中绑定数据：

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        // 此处替换为你的数据库查询逻辑
        List<FoodCardItem> foodList = new List<FoodCardItem>();
        // 模拟8条卡片数据
        for (int i = 0; i < 8; i++)
        {
            foodList.Add(new FoodCardItem
            {
                ImageUrl = $"/pics/food/food{i}.jpg",
                FoodName = $"菜品{i+1}",
                PrepInfo = $"适合2-4人 准备时间{i+1}小时",
                // 其他字段按需赋值
            });
        }
        // 绑定到Repeater自动生成所有卡片
        rptFoodCards.DataSource = foodList;
        rptFoodCards.DataBind();
    }
}

临时方案：硬编码卡片场景的控件查找 #

如果你已经在页面上硬写了8个固定卡片，没有使用数据控件，可以按以下方式处理：

1. 给每个卡片的父容器加runat="server"和唯一ID，比如card1、card2...card8，每个卡片内的控件ID保持不变（不同父容器下不会ID冲突）
2. 后端循环查找每个容器下的对应控件并赋值：

// 模拟数据库返回的菜品数据
List<string> foodNames = new List<string> { "菜1", "菜2", "菜3", "菜4", "菜5", "菜6", "菜7", "菜8" };
List<string> foodImgPaths = new List<string> { "/pic1.jpg", "/pic2.jpg", "/pic3.jpg", "/pic4.jpg", "/pic5.jpg", "/pic6.jpg", "/pic7.jpg", "/pic8.jpg" };

for (int i = 1; i <= 8; i++)
{
    // 先找到当前卡片容器
    Control cardContainer = FindControl($"card{i}");
    if (cardContainer == null) continue;
    // 查找容器内的目标控件
    HtmlImage foodImg = cardContainer.FindControl("foodImage") as HtmlImage;
    HtmlAnchor foodAnchor = cardContainer.FindControl("foodAnchor") as HtmlAnchor;
    // 赋值
    if (foodImg != null) foodImg.Src = foodImgPaths[i-1];
    if (foodAnchor != null) foodAnchor.InnerText = foodNames[i-1];
}

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