C# AJAX技術如何結合GraphQL進行數(shù)據(jù)查詢

發(fā)布時間：2024-09-09 17:31:52 來源：億速云閱讀：80 作者：小樊欄目：編程語言

在C#中，你可以使用AJAX技術結合GraphQL進行數(shù)據(jù)查詢。這里是一個簡單的示例，展示了如何在ASP.NET Core應用程序中實現(xiàn)這種結合。

首先，確保你已經安裝了以下NuGet包：
- Microsoft.AspNetCore.Mvc.NewtonsoftJson
- GraphQL
- GraphQL.Server.Ui.Playground
創(chuàng)建一個GraphQL schema（模式）和對象類型。例如，我們創(chuàng)建一個簡單的Person類型：

public class PersonType : ObjectGraphType<Person>
{
    public PersonType()
    {
        Field(x => x.Id);
        Field(x => x.Name);
        Field(x => x.Age);
    }
}

public class Person
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int Age { get; set; }
}

創(chuàng)建一個GraphQL查詢類型，繼承自ObjectGraphType，并添加一個字段來獲取所有人員信息：

public class PersonQuery : ObjectGraphType
{
    public PersonQuery()
    {
        Field<ListGraphType<PersonType>>("people", resolve: context =>
        {
            // 在這里返回你的數(shù)據(jù)源，例如從數(shù)據(jù)庫獲取數(shù)據(jù)
            var people = new List<Person>
            {
                new Person { Id = 1, Name = "Alice", Age = 30 },
                new Person { Id = 2, Name = "Bob", Age = 25 },
            };
            return people;
        });
    }
}

在Startup.cs中配置GraphQL端點：

public void ConfigureServices(IServiceCollection services)
{
    services.AddControllers().AddNewtonsoftJson();
    services.AddSingleton<ISchema, PersonSchema>();
    services.AddGraphQL(options =>
    {
        options.EnableMetrics = true;
        options.ExposeExceptions = true;
    });
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    app.UseRouting();
    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllerRoute(
            name: "default",
            pattern: "{controller}/{action=Index}/{id?}");
        endpoints.MapGraphQL();
    });

    app.UseGraphQLPlayground(new GraphQLPlaygroundOptions());
}

創(chuàng)建一個HTML頁面，其中包含一個AJAX請求，用于查詢GraphQL數(shù)據(jù)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>GraphQL AJAX Example</title>
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>GraphQL AJAX Example</h1>
   <button id="loadData">Load Data</button>
    <ul id="peopleList"></ul>

   <script>
        $("#loadData").click(function () {
            $.ajax({
                url: "/graphql",
                method: "POST",
                contentType: "application/json",
                data: JSON.stringify({
                    query: `
                        {
                            people {
                                id
                                name
                                age
                            }
                        }
                    `
                }),
                success: function (response) {
                    var people = response.data.people;
                    var list = $("#peopleList");
                    list.empty();
                    for (var i = 0; i< people.length; i++) {
                        list.append("<li>" + people[i].name + " (" + people[i].age + ")</li>");
                    }
                },
                error: function (error) {
                    console.log("Error: ", error);
                }
            });
        });
    </script>
</body>
</html>

現(xiàn)在，當你點擊"Load Data"按鈕時，AJAX請求將發(fā)送GraphQL查詢，并在頁面上顯示查詢到的人員信息。

向AI問一下細節(jié)

C# AJAX技術如何結合GraphQL進行數(shù)據(jù)查詢

猜你喜歡

最新資訊

相關推薦

相關標簽