ASP.NET C#：如何通过UpdatePanel与Ajax更新后台变量并同步前端显示

首先得明确你当前代码的核心问题：

1. 静态WebMethod无法访问页面实例变量：你页面里的test是非静态的实例成员，但[WebMethod]标记的方法是静态的——静态方法不属于任何页面实例，所以你以为后端更新了test，其实根本没操作到页面里的那个变量，最多是操作了AllApps实例里的相关数据。
2. UpdatePanel与独立Ajax不互通：UpdatePanel的刷新依赖于ASP.NET的PostBack机制，而你用的是独立的Ajax请求，两者是完全分离的，所以即使test真的被更新了，UpdatePanel也不会自动同步刷新。

下面给你两种实用的解决思路：

方法一：Ajax成功后触发UpdatePanel刷新 #

这种思路保留UpdatePanel，通过Ajax完成业务逻辑后，手动触发UpdatePanel的刷新，让它重新渲染最新内容。

步骤1：修改WebMethod，存储更新后的内容 #

因为静态方法无法直接访问页面实例，我们可以把需要显示的内容存到Session里（记得启用Session支持）：

[WebMethod(EnableSession = true)]
public static string Subscribe(string name, string email)
{
    AllApps abc = new AllApps();
    abc.iPriceFrom = 50;
    abc.iPriceTo = 100;
    // 假设abc.test()返回需要显示的字符串内容
    string updatedTestContent = abc.test();
    // 把内容存到Session，供页面渲染时获取
    HttpContext.Current.Session["UpdatedTest"] = updatedTestContent;
    
    return "thanks " + name + ", your email " + email + " is subscribed to our newsletter.";
}

步骤2：修改ASPX页面，添加触发刷新的隐藏按钮 #

给UpdatePanel加一个异步触发器，用隐藏按钮来触发刷新：

<asp:UpdatePanel ID="upre" runat="server">
    <ContentTemplate>
        <!-- 优先显示Session里的最新内容，没有则显示初始的test值 -->
        <%= Session["UpdatedTest"] ?? Convert.ToString(test) %>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="hiddenRefreshBtn" EventName="Click" />
    </Triggers>
</asp:UpdatePanel>
<!-- 隐藏按钮，仅用来触发UpdatePanel刷新 -->
<asp:Button ID="hiddenRefreshBtn" runat="server" Style="display: none;" OnClick="hiddenRefreshBtn_Click" />

步骤3：添加隐藏按钮的后台事件 #

这个事件不需要额外逻辑，只是用来触发UpdatePanel的刷新：

protected void hiddenRefreshBtn_Click(object sender, EventArgs e)
{
    // 空方法即可，UpdatePanel会自动重新渲染内容
}

步骤4：修改Ajax的成功回调，触发刷新 #

在Ajax请求成功后，调用ASP.NET内置的__doPostBack方法触发隐藏按钮的点击，从而刷新UpdatePanel：

$(".mb-2").click(function (e) {
    $.ajax({
        type: "POST",
        url: "one.aspx/Subscribe",
        contentType: "application/json; charset=utf-8",
        data: '{"name":"test","email":"test@gmail.com"}',
        dataType: "json",
        success: function (msg) {
            if (msg.d) {
                alert(msg.d);
                // 触发隐藏按钮的PostBack，刷新UpdatePanel
                __doPostBack('<%= hiddenRefreshBtn.ClientID %>', '');
            }
        },
        error: function (req, status, error) {
            alert("Error try again");
        }
    });
    return false;
});

方法二：直接用Ajax返回内容，手动更新DOM #

这种思路更简洁，完全抛弃UpdatePanel，直接通过Ajax获取最新内容，用JavaScript更新页面元素。

步骤1：修改ASPX页面，替换成普通Div #

把UpdatePanel换成带ID的普通Div，方便JS定位：

<div id="testContent">
    <%= Convert.ToString(test) %>
</div>

步骤2：修改WebMethod，返回包含更新内容的对象 #

让WebMethod同时返回提示消息和需要显示的内容：

[WebMethod]
public static object Subscribe(string name, string email)
{
    AllApps abc = new AllApps();
    abc.iPriceFrom = 50;
    abc.iPriceTo = 100;
    string updatedTest = abc.test(); // 获取需要显示的最新内容
    
    // 返回一个包含消息和内容的对象
    return new {
        Message = "thanks " + name + ", your email " + email + " is subscribed to our newsletter.",
        UpdatedTestContent = updatedTest
    };
}

步骤3：修改Ajax回调，直接更新DOM #

在成功回调里，用返回的内容替换页面上的文本：

$(".mb-2").click(function (e) {
    $.ajax({
        type: "POST",
        url: "one.aspx/Subscribe",
        contentType: "application/json; charset=utf-8",
        data: '{"name":"test","email":"test@gmail.com"}',
        dataType: "json",
        success: function (msg) {
            if (msg.d) {
                alert(msg.d.Message);
                // 直接更新页面上的内容
                $("#testContent").text(msg.d.UpdatedTestContent);
            }
        },
        error: function (req, status, error) {
            alert("Error try again");
        }
    });
    return false;
});

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