Blazor ve EF Core Entegrasyonu: Veri Tabanlı Uygulamalar Geliştirme

Blazor, Microsoft’un modern web uygulamaları geliştirmek için sunduğu güçlü bir frameworkdür. Entity Framework Core (EF Core) ise .NET ortamında veritabanı işlemlerini kolaylaştıran bir ORM (Object-Relational Mapping) kütüphanesidir. Blazor ve EF Core entegrasyonu, veri tabanlı uygulamaları hızlı ve etkili bir şekilde geliştirmenizi sağlar. Bu makalede, Blazor ve EF Core kullanarak bir CRUD (Create, Read, Update, Delete) uygulaması geliştirme adımlarını ele alacağız.

Blazor ve EF Core Entegrasyonu Nedir?

Blazor, C# ile modern, etkileşimli kullanıcı arayüzleri oluşturmanızı sağlar. EF Core ise veri tabanındaki verileri C# nesneleriyle yönetmenize olanak tanır. Bu entegrasyon, sunucu taraflı (Blazor Server) veya istemci taraflı (Blazor WebAssembly) projelerde kullanılabilir.

Proje Başlatma

1. Yeni Blazor Projesi Oluşturma
   Visual Studio veya .NET CLI kullanarak bir Blazor Server projesi oluşturabilirsiniz:

   dotnet new blazorserver -o BlazorEfCoreApp
   cd BlazorEfCoreApp
   

2. EF Core Paketlerini Yükleme
   EF Core için gerekli NuGet paketlerini yükleyin:

   dotnet add package Microsoft.EntityFrameworkCore.SqlServer
   dotnet add package Microsoft.EntityFrameworkCore.Tools
   

Veritabanı ve Model Tanımlama

1. Bağlantı Dizesi Ekleme

appsettings.json dosyasına veritabanı bağlantı dizesini ekleyin:

{
  "ConnectionStrings": {
    "DefaultConnection": "Server=localhost;Database=BlazorDb;Trusted_Connection=True;"
  }
}

2. EF Core DbContext ve Modelleri Tanımlama

Bir Product sınıfı ve AppDbContext sınıfı oluşturun.

// Models/Product.cs
public class Product
{
    public int Id { get; set; }
    public string Name { get; set; }
    public decimal Price { get; set; }
    public int Stock { get; set; }
}

// Data/AppDbContext.cs
using Microsoft.EntityFrameworkCore;

public class AppDbContext : DbContext
{
    public AppDbContext(DbContextOptions<AppDbContext> options) : base(options) { }

    public DbSet<Product> Products { get; set; }
}

3. EF Core’u Hizmete Ekleme

Program.cs dosyasını aşağıdaki gibi düzenleyin:

using Microsoft.EntityFrameworkCore;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddDbContext<AppDbContext>(options =>
    options.UseSqlServer(builder.Configuration.GetConnectionString("DefaultConnection")));

var app = builder.Build();

app.MapBlazorHub();
app.MapFallbackToPage("/_Host");

app.Run();

4. Migration ve Veritabanı Oluşturma

EF Core ile migration oluşturup veritabanını oluşturun:

dotnet ef migrations add InitialCreate
dotnet ef database update

Blazor Bileşeni ile CRUD İşlemleri

1. Listeleme (Read)

Pages/ProductList.razor bileşenini oluşturun:

@page "/products"
@inject AppDbContext DbContext

<h3>Ürün Listesi</h3>

<table class="table">
    <thead>
        <tr>
            <th>Id</th>
            <th>İsim</th>
            <th>Fiyat</th>
            <th>Stok</th>
            <th>İşlemler</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var product in Products)
        {
            <tr>
                <td>@product.Id</td>
                <td>@product.Name</td>
                <td>@product.Price</td>
                <td>@product.Stock</td>
                <td>
                    <button @onclick="() => DeleteProduct(product.Id)" class="btn btn-danger">Sil</button>
                </td>
            </tr>
        }
    </tbody>
</table>

@code {
    private List<Product> Products;

    protected override async Task OnInitializedAsync()
    {
        Products = await DbContext.Products.ToListAsync();
    }

    private async Task DeleteProduct(int id)
    {
        var product = await DbContext.Products.FindAsync(id);
        if (product != null)
        {
            DbContext.Products.Remove(product);
            await DbContext.SaveChangesAsync();
            Products = await DbContext.Products.ToListAsync();
        }
    }
}

2. Ekleme (Create)

Pages/AddProduct.razor bileşenini oluşturun:

@page "/add-product"
@inject AppDbContext DbContext
@inject NavigationManager NavigationManager

<h3>Ürün Ekle</h3>

<EditForm Model="@Product" OnValidSubmit="HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <div>
        <label>İsim:</label>
        <InputText @bind-Value="Product.Name" class="form-control" />
    </div>
    <div>
        <label>Fiyat:</label>
        <InputNumber @bind-Value="Product.Price" class="form-control" />
    </div>
    <div>
        <label>Stok:</label>
        <InputNumber @bind-Value="Product.Stock" class="form-control" />
    </div>
    <button type="submit" class="btn btn-primary">Ekle</button>
</EditForm>

@code {
    private Product Product = new Product();

    private async Task HandleValidSubmit()
    {
        DbContext.Products.Add(Product);
        await DbContext.SaveChangesAsync();
        NavigationManager.NavigateTo("/products");
    }
}

Sonuç

Blazor ve EF Core entegrasyonu ile bir CRUD uygulaması oluşturmayı öğrendiniz. Bu entegrasyon, web uygulamalarında güçlü bir altyapı sağlar ve veritabanı işlemlerini basitleştirir. Verilerin dinamik olarak yönetildiği uygulamalar geliştirmek için bu yapıyı temel alabilirsiniz.

SEO açısından içerik, kullanıcıların "Blazor EF Core entegrasyonu", "Blazor CRUD örneği" gibi anahtar kelimelerle arama yapmasına uygun şekilde hazırlanmıştır.