Razor Page ve EF Core ile liste sayfasını Bootstrap div yapısına taşımak

Karen Payne, EF Power Tools ile oluşturulan bir SQL Server veritabanını kullanan Razor Page'lerin Visual Studio ile üretilen halini nasıl iyileştireceğini anlatıyor. Tablo yerine div tabanlı liste, ikon butonlar ve silme için Bootstrap dialog kullanımı örneklerle gösteriliyor. Scaffold çıktısını daha duyarlı ve erişilebilir hale getirmek isteyen ASP.NET Core geliştiricileri için pratik bir rehber.

Kilit noktalar

• Visual Studio ile Razor Page eklerken EF Core modelini ve DbContext'i seçerek index şablonu kullanılır
• Düzenle, detay ve sil bağlantıları bi-pencil, bi-eye ve bi-trash ikonlu butonlara çevrilir
• Bootstrap icons için client library kurulup _Layout.cshtml içine bootstrap-icons.min.css bağlanır
• Silme onayı ayrı sayfa yerine deleteModal adlı Bootstrap modal ile yapılır
• Silme handler'ı FindAsync ile kaydı bulur, Remove ve SaveChangesAsync çağırır
• Tablo yerine div yapısı, duyarlılık ve WCAG AA uyumu için önerilir

Makalede, Visual Studio'nun EF Core ile birlikte ürettiği Razor Page iskeletinin nasıl geliştirileceği ele alınıyor. Yazar, liste sayfasındaki metin bağlantılarını Bootstrap ikonlu butonlarla değiştiriyor, silme işlemini ayrı bir onay sayfası yerine Bootstrap modal dialog ile yapıyor ve tabloları div tabanlı bir yerleşime taşıyor. Silme akışında ID modal açılırken hidden alana aktarılıyor ve POST handler'ı kaydı EF Core ile kaldırıyor.

Ayrıca düzenleme ve ekleme sayfaları için FluentValidation ile bir CustomersValidator örneği veriliyor. Yaklaşımın asıl faydası duyarlılık ve erişilebilirlik; ancak modal scripti ve kod örnekleri yazarın kendi proje yapısına göre düzenlenmiş. Uygulamadan önce kendi veri modelinize göre uyarlamak gerekir.

Gerçek dünyada kullanımı

• Scaffold edilmiş bir ASP.NET Core yönetim panelini mobil uyumlu hale getirmek
• Büyük veri listelerinde silme onayını ayrı sayfa yerine modal ile yönetmek
• Ekran okuyucu ve erişilebilirlik gereksinimi olan kurumsal bir CRUD uygulaması

Neden önemli

Scaffold çıktısını olduğu gibi kullanmak yerine ikon, modal ve div yapısıyla düzenlemek, liste sayfalarını daha duyarlı ve erişilebilir hale getirir. Ayrıca silme akışında ekstra sayfa ihtiyacını ortadan kaldırır.

Benzer haberler

• Odoo'ya lead gönderirken kaybetmemek: ASP.NET Core'da transactional outboxDVDEV Community: #aspnetcore2 gün önce
• Vertical Slice mı Clean Architecture mı? .NET 10'da kullanılan hibrit yapıCWMukesh Murugan (codewithmukesh)4 gün önce
• ASP.NET Core ile POS'ta çift tahsilat ve negatif stoğu tasarımla önlemekDVDEV Community: #aspnetcore6 gün önce