Introduction - Partial Views & Session & View Component & Özel Tag Helper

Partial View

Partial view'ler kodun yeniden kullanımını teşvik edecek ve bu her zaman iyi bir şeydir.
Uygulamamızda iki farklı view a sahip olduğumuzu hayal edelim.
Bizim durumumuzda bu,
pie listesini gördüğümüz List sayfası ve
ikincisi, bir dizi terfi turta göstereceğim ana sayfa olabilir.
Her iki view da da bir pie görüntüsü, pie açıklaması ve fiyatı ile görselleştirmek için biraz koda ihtiyacım olacak.
Bu iki view kodu yeniden kullanmadan tamamen yazacak olsaydık,
temelde pie ın görselleştirilmesi için aynı kodu iki kez oluşturuyor olacağım.
Bu artık iyi bir şey değil
Öyleyse, partial view'lere merhaba diyelim.
partial view'ler, daha sonra birkaç yere yerleştirebileceğim bir kod parçası gibidir ve
uygulamamda kodun yeniden kullanılmasını sağlar.
Partial view yine sadece bir view dır.
Örnek bir partial view,
Bu artık normal bir view dan pek farklı görünmüyor.
Aslında, kod açısından bakıldığında, partial view tıpkı normal bir view gibidir,
ancak biz onu başka bir view ın parçası olarak kullanırız.
Bu durumda Pie'de de yazılmıştır ve
bu modeli görüntülenecek farklı özellik değerlerine erişmek için kullanırız.
Yine de bir şey farklıdır.
Tüm partial view'lere alt çizgiyle başlayan bir ad vermek için ASP.NET Core MVC'de bir kuraldır.
Bu, normal görünüm ile partial view'i birbirinden ayırt etmemizi sağlayacaktır.
Şimdi partial view'imizi kullanmak istediğimiz yerde, yine bir etiket yardımcısı (Tag Helper) kullanabiliriz.
Bir etiket yardımcısı kodu yürütür ve HTML'yi oluşturur.
Burada tah helper, name özelliğini boş (sade) minimum olarak bekleyecektir.
Name, genellikle bir alt çizgiyle başlayan partial view'i gösterir.
!! Dikkat
uzantı yok, bu yüzden burada cshtml kullanılmıyor.
Bu, partial view'in geçerli controller klasöründe ve ayrıca shared klasörde aranmasıyla sonuçlanır.
Ayrıca partial view'in görselleştirmesi için bazı ekstra veriler de aktarmalıyız ve
bunu burada model özelliğini kullanarak yapıyoruz.
Foreach döngüsünün her çalışması için mevcut pie örneğini partial view'e geçiriyorum,
böylece onu modeli olarak kullanabilsin.
partial view'leri doğrudan controller klasörlerinden birine koymak mümkün olsa da,
genellikle bunlar paylaşılır ve bu nedenle partial view'leri Shared klasöre yerleştirmek de yaygındır.
Razor şimdi kısmi etiket yardımcısıyla (partial tag helper) karşılaştığında, varsayılan olarak bu Shared klasörde arama yapacaktır.
Bir partial view'in ID si aslında diğer view lar arasında bir görünümü paylaştığı için,
Shared klasör iyi bir yer gibi görünüyor.

Session

Alışveriş Sepetini Oluşturma

• Alışveriş yapma yeteneği olmayan bir web mağazası aslında oldukça işe yaramaz • Alışveriş sepetinin kendisine bakmadan önce, bunu nasıl uygulayacağımıza bakalım. • Henüz uygulamada kullanıcı hesabımız olmadığından, • bir kullanımı gerçekten bir alışveriş sepetiyle ilişkilendiremiyoruz, • ancak yapabileceğimiz şey SESSİON adı verilen bir şey kullanmaktır. • SESSİON'ler, kullanıcı uygulamaya göz atarken sunucuda veri depolamamıza izin veren bir ASP.NET Core özelliğidir. • Tamamen ASP.NET Core tarafından yönetilir ve temelde bir kullanıcı sitemize geldiğinde bir SESSİON'i bir kullanıcıyla ilişkilendirebiliriz. • Bu SESSİON, daha sonra alışveriş sepeti için benzersiz bir kimlik depolamak için kullanacağız. • Dahili olarak, Session’lar, sunucuya her istekle gönderilecek bir SESSİON kimliği içeren bir tanımlama bilgisine güvenir ve bu, ASP.NET Core'un isteği kimin yaptığını bilir. • Şimdiye kadar birkaç kez gördüğümüz gibi, ASP.NET Core ekibinin amacı bir uygulamanın ayak izini (footprint) olabildiğince küçük tutmaktır ve bu nedenle ihtiyacımız olan hizmetleri eklememiz gerekir.

• Session’lar desteği varsayılan olarak dahil değildir, bu nedenle bunu uygulamaya eklememiz gerekir. • Session’lar için destek sağlamak için hizmetleri aramamız gerekir. Ayrıca, bir middleware bileşeni de gereklidir. • Configure metodunda UseSession çağırarak Session’lar için destek ekleyebiliriz. • Denetleyicilerimizden SESSİON nesnesini kullanırsak bu işe yarar. • SESSİON'e bir hizmet sınıfından erişmem gerekecek, yani düz bir controller olmayan sınıf. • SESSİON nesnesine, HttpContext adı verilen bir şey aracılığıyla erişilebilir, • bunu da uygulamamıza getirmemiz gerekir ve • bu parçacığın burada yeşil olarak görebileceğiniz gibi • services.AddHttpContextAccessor kullanarak yapabiliriz.

View Component

Bu modülün başında Partial View’lar'ye baktık.
Partial View’lar, ASP.NET Core MVC'nin yararlı bir özelliğidir, ancak yine de bir sınırlamaları vardır.
PARTİAL VİEW koduna bir kez daha bakalım.
Gördüğünüz gibi, arama görünümünden kendisine aktarılan veriler üzerinde çalışıyor.
Bizim durumumuzda, pie a genel bakış listesiydi.
PARTİAL VİEW'nin başka verilere ihtiyacı varsa,
örneğin, genel bakış listesi için,
kullandığı PARTİAL VİEW veya görünümler için gereken verileri de içeren bir görünüm modeli oluşturabiliriz.
Şimdi, bu işe yarasa da, gerçekten mükemmel bir çalışma şekli değil.
ASP.NET Core, bunu çözmeye yardımcı olacak yeni bir özellikle birlikte gelir ve buna görünüm adı verilir
bileşenleri.
VİEW COMPONENT, birçok yönden PARTİAL VİEW'ye benzer.
Şimdi, tıpkı bir PARTİAL VİEW gibi, bir VİEW COMPONENT yalnızca kısmi içeriği görüntülemek için kullanılacaktır.
Tüm görünüm için VİEW COMPONENT kullanmayacaksınız.
Bir VİEW COMPONENT, temelde bir controller ve onun görünümü gibi bir sınıf ve bir view oluşur.
View bir PARTİAL VİEW gibidir, ancak veriler artık VİEW COMPONENT kodundan aktarılacaktır.
VİEW COMPONENT'lerin arkasında veya mantıkta yer alan C # kodunda, bu nedenle gerekli verileri gereken her yerden alan kodu yazabiliriz.
Arama görünümünde kullanılan verilerle sınırlı değildir.
Bunun için bağımlılık enjeksiyonunu (dependecy injection) da destekler.
Ve bir VİEW COMPONENT aynı zamanda bağımsız bir bileşen değildir.
Her zaman bir üst görünümden çağrılacaktır,
ancak ihtiyacı olan her şeyi yapmak için kodu çalıştırabilir.
Örneğin, farklı verilerde yükleme.
Öyleyse, VİEW COMPONENT'leri genellikle nerede kullanacağız o zaman?
Veri ve bağımlılık ekleme ile çalışabildikleri için, mantığın geride kaldığı bağımsız bileşenler için anlamlıdırlar,
bu nedenle bir oturum açma paneli iyi bir kullanım durumu olabilir.
Seçeneklerin kullanıcının oturum açıp açmadığına bağlı olduğu dinamik bir gezinme menüsü oluşturmak istiyorsanız, VİEW COMPONENT'i de kullanabiliriz.
Sepetteki ürünleri gösterecek bir alışveriş sepeti de mantıklı olacaktır.
O zaman bu VİEW COMPONENT'lerden birini nasıl oluşturabileceğimizi görelim.
VİEW COMPONENT oluşturmanın farklı yolları vardır.
Burada temel VİEW COMPONENT sınıfından türetilen bir ViewComponent sınıfı görebilirsiniz.
ViewComponent sınıfı, tıpkı bir controller gibi
genel,
soyut olmayan ve
iç içe olmayan bir sınıf olmalıdır.
ViewComponent kodunda, daha sonra Invoke metodunun içinde yürütmek istediğimiz işlevselliğimizi ekleyebiliriz.
VİEW COMPONENT'i kullandığımızda, ASP.NET Core MVC,
Invoke adlı bir yöntemi arayacak ve bunu bizim için arayacaktır.
Sınıfın yanında, bir VİEW COMPONENT'in de VİEW COMPONENT'in görsel kısmı olan bir görünüme ihtiyacı olacaktır.
Bu arada, bir görünüme sahip olmak kesinlikle gerekli değildir,
VİEW COMPONENT'iniz basitçe bir dizge döndürebilir ve bu daha sonra eklenir.
Bununla birlikte, çoğu durumda, genellikle bir görünüme de sahip olursunuz.
VİEW COMPONENT'lerin görünüm bölümleri genellikle Shared klasörün bir alt klasörü olan Components adlı bir klasöre yerleştirilir.
Oluşturduğumuz her VİEW COMPONENT, bu dizinde bir alt klasör alacaktır.
Buradaki ekran görüntüsünde, Bileşenler klasörünün içinde bulunan ShoppingCartSummary adlı bir klasörümüz olduğunu görebilirsiniz.
İkincisi daha sonra Shared klasörün bir alt klasörüdür.
Daha sonra, VİEW COMPONENT'in görünüm bölümünü içeren bir .cshtml dosyası bulacaksınız.
Bu dosyaya genellikle default.cshtml adı verilir.
Şimdi VİEW COMPONENT'i bir görünümden veya belki de genel düzenden çağırmak istediğimiz yerde, o zaman yeni Razor @await Component.Invoke veya InvokeAsync ifadesini kullanmalıyım.
Bunu görebilirsiniz.
Çağırmak istediğim VİEW COMPONENT adına geçiyorum.

Özel Bir TAG HELPER Oluşturma

• Kendimiz de özel TAG HELPER'ler oluşturabilir ve bunları işlevselliği sarmak için kullanabiliriz. • Küçük bir hatırlatma olarak, Tag helper’ların temel işlevi yine neydi? • TAG HELPER'ler dahili C # kodu içerir ve bu C # kodu HTML oluşturacaktır. • Razor koduna bir TAG HELPER yerleştiririz ve böylece sayfanın oluşturulmasına yardımcı olurlar. • Ne zaman düşünsek, hey, bu küçük bir yeniden kullanılabilir bileşeni birden çok sayfaya sığdırabileceğim bir şey, ondan bir TAG HELPER oluşturmak mantıklı olabilir. • Aslında TAG HELPER'ler, ASP.NET Core MVC uygulamalarında önemli bir uzantı noktasıdır. • Bir TAG HELPER oluşturmak tamamen C # ile yapılır.

• TAG HELPER'ler sadece sınıflardır ve onları projemizde istediğimiz yere yerleştirebiliriz. • TAG HELPER olmak için, bir sınıfın temel TagHelper sınıfından miras alması gerekir. • TagHelper adı verilen ad, üzerinde çalıştığı öğenin adından ve ardından TagHelper'dan oluşur. • Burada, EmailTagHelper adında kendi TAG HELPER adımı oluşturacağım. • Ortaya çıkan HTML'yi oluşturacak kod, Process yönteminde yaşayacaktır. • Dikkat edin, bu sefer, aslında bir geçersiz kılma. • Şimdi TAG HELPER ile • Razor kodu, artık e-posta adında bir öğe oluşturabiliyorum.

• Bu daha sonra İşlem yöntemini TAG HELPER üzerinden çağırır ve sonuçta ortaya çıkan HTML'yi görünümde kullanıldığı yere enjekte eder. • TAG HELPER'lerimizi istediğimiz yere yerleştirebilsek de, hepsini aynı yere yerleştirmek iyi bir fikirdir. • Bunun nedeni, TAG HELPER'leri kodda kullanmadan önce kaydetmemiz gerektiğidir. • Uygulamamızda yerleşik TAG HELPER'lerin kullanımını ViewImports dosyası aracılığıyla ekleyerek nasıl etkinleştirebileceğimizi daha önce görmüştük. • Kendi TAG HELPER'lerimizi oluşturduğumuzda, gerçekten aynı prosedürü izlememiz gerekir. • Burada değiştirilmiş ViewImports dosyasını görebilirsiniz.

• Şimdi kendi TAG HELPER'lerimi yerleştirdiğim ad alanını genişlettik. • Bu satırı ekleyerek, artık uygulamada kullanabilirim.

KevserAkbas / BethanysPieShop