Alıştırma - Blazor bileşeninden verilere erişme

5 dakika

Uygulamadaki geçerli sabit kodlanmış pizzaların bir veritabanıyla değiştirilmesi gerekir. Veri kaynaklarına bağlantı eklemek için Microsoft Entity Framework'i kullanabilirsiniz. Bu uygulamada pizzaları depolamak için bir SQLite veritabanı kullanıyoruz.

Bu alıştırmada veritabanı işlevselliğini desteklemek için paketler ekleyecek, sınıfları arka uç veritabanına bağlayacak ve şirketin pizzalarına yönelik verileri önceden yüklemek için bir yardımcı sınıf ekleyacaksınız.

Veritabanı erişimini destekleyen paketler ekleme

Hala çalışıyorsa uygulamayı durdurun.
Visual Studio Code'da Terminal>Yeni Terminal'i seçin.
Yeni terminalde konumunuzu BlazingPizza dizinine ayarlayın.
```
cd BlazingPizza
```

Microsoft.EntityFrameworkCore,Microsoft.EntityFrameworkCore.Sqlite ve System.Net.Http.Json paketlerini eklemek için şu komutları çalıştırın:

dotnet add package Microsoft.EntityFrameworkCore --version 9.0.0
dotnet add package Microsoft.EntityFrameworkCore.Sqlite --version 9.0.0
dotnet add package System.Net.Http.Json --version 9.0.0

Bu komutlar BlazingPizza.csproj dosyanıza paket referansları ekler.

  <ItemGroup>
    <PackageReference Include="Microsoft.EntityFrameworkCore" Version="9.0.0-*" />
    <PackageReference Include="Microsoft.EntityFrameworkCore.Sqlite" Version="9.0.0-*" />
    <PackageReference Include="System.Net.Http.Json" Version="9.0.0-*" />
  </ItemGroup>

Veritabanı bağlamı ekle

Visual Studio Code'da BlazingPizza klasöründe yeni bir klasör oluşturun. Buna Veri adını verin.
Veri klasöründe PizzaStoreContext.cs adlı yeni bir dosya oluşturun.

Yeni dosyaya sınıfı için şu kodu girin:

using Microsoft.EntityFrameworkCore;

namespace BlazingPizza.Data;

public class PizzaStoreContext : DbContext
{
    public PizzaStoreContext(DbContextOptions options) : base(options)
    {
    }

    public DbSet<PizzaSpecial> Specials { get; set; }
}

Bu sınıf, veritabanı hizmetini kaydetmek için kullanabileceğimiz bir veritabanı bağlamı oluşturur. Bağlam ayrıca veritabanına erişen bir denetleyiciye sahip olmamızı sağlar.

Değişikliklerinizi Ctrl+S ile kaydedin.

Denetleyici ekleme

BlazingPizza klasöründe yeni bir klasör oluşturun. Denetleyiciler olarak adlandır.
Denetleyiciler klasöründe yeni bir dosya oluşturun. SpecialsController.cs olarak adlandır.

Sınıfı için şu kodu girin:

using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using BlazingPizza.Data;

namespace BlazingPizza.Controllers;

[Route("specials")]
[ApiController]
public class SpecialsController : Controller
{
    private readonly PizzaStoreContext _db;

    public SpecialsController(PizzaStoreContext db)
    {
        _db = db;
    }

    [HttpGet]
    public async Task<ActionResult<List<PizzaSpecial>>> GetSpecials()
    {
        return (await _db.Specials.ToListAsync()).OrderByDescending(s => s.BasePrice).ToList();
    }
}

Bu sınıf, pizza spesiyalleri için veritabanını sorgulamamıza olanak tanıyan bir denetleyici oluşturur ve bunları URL'de (http://localhost:5000/specials) JSON olarak döndürür.

Değişikliklerinizi kaydedin.

Veritabanına veri yükleme

Uygulama, mevcut bir SQLite veritabanı olup olmadığını denetler ve önceden hazırlanmış pizzalar içeren bir veritabanı oluşturur.

Veri dizininde yeni bir dosya oluşturun. SeedData.cs olarak adlandır.

Sınıfı için şu kodu girin:

namespace BlazingPizza.Data;

public static class SeedData
{
    public static void Initialize(PizzaStoreContext db)
    {
        var specials = new PizzaSpecial[]
        {
            new PizzaSpecial()
            {
                Name = "Basic Cheese Pizza",
                Description = "It's cheesy and delicious. Why wouldn't you want one?",
                BasePrice = 9.99m,
                ImageUrl = "img/pizzas/cheese.jpg",
            },
            new PizzaSpecial()
            {
                Id = 2,
                Name = "The Baconatorizor",
                Description = "It has EVERY kind of bacon",
                BasePrice = 11.99m,
                ImageUrl = "img/pizzas/bacon.jpg",
            },
            new PizzaSpecial()
            {
                Id = 3,
                Name = "Classic pepperoni",
                Description = "It's the pizza you grew up with, but Blazing hot!",
                BasePrice = 10.50m,
                ImageUrl = "img/pizzas/pepperoni.jpg",
            },
            new PizzaSpecial()
            {
                Id = 4,
                Name = "Buffalo chicken",
                Description = "Spicy chicken, hot sauce and bleu cheese, guaranteed to warm you up",
                BasePrice = 12.75m,
                ImageUrl = "img/pizzas/meaty.jpg",
            },
            new PizzaSpecial()
            {
                Id = 5,
                Name = "Mushroom Lovers",
                Description = "It has mushrooms. Isn't that obvious?",
                BasePrice = 11.00m,
                ImageUrl = "img/pizzas/mushroom.jpg",
            },
            new PizzaSpecial()
            {
                Id = 7,
                Name = "Veggie Delight",
                Description = "It's like salad, but on a pizza",
                BasePrice = 11.50m,
                ImageUrl = "img/pizzas/salad.jpg",
            },
            new PizzaSpecial()
            {
                Id = 8,
                Name = "Margherita",
                Description = "Traditional Italian pizza with tomatoes and basil",
                BasePrice = 9.99m,
                ImageUrl = "img/pizzas/margherita.jpg",
            },
        };
        db.Specials.AddRange(specials);
        db.SaveChanges();
    }
}

sınıfı geçirilen veritabanı bağlamını kullanır, bir dizide bazı PizzaSpecial nesneler oluşturur ve sonra bunları kaydeder.

Dosya gezgininde Program.cs'ı seçin.
Üst kısımda yeni bir PizzaStoreContext öğesine başvuru ekleyin.
```
using BlazingPizza.Data;
```
Bu deyim, uygulamanın yeni hizmeti kullanmasına olanak tanır.

Bu kısmı app.Run(); yönteminin üstüne ekleyin.

// Initialize the database
var scopeFactory = app.Services.GetRequiredService<IServiceScopeFactory>();
using (var scope = scopeFactory.CreateScope())
{
    var db = scope.ServiceProvider.GetRequiredService<PizzaStoreContext>();
    if (db.Database.EnsureCreated())
    {
        SeedData.Initialize(db);
    }
}

app.Run();

Bu değişiklik ile PizzaStoreContextbir veritabanı kapsamı oluşturur. Henüz oluşturulmuş bir veritabanı yoksa, bir veritabanı oluşturmak için statik sınıfı çağırır SeedData .

Şu anda PizzaStoreContext henüz başlatılmadığı için uygulama çalışmıyor. Program.cs dosyasında, bu kodu geçerli hizmetlerin (başlayan builder.Services.satırlar) altına ekleyin:
```
  builder.Services.AddHttpClient();
  builder.Services.AddSqlite<PizzaStoreContext>("Data Source=pizza.db");
```
Bu kod iki hizmeti kaydeder. İlk AddHttpClient deyim, uygulamanın HTTP komutlarına erişmesine izin verir. Uygulama, pizza spesiyalleri için JSON almak için bir HttpClient kullanır. İkinci deyim yeniyi PizzaStoreContext kaydeder ve SQLite veritabanı için dosya adını sağlar.

Pizzaları görüntülemek için veritabanını kullanma

Artık Index.razor sayfasında sabit kodlanmış pizzayı değiştirebiliriz.

Dosya gezgininde Sayfalar'ı genişletin ve index.razor öğesini seçin.
Mevcut OnInitialized() yöntemi şununla değiştirin:
```
protected override async Task OnInitializedAsync()
{
    specials = await HttpClient.GetFromJsonAsync<List<PizzaSpecial>>(NavigationManager.BaseUri + "specials");
}
```
Note

Bu kod OnInitialized()OnInitializedAsync() ile değiştirilir. Özel bilgiler artık uygulama tarafından zaman uyumsuz olarak JSON biçiminde döndürülecek.
Düzeltmeniz gereken bazı hatalar var. Bu @inject ifadeleri @page yönergesi altına ekleyin:
```
@inject HttpClient HttpClient
@inject NavigationManager NavigationManager
```
Tüm değişikliklerinizi kaydedin ve ardından F5'i veya Çalıştır'ı seçin. Ardından, Hata Ayıklamayı Başlat'a tıklayın.

Uygulamayı çalıştırdığınızda bir çalışma zamanı hatası oluşur. JsonReader bir özel durum oluşturdu.
Uygulamanın (http://localhost:5000/specials) noktasında JSON oluşturması gerektiğini unutmayın. Bu URL'ye gidin.

Uygulama bu isteği nasıl yönlendireceklerini bilmiyor. Blazor yönlendirme modülünde yönlendirme hakkında bilgi edineceksiniz. Şimdi hatayı düzeltelim.
Shift + F5'i veya Hata Ayıklamayı Durdur'u seçin.
Dosya gezgininde Program.cs'ı seçin.

Dosyanın ortasında, başlayan app.satırlardan sonra şu uç noktayı ekleyin:

app.MapControllerRoute("default", "{controller=Home}/{action=Index}/{id?}");

Kod şu şekilde olmalıdır:

...
app.MapRazorPages();
app.MapBlazorHub();
app.MapFallbackToPage("/_Host");
app.MapControllerRoute("default", "{controller=Home}/{action=Index}/{id?}");
...

F5'i veya Çalıştır'ı seçin. Ardından, Hata Ayıklamayı Başlat'a tıklayın.

Uygulamanın artık çalışması gerekir, ancak JSON'un doğru oluşturulup oluşturulmadığını kontrol edelim.
Görmek için şuraya (http://localhost:5000/specials) gidin:

JSON, özel pizza denetleyicisinde belirtildiği gibi azalan fiyat sırasına göre listelenen pizzalara sahiptir.

Geri Bildirim

Bu sayfayı yararlı buldunuz mu?