ASP NET CORE RAZOR PAGE BAKIM TEKNİK SERVİS PROJE 055 VIEW COMPONENT CLASS KULLANIMI

Bu yazımızda da projemizde view komponent class kullanımına değineceğim. Projemizie giriş yaptığımızda navigasyon barda siteye üye olduğumuz mail adresi yazmakta. Buraya mail adresini değil de kullanıcının ad ve soyad bilgisini yazalım yani kullanıcı adı bilgisini yazdıralım.

Detaylı anlatım ve kod takibi için video eğitime bakınız.

Bu email adres bilgisini gösteren sayfamız Pages içinde yer alan Shared klasörü içindeki  _LoginPartial.cshtml dokümanımız. Bu dokümandaki aşağıdaki kodda; @User.Identity dediğimiz kısım bizim navigasyon barda kullanıcının kimlik bilgisini göstermesini sağlıyor. Orada her ne kadar Name’de yazsa aslında o bizim identity bilgisini tuttuğumuz mail adresini işaret etmekte.

Merhaba @User.Identity.Name!

Bizim amacımız application user kullanarak kullanıcının ad soyad bilgisini yani kullanıcı adı bilgisini buraya getirmek. Bunu yapabilmek için normal şartlarda pade model içinde kodlarımızı yazmalı ve view tarafında yani razor page tarafında göstermeliyiz. Ancak _LoginPartial bir partial view olduğu için herhangi bir page model’e sahip değil.

Peki ne yapacağız?

Burda bir view component oluşturacağız. Bunun için öncelikle projemin ana klasörüne yeni bir klasör oluşturuyor ve adını da ViewComponents veriyorum. Akabinde bu klasör üstünde sağ tıklıyor ve add new item diyerek yeni bir class ekliyorum. Adını da KullaniciAdiViewComponent verdim. Asp .net core içinde view componentle ilgili herhangi bir template bulunmamakta bu yüzden ben class ekliyor ve classımın adında ViewComponent ibaresinin geçmesini sağlıyorum. Sonuç itibari ViewComponentte bir class aslında. İlerleyen sürümlerde belki ViewComponent için bir template visual studio .net içine eklenir.

Şimdi şunu da belirtmekte fayda var.

View component ve partial razor page veya partial view arasındaki fark nedir?

Temel fark view componentin bir page model veya backend class da diyebiliriz, bu yapıya sahip olması temel farkıdır. Böylelikle view comonent içinde yazdığınızı kendi iç yapısı ile görüntüleyebilirsiniz. Burada ayrıca oluşturduğum View component classım isminde ViewComponent ibaresi geçiyor buna dikkat ediniz. Net core bunun view component olduğunu buradan anlıyor.

KullaniciAdiViewComponent içinde kodlarımı yazmaya başlıyorum:

using GursoyCNCBakim.Data;
using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Security.Claims;
using System.Threading.Tasks;

namespace GursoyCNCBakim.ViewComponents
{
    public class KullaniciAdiViewComponent : ViewComponent
    {
        private readonly ApplicationDbContext _db;

        public KullaniciAdiViewComponent(ApplicationDbContext db)
        {
            _db = db;
        }

        public async Task< IViewComponentResult > InvokeAsync()
        {
            var claimsIdentity = (ClaimsIdentity)User.Identity;
            var claims = claimsIdentity.FindFirst(ClaimTypes.NameIdentifier);

            var dbKullanici = await _db.ApplicationUser.FirstOrDefaultAsync(a => a.Id == claims.Value);

            return View(dbKullanici);
        }

    }
}

Kodlarımda öncelikle ApplicationDibContext üzerinden bir nesne türettim akabinde constructor metodumda DI ile assign işlemini gerçekleştirdim. Akabinde asp .net core yapısında herhangi bir viewcomponent kullanıldığında bu viewcomponent bir invoke async metoda ihtiyaç duyar. Dolayısı ile metodumu yazdım. Metot içerisinde claims nesnemi tanımladım. Bu claims objesi üzerinden database tarafından verimi alacağım.

Şimdi view tarafına geçelim; öncelikle projemde Pages > Shared klasörü altında yeni bir klasör oluşturuyorum adını Components veriyorum. Akabinde bunun altında yeni bir klasör daha oluşturuyor ve adını daha önce oluşturuduğum ViewComponentin önünde yazan ne ise aynı şekilde veriyorum. Çünkü eşleşme bu şekilde olacak. KullaniciAdiViewComponent şeklinde isim vermiştik, dolayısı ile buradaki klasör adı KullaniciAdi olacak. Daha sonra bu klasör içinde yeni bir item ekliyor ve bu item için razor page seçiyorum. Ekleme aşamasında Generate PageModel class üzerindeki tikleme işaretini kaldırıyorum. Create as a partial view seçeneğini işaretliyorum. Bu dosyamın adını ise Default veriyorum. Oluşturulduktan sonra buradaki tüm kodları siliyorum. Ve kodlarımı yazıyorum;

@model GursoyCNCBakim.Models.ApplicationUser

Merhaba @Model.AdSoyad 

Sonra buradan Pages içinde yer alan Shared klasörü içindeki  _LoginPartial.cshtml dokümanıma geliyor ve ilk başta bahsettiğim kodda düzenleme yapıyorum.

@await Component.InvokeAsync("KullaniciAdi")

_LoginPartial.cs kodların tamamını da ekleyeyim:

@using Microsoft.AspNetCore.Identity
@inject SignInManager< IdentityUser > SignInManager
@inject UserManager< IdentityUser > UserManager


Uygulamamı çalıştırıyor ve sonucu görüyorum.

Bu dersimizle birlikte bu seri tamamlandı.. Özellikle youtube kanalımızda yer alan videolar üzerinden de videoları takip etmenizi öneririm. Kanalımıza abone olur ve ders videolarını da beğenirseniz ayrıca sevinirim 🙂 Bir başka derste ve seride görüşmek üzere.

Youtube Kanalım:

https://www.youtube.com/channel/UC9BqxtiQjfzup3E0oqwGd8Q

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir