C# 结合 AJAX 实现异步数据加载

发布时间：2024-09-09 11:51:39 作者：小樊
来源：亿速云阅读：98

要在C#中使用AJAX实现异步数据加载，你需要创建一个Web方法来处理请求并返回数据。以下是一个简单的示例，展示了如何使用C#和AJAX实现异步数据加载。

首先，在ASP.NET项目中创建一个新的Web表单（例如：Default.aspx）。
在Default.aspx页面中添加一个按钮和一个用于显示数据的标签：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   <title></title>
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Button ID="btnLoadData" runat="server" Text="Load Data" OnClientClick="loadData(); return false;" />
            <asp:Label ID="lblData" runat="server"></asp:Label>
        </div>
    </form>
   <script>
        function loadData() {
            $.ajax({
                type: "POST",
                url: "Default.aspx/GetData",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    $("#<%= lblData.ClientID %>").text(response.d);
                },
                error: function (response) {
                    alert("Error: " + response.statusText);
                }
            });
        }
    </script>
</body>
</html>

在Default.aspx.cs文件中添加一个Web方法来处理AJAX请求：

using System;
using System.Web.Services;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }

    [WebMethod]
    public static string GetData()
    {
        // 在这里执行你的数据加载逻辑，例如从数据库获取数据
        string data = "异步加载的数据";
        return data;
    }
}

现在，当你点击“Load Data”按钮时，将通过AJAX异步加载数据并显示在标签中。这种方法可以避免页面刷新，提高用户体验。

C# 结合 AJAX 实现异步数据加载

相关阅读