blazor ile JavaScript ve jQuery giriş

JavaScript ve jQuery (AJAX) tabanlı bu giriş yapma mantığını Blazor'a taşırken, $.ajax yerine HttpClient, cookie yönetimi yerine ise genellikle LocalStorage veya AuthenticationStateProvider kullanılır.

Aşağıda, bu kodu bir Blazor bileşeni (.razor) içinde nasıl kurgulanır.

1. Model Tanımları

Önce API'ye gönderilecek ve API'den gelecek verileri karşılayacak sınıfları oluşturmalıyız:

public class LoginRequest
{
    public int Tip { get; set; } = 11;
    public LoginData Data { get; set; }
}

public class LoginData
{
    public string Telefon { get; set; }
    public string Sifre { get; set; }
}

public class LoginResponse
{
    public List<UserData> Data { get; set; }
}

public class UserData
{
    public string V_id { get; set; }
    public string V_adisoyadi { get; set; }
    public string V_tel { get; set; }
}

 

2. Blazor Bileşeni (Giris.razor)

Blazor'da JavaScript'in aksine veriler bind mekanizması ile yönetilir.

 

@page "/giris"
@using System.Text.RegularExpressions
@inject HttpClient Http
@inject NavigationManager NavManager
@inject IJSRuntime JSRuntime

<EditForm Model="@loginModel" OnValidSubmit="GirisYap">
    <input type="text" @bind="loginModel.Data.Telefon" id="giris_telefon" placeholder="Telefon" />
    <input type="password" @bind="loginModel.Data.Sifre" id="sifre" placeholder="Şifre" />
    
    <button type="submit" class="btn btn-primary">Giriş Yap</button>
</EditForm>

@code {
    private LoginRequest loginModel = new LoginRequest { Data = new LoginData() };

    private async Task GirisYap()
    {
        // Telefon numarasını temizle (Regex kullanarak)
        var temizTel = Regex.Replace(loginModel.Data.Telefon ?? "", @"[s()-]", "");
        loginModel.Data.Telefon = temizTel;

        try
        {
            var response = await Http.PostAsJsonAsync("https://api-url.com/query", loginModel);
            var result = await response.Content.ReadFromJsonAsync<LoginResponse>();

            if (result?.Data != null && result.Data.Count > 0)
            {
                var user = result.Data[0];

                // Başarı Mesajı (JS Interop ile toastr veya alert çağrılabilir)
                await JSRuntime.InvokeVoidAsync("alert", $"Hoşgeldiniz {user.V_adisoyadi}, yönlendiriliyorsunuz.");

                // Cookie veya LocalStorage kaydı
                await JSRuntime.InvokeVoidAsync("localStorage.setItem", "kullanici", user.V_id);
                await JSRuntime.InvokeVoidAsync("localStorage.setItem", "ad", user.V_adisoyadi);

                // 1.5 saniye bekle ve yönlendir
                await Task.Delay(1500);
                NavManager.NavigateTo("/index");
            }
            else
            {
                // Hata mesajı
                await JSRuntime.InvokeVoidAsync("alert", "Telefon ya da şifre yanlış!");
            }
        }
        catch (Exception ex)
        {
            await JSRuntime.InvokeVoidAsync("alert", "Bir hata oluştu: " + ex.Message);
        }
    }
}



Tarih: 2026.03.10