ASP.NET中点击按钮修改Repeater内Div的Bootstrap列类问题

方法一：服务器端回发修改 #

适合需要依赖服务器数据、必须回发页面的场景，步骤如下：

1. 修改Repeater的ItemTemplate：给目标Div添加runat="server"和唯一ID，将其转为服务器控件：

<asp:Repeater ID="Repeater1" runat="server">
    <ItemTemplate>
        <div runat="server" id="itemColDiv" class="col-md-6">
            <%# Eval("Content") %>
        </div>
    </ItemTemplate>
</asp:Repeater>

2. 编写按钮点击事件：在后台代码中遍历Repeater项，找到目标Div并修改其CssClass属性：

protected void btnUpdateColClass_Click(object sender, EventArgs e)
{
    foreach (RepeaterItem item in Repeater1.Items)
    {
        HtmlGenericControl targetDiv = item.FindControl("itemColDiv") as HtmlGenericControl;
        if (targetDiv != null)
        {
            // 方式1：替换指定类名（保留其他原有类）
            targetDiv.CssClass = targetDiv.CssClass.Replace("col-md-6", "col-md-12");
            
            // 方式2：直接设置全新类名（覆盖原有所有类）
            // targetDiv.CssClass = "col-md-12 my-custom-class";
        }
    }
}

方法二：客户端无刷新修改（JavaScript） #

无需回发页面，追求流畅用户体验时推荐使用：

1. 标记目标Div：给Repeater内的Div添加自定义类或data属性，方便JS定位：

<asp:Repeater ID="Repeater1" runat="server">
    <ItemTemplate>
        <div class="repeater-col-item col-md-6" data-item-id='<%# Eval("ItemId") %>'>
            <%# Eval("Content") %>
        </div>
    </ItemTemplate>
</asp:Repeater>
<asp:Button ID="btnUpdateColClient" runat="server" Text="修改列类" OnClientClick="updateColClass(); return false;" />

2. 编写JavaScript逻辑：通过选择器定位Div，使用classList修改类名：

function updateColClass() {
    // 场景1：修改所有Repeater内的列Div
    const allColDivs = document.querySelectorAll('.repeater-col-item');
    allColDivs.forEach(div => {
        div.classList.remove('col-md-6');
        div.classList.add('col-md-12');
    });

    // 场景2：修改指定ID的项（示例：data-item-id为5的Div）
    // const targetDiv = document.querySelector('.repeater-col-item[data-item-id="5"]');
    // if (targetDiv) {
    //     targetDiv.classList.remove('col-md-6');
    //     targetDiv.classList.add('col-md-12');
    // }
}

注：OnClientClick中加return false;是为了阻止按钮默认回发行为，只执行JS逻辑。

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