ASP.NET WebForms动态生成Bootstrap时间线，如何添加删改按钮？

问题原因 #

你之前的代码失效是因为动态生成的服务器控件ID重复，ASP.NET无法区分每个按钮的事件绑定，导致点击无响应。下面提供两种可行的实现方案：

方案一：客户端按钮+HiddenField传递数据 #

这种方式不需要服务器端动态控件，直接生成HTML按钮，通过自定义属性传递条目ID，结合jQuery和HiddenField把ID传给服务器端事件。

1. 后台动态生成时间线HTML #

// 假设sqlQueryResults是你的SQL查询结果集合，每条数据包含Id和Content字段
StringBuilder timelineHtml = new StringBuilder();
foreach (var item in sqlQueryResults)
{
    timelineHtml.Append($@"
    <div class='timeline-item'>
        <div class='timeline-content'>
            <p>{item.Content}</p>
            <!-- 修改按钮：触发修改模态框，绑定条目ID -->
            <button type='button' class='btn btn-primary btn-edit' data-id='{item.Id}' 
                    data-toggle='modal' data-target='#editModal'>修改</button>
            <!-- 删除按钮：触发删除确认模态框，绑定条目ID -->
            <button type='button' class='btn btn-danger btn-delete' data-id='{item.Id}' 
                    data-toggle='modal' data-target='#deleteConfirmModal'>删除</button>
        </div>
    </div>");
}
// 将生成的HTML输出到页面的Literal控件
timelineLiteral.Text = timelineHtml.ToString();

2. 页面添加模态框和HiddenField #

<!-- 用于传递当前操作的条目ID -->
<asp:HiddenField ID="hfTargetItemId" runat="server" />

<!-- 修改模态框 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">修改时间线条目</h5>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <asp:TextBox ID="txtEditContent" runat="server" class="form-control" rows="3"></asp:TextBox>
            </div>
            <div class="modal-footer">
                <asp:Button ID="btnSaveEdit" runat="server" Text="保存修改" 
                            OnClick="btnSaveEdit_Click" CssClass="btn btn-primary" />
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<!-- 删除确认模态框 -->
<div class="modal fade" id="deleteConfirmModal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">确认删除</h5>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                确定要删除这条时间线记录吗？
            </div>
            <div class="modal-footer">
                <asp:Button ID="btnConfirmDelete" runat="server" Text="确认删除" 
                            OnClick="btnConfirmDelete_Click" CssClass="btn btn-danger" />
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

3. jQuery脚本传递ID #

$(function(){
    // 点击修改按钮，将条目ID存入HiddenField
    $('.btn-edit').click(function(){
        var itemId = $(this).data('id');
        $('#<%= hfTargetItemId.ClientID %>').val(itemId);
        // 可选：根据ID异步加载当前条目内容到修改框
        // $.get('/GetItemContent.aspx?id=' + itemId, function(data){
        //     $('#<%= txtEditContent.ClientID %>').val(data);
        // });
    });

    // 点击删除按钮，将条目ID存入HiddenField
    $('.btn-delete').click(function(){
        var itemId = $(this).data('id');
        $('#<%= hfTargetItemId.ClientID %>').val(itemId);
    });
});

4. 后台处理操作事件 #

protected void btnSaveEdit_Click(object sender, EventArgs e)
{
    int targetId = int.Parse(hfTargetItemId.Value);
    string newContent = txtEditContent.Text;
    // 调用你的修改逻辑，更新SQL数据库中对应ID的记录
}

protected void btnConfirmDelete_Click(object sender, EventArgs e)
{
    int targetId = int.Parse(hfTargetItemId.Value);
    // 调用你的删除逻辑，删除SQL数据库中对应ID的记录
}

方案二：动态创建服务器端LinkButton #

这种方式直接在后台生成服务器端控件，保证每个按钮ID唯一，通过CommandArgument传递条目ID。

1. 后台动态生成控件 #

foreach (var item in sqlQueryResults)
{
    // 创建时间线条目容器
    HtmlGenericControl timelineItem = new HtmlGenericControl("div");
    timelineItem.Attributes["class"] = "timeline-item";

    // 创建内容容器
    HtmlGenericControl contentDiv = new HtmlGenericControl("div");
    contentDiv.Attributes["class"] = "timeline-content";
    contentDiv.InnerHtml = $"<p>{item.Content}</p>";

    // 创建修改按钮
    LinkButton editBtn = new LinkButton();
    editBtn.ID = $"EditBtn_{item.Id}"; // 唯一ID，避免冲突
    editBtn.Text = "修改";
    editBtn.CssClass = "btn btn-primary";
    editBtn.CommandArgument = item.Id.ToString();
    editBtn.Command += EditBtn_Command;
    // 添加模态框触发属性
    editBtn.Attributes["data-toggle"] = "modal";
    editBtn.Attributes["data-target"] = "#editModal";

    // 创建删除按钮
    LinkButton deleteBtn = new LinkButton();
    deleteBtn.ID = $"DeleteBtn_{item.Id}"; // 唯一ID
    deleteBtn.Text = "删除";
    deleteBtn.CssClass = "btn btn-danger";
    deleteBtn.CommandArgument = item.Id.ToString();
    deleteBtn.Command += DeleteBtn_Command;
    deleteBtn.Attributes["data-toggle"] = "modal";
    deleteBtn.Attributes["data-target"] = "#deleteConfirmModal";

    // 将按钮添加到内容容器
    contentDiv.Controls.Add(editBtn);
    contentDiv.Controls.Add(new LiteralControl("&nbsp;")); // 按钮间空格
    contentDiv.Controls.Add(deleteBtn);

    // 将内容容器添加到时间线条目
    timelineItem.Controls.Add(contentDiv);

    // 将时间线条目添加到页面的PlaceHolder
    timelinePlaceHolder.Controls.Add(timelineItem);
}

2. 后台处理Command事件 #

protected void EditBtn_Command(object sender, CommandEventArgs e)
{
    int targetId = int.Parse(e.CommandArgument.ToString());
    hfTargetItemId.Value = targetId.ToString();
    // 加载当前条目内容到修改框（比如从SQL查询数据）
}

protected void DeleteBtn_Command(object sender, CommandEventArgs e)
{
    int targetId = int.Parse(e.CommandArgument.ToString());
    hfTargetItemId.Value = targetId.ToString();
}

3. 模态框和保存/删除事件 #

和方案一的模态框、后台保存/删除事件完全一致，直接复用即可。

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