如何触发asp:Literal内嵌HTML元素点击并实现服务器端更新？

问题根源 #

直接在翻页按钮的onclick中调用__doPostBack会导致两种问题：要么回发立即触发，客户端翻页逻辑还没执行就刷新页面；要么原有jQuery事件绑定被覆盖，翻页功能失效。

解决方案1：先执行客户端翻页，再触发局部回发（推荐） #

这种方式用局部回发（UpdatePanel）避免整页刷新，保留客户端翻页状态，同时完成服务器端Label更新。

1. 添加局部回发所需控件
   在ASPX页面中加入ScriptManager、UpdatePanel和隐藏的回发触发器按钮：

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:Label ID="lblPageInfo" runat="server" Text="当前页：1"></asp:Label>
        <asp:Button ID="btnPostBackTrigger" runat="server" Style="display:none;" OnClick="btnPostBackTrigger_Click" />
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="btnPostBackTrigger" EventName="Click" />
    </Triggers>
</asp:UpdatePanel>

2. 绑定翻页按钮的混合事件
   给Literal中的翻页按钮加统一class（比如prev-btn、next-btn），然后用jQuery绑定点击事件，先执行翻页逻辑，再触发回发：

$(function() {
    // 上一页按钮事件
    $('.prev-btn').click(function() {
        // 执行原有jQuery翻页逻辑（替换成你实际的翻页函数，比如goPrev()）
        goPrev();
        // 触发服务器回发，传递操作标识
        __doPostBack('<%= btnPostBackTrigger.ClientID %>', 'Prev');
    });

    // 下一页按钮事件
    $('.next-btn').click(function() {
        goNext();
        __doPostBack('<%= btnPostBackTrigger.ClientID %>', 'Next');
    });
});

如果翻页有动画，可延迟回发确保动画完成：

setTimeout(function(){ __doPostBack('<%= btnPostBackTrigger.ClientID %>', 'Prev'); }, 300);

3. 服务器端处理回发逻辑
   在后台代码中处理回发，更新Label文本，同时保存当前页码状态：

// 用ViewState保存当前页码，避免回发丢失
private int CurrentPage
{
    get { return ViewState["CurrentPage"] != null ? (int)ViewState["CurrentPage"] : 1; }
    set { ViewState["CurrentPage"] = value; }
}

protected void btnPostBackTrigger_Click(object sender, EventArgs e)
{
    string action = Request.Form["__EVENTARGUMENT"];
    if (action == "Prev" && CurrentPage > 1)
    {
        CurrentPage--;
        lblPageInfo.Text = $"当前页：{CurrentPage}";
    }
    else if (action == "Next")
    {
        CurrentPage++;
        lblPageInfo.Text = $"当前页：{CurrentPage}";
    }
}

解决方案2：事件委托绑定（适用于动态生成的翻页按钮） #

如果Literal中的翻页HTML是动态生成的，用事件委托确保事件能绑定到动态元素：

$(document).on('click', '.prev-btn', function() {
    goPrev();
    __doPostBack('<%= btnPostBackTrigger.ClientID %>', 'Prev');
});

$(document).on('click', '.next-btn', function() {
    goNext();
    __doPostBack('<%= btnPostBackTrigger.ClientID %>', 'Next');
});

注意事项 #

• 确保jQuery代码在DOM加载完成后执行（包裹在$(function(){ ... })中）
• 不要直接在翻页按钮的onclick属性中写__doPostBack，避免覆盖jQuery事件
• 用ViewState或Session保存页码等状态，防止回发后丢失

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