Blazor Web uygulamalarında HTTP işlemleri gerçekleştirme

Tamamlandı

Bu ünitede, HTTP istemcisi oluşturma ve atma işlemlerini işlemek ve bir ASP.NET Blazor Web uygulamasında REST işlemleri gerçekleştirmek için bu istemciyi kullanmayı öğreneceksiniz IHttpClientFactory . Bu ünitede kullanılan kod örnekleri, veritabanında depolanan meyvelerin listesini yönetmeye olanak tanıyan bir API ile etkileşime dayalıdır. Bu ünitedeki bilgiler, Razor uygulamasında arka planda kod kullanan dosyaları temel alır.

Aşağıdaki kod, kod örneklerinde başvuruda bulunan veri modelini temsil eder:

public class FruitModel
{
    // An id assigned by the database
    public int id { get; set; }
    // The name of the fruit
    public string? name { get; set; }
    // A boolean to indicate if the fruit is in stock
    public bool instock { get; set; }
}

Uygulamanıza kaydolma IHttpClientFactory

Uygulamanıza eklemek IHttpClientFactory için AddHttpClient dosyasına kaydolun. Aşağıdaki kod örneği adlandırılmış istemci türünü kullanır ve REST işlemlerinde kullanılan API'nin temel adresini ayarlar ve bu ünitenin geri kalanında başvurulur.

// Add services to the container.
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

// Add IHttpClientFactory to the container and set the name of the factory
// to "FruitAPI". The base address for API requests is also set.
builder.Services.AddHttpClient("FruitAPI", httpClient =>
{
    httpClient.BaseAddress = new Uri("http://localhost:5050/");
});

var app = builder.Build();

API'deki işlem gereksinimlerini belirleme

API ile işlem gerçekleştirmeden önce API'nin ne beklediğini belirlemeniz gerekir:

• API uç noktası: Gerekirse temel adreste depolanan URI'yi düzgün şekilde ayarlayabilmeniz için işlemin uç noktasını tanımlayın.
• Veri gereksinimleri: İşlemin bir numaralandırılabilir mi yoksa yalnızca tek bir veri parçası mı döndürdiğini/beklediğini belirleyin.

Not

Bu ünitenin geri kalanındaki kod örnekleri, her HTTP işleminin çözümdeki ayrı bir sayfada işlendiğini varsayar.

GET İşlem gerçekleştirme

bir GET işlem gövde göndermemelidir ve bir kaynaktan veri almak için kullanılır (yöntem adından da belirtildiği gibi). ve URI'sine sahip bir GET HTTP HttpClient işlemi gerçekleştirmek için yöntemini kullanınHttpClient.GetAsync. Örneğin, bir Razor Sayfası uygulamasının giriş sayfasında (Home.razor) bir işlemin sonuçlarını görüntülemek için bir GET tablo oluşturmak istiyorsanız, aşağıdakini arka planda koda eklemeniz gerekir (Home.razor.cs):

• sayfa modeline eklemek IHttpClientFactory için bağımlılık ekleme özelliğini kullanın.
• Örneğini oluşturma HttpClient
• İşlemi gerçekleştirin GETve sonuçları veri modelinizde seri durumdan kaldırın.

Aşağıdaki kod örneği, bir GET işlemin nasıl gerçekleştirileceklerini gösterir. Koddaki açıklamaları okuduğunuzdan emin olun.

public partial class Home : ComponentBase
{
    // IHttpClientFactory set using dependency injection 
    [Inject]
    public required IHttpClientFactory HttpClientFactory { get; set; }

    [Inject]
    private NavigationManager? NavigationManager { get; set; }

    /* Add the data model, an array is expected as a response */
    private IEnumerable<FruitModel>? _fruitList;

    // Begin GET operation when the component is initialized
    protected override async Task OnInitializedAsync()
    {
        // Create the HTTP client using the FruitAPI named factory
        var httpClient = HttpClientFactory.CreateClient("FruitAPI");

        // Perform the GET request and store the response. The parameter
        // in GetAsync specifies the endpoint in the API 
        using HttpResponseMessage response = await httpClient.GetAsync("/fruits");

        // If the request is successful deserialize the results into the data model
        if (response.IsSuccessStatusCode)
        {
            using var contentStream = await response.Content.ReadAsStreamAsync();
            _fruitList = await JsonSerializer.DeserializeAsync<IEnumerable<FruitModel>>(contentStream);
        }
        else
        {
            // If the request is unsuccessful, log the error message
            Console.WriteLine($"Failed to load fruit list. Status code: {response.StatusCode}");
        }
    }
}

POST İşlem gerçekleştirme

bir POST işlem bir gövde göndermelidir ve kaynağa veri eklemek için kullanılır. ve URI'sine sahip bir POST HTTP HttpClient işlemi gerçekleştirmek için yöntemini kullanınHttpClient.PostAsync. Giriş sayfanızdaki verilere öğe eklemek için form kullanmak istiyorsanız şunları yapmanız gerekir:

• sayfa modeline eklemek IHttpClientFactory için bağımlılık ekleme özelliğini kullanın.
• veya EditForm modelini kullanarak EditContext verileri forma bağlayın.
• yöntemini kullanarak eklemek istediğiniz verileri seri hale getirme JsonSerializer.Serialize .
• Örneğini oluşturma HttpClient
• İşlemi gerçekleştirin POST.

Not

Rest operasyonları için her birine ayrı sayfa tahsis ettiğimiz proje modelimizin bir parçası olarak, POST işlemi, arka plandaki Add.razor.cs kod dosyasındaki kod örneği ile bir Add.razor sayfasında gerçekleştirilir.

Aşağıdaki kod örneği, bir POST işlemin nasıl gerçekleştirileceklerini gösterir. Koddaki açıklamaları okuduğunuzdan emin olun.

namespace FruitWebApp.Components.Pages;

public partial class Add : ComponentBase
{
    // IHttpClientFactory set using dependency injection 
    [Inject]
    public required IHttpClientFactory HttpClientFactory { get; set; }

    // NavigationManager set using dependency injection
    [Inject]
    private NavigationManager? NavigationManager { get; set; }

    // Add the data model and bind the form data to it
    [SupplyParameterFromForm]
    private FruitModel? _fruitList { get; set; }

    protected override void OnInitialized() => _fruitList ??= new();

    // Begin POST operation code
    private async Task Submit()
    {
        // Serialize the information to be added to the database
        var jsonContent = new StringContent(JsonSerializer.Serialize(_fruitList),
            Encoding.UTF8,
            "application/json");

        // Create the HTTP client using the FruitAPI named factory
        var httpClient = HttpClientFactory.CreateClient("FruitAPI");

        // Execute the POST request and store the response. The response will contain the new record's ID
        using HttpResponseMessage response = await httpClient.PostAsync("/fruits", jsonContent);

        // Check if the operation was successful, and navigate to the home page if it was
        if (response.IsSuccessStatusCode)
        {
            NavigationManager?.NavigateTo("/");
        }
        else
        {
            Console.WriteLine("Failed to add fruit. Status code: {response.StatusCode}");
        }
    }
}

Diğer REST işlemlerini gerçekleştirme

ve gibi PUTDELETE diğer işlemler daha önce gösterildiği gibi aynı modeli izler. Aşağıdaki tablo, ilişkili HttpClient yöntemle birlikte ortak REST işlemlerini tanımlar:

İstek	Metot	Tanım
AL	HttpClient.GetAsync	Bir kaynağı alır
PAYLAŞ	HttpClient.PostAsync	Yeni bir kaynak oluşturur
YERLEŞTİRMEK	HttpClient.PutAsync	Mevcut bir kaynağı güncelleştirir veya yoksa yeni bir kaynak oluşturur
SİL	HttpClient.DeleteAsync	Kaynağı siler
YAMA	HttpClient.PatchAsync	Var olan bir kaynağı kısmen güncelleştirir