CMS.Example · Sürükle-Bırak Blok Editörü
Başlık, metin, görsel ve bağlantı bloklarıyla sayfa oluşturun. CMS.Example, blokları sürükleyerek sıralama, JSON olarak kaydetme ve aynı düzenle yeniden açma akışını .NET 8 MVC üzerinde gösteriyor.
Bir sayfaya önce başlık ve giriş metni, ardından bir görsel ve bağlantı eklediğinizi düşünün. Görseli en üste taşımak için bloğu sürükleyip kaydetmeniz yeterli. Sayfayı tekrar açtığınızda editör, blokları bıraktığınız sırayla ve kaydettiğiniz alan değerleriyle geri getirir. CMS.Example, bu düzenleme döngüsünü ASP.NET Core 8 MVC üzerinde gösteren bir yönetim paneli örneği.
Sayfanın yapısı editörde şekilleniyor
Editörde başlık, paragraf, görsel ve bağlantı için ayrı bloklar var. Başlık bloğunda seviye ve metin, bağlantı bloğunda görünen metin ve hedef adres düzenlenebiliyor. Blok eklerken istemci ContentPartController üzerinden ilgili Razor partial view dosyasının HTML çıktısını alıyor ve düzenleme alanına yerleştiriyor.
jQuery UI Sortable, blokların tutamaç üzerinden sürüklenip bırakılmasını sağlıyor. Metin alanları ve seçim kutuları sürükleme dışında tutulduğu için editör, blok içindeki metni seçmeye ve değiştirmeye izin veriyor. Bir blok kaldırıldığında sıralama alanı yeni düzene göre yenileniyor.
Sürüklemeden SQL Server kaydına
Kaydetme sırasında contentPart.js, ekrandaki blokları yukarıdan aşağıya dolaşıyor. Her blok için türü, ekrandaki konumunu gösteren sortOrder değerini ve türe özgü alanları topluyor. Örneğin bir başlık seviye ve metin, bir görsel ise dosya yolu ve alternatif metin taşıyor.
Bu blok dizisi JSON olarak ContentJson form alanına yazılıyor. PageController içeriği sayfa kaydının Content alanına aktarıyor. PageService, Entity Framework Core üzerinden kaydı SQL Server’a yazıyor. Böylece blokların türü, içeriği ve sırası aynı sayfa kaydında saklanıyor.
Kayıt yeniden açıldığında sıra nasıl korunuyor?
Düzenleme ekranı, kayıtlı JSON’u okuyup blokları sortOrder değerine göre sıralıyor. loadBlocksSequentially, her bloğun partial view yanıtı geldikten ve alanları doldurulduktan sonra sıradaki bloğu yüklüyor. Bir başlık için seviye ve metin, bir bağlantı için adres ve görünen metin bu adımda geri yazılıyor.
Bu sıralı yükleme, AJAX yanıtlarının geliş hızının ekrandaki blok sırasını değiştirmesini önlüyor. Aynı blok şablonları hem yeni bir blok eklerken hem de kayıtlı bir sayfayı düzenlemeye dönerken kullanılıyor.
Görsel, sayfayı kaydetmeden önizlenebiliyor
Bir görsel seçildiğinde editör, dosyayı ayrı bir FormData isteğiyle yükleme uç noktasına gönderiyor. Sunucu dosyayı benzersiz bir adla wwwroot/uploads dizinine kaydediyor ve URL’yi editöre döndürüyor. Editör bu adresi görsel bloğuna yazıp önizlemeyi güncelliyor. Sayfa kaydı sırasında blok JSON’una görselin adresi ve alternatif metni ekleniyor.
Sayfa yönetimi ve kodun organizasyonu
Panelde sayfalar listelenebiliyor, oluşturulabiliyor, düzenlenebiliyor ve silinebiliyor. Sayfa formunda SEO URL’si, SEO başlığı, açıklaması ve anahtar kelimeler için ayrı alanlar bulunuyor. Menü ve alt bilgi görünürlüğü de sayfa kaydına ait seçenekler olarak düzenlenebiliyor.
Çözüm üç projeye ayrılıyor. Data, sayfa modelini ve EF Core bağlamını barındırıyor. DataAccess, PageService ile sayfa işlemlerini yönetiyor. Admin ise MVC controller’larını, Razor ekranlarını ve blok editörünün JavaScript kodunu içeriyor.
Teknolojiler
C# · .NET 8 · ASP.NET Core MVC · Razor Partial Views · Entity Framework Core · SQL Server · jQuery · jQuery UI Sortable · AJAX · FormData