Asp.net Core MVC ile View Component Kullanımı

Geliştirdiğim bir projede header bölümünde karşılaştığım bir problemin neticesinde ViewComponent’i kullanmak zorunda kaldım. İlk başlarda projenin header’ini PartialView içerisine aldım ve Javascrip load ile sonradan yükledim. Mobilde menülerin görümününde bozulmalar oldu ve bu beni yeni arayışa gitti. ViewCompenenet ile tanışma hikayem bu şekilde oldu.

ViewCompenenet  Dot net core ile hayatımıza gitmiştir. MVC 5 deki partial view lere benzemekle beraber, yazılım geliştirme sürecinde işimiz kolaylaştıracak bazı avantajlara sahiptir.

Özelliklerine gelecek olursak

  1. Controllerden bağımız olarak çalışır ve ViewComponent mirası ile çağrılır.
  2. Geriye bir data döndürebilir.
  3. Parametreler alabilir.
  4. Geliştirme esnasında çok kolay bir şekilde test edilebilir.

Oluşturduğumuz class’ımız ViewComponent sınıfından miras alması gerekir.

Opsiyonel olarak [ViewComponent] attribut da ekleyebiliriz.

using Entity;
using Microsoft.AspNetCore.Mvc;
using Repository;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using UI.Models;

namespace UI.ClassModel
{
    [ViewComponent]
    public class HeaderViewComponent: ViewComponent
    {
        private readonly IRepository
_header; private readonly IRepository<SosyalMedya> _sosyalMedya; public HeaderViewComponent(IRepository<Header> header, IRepository<SosyalMedya> sosyalMedya) { _header = header; _sosyalMedya = sosyalMedya; } public async Task<IViewComponentResult> InvokeAsync() { return View(new HeaderModel(header:_header,sosyalMedya:_sosyalMedya)); } } }

Daha sonra dönderdiğimiz View sınıfını projede create ediyoruz. Ben path olarak shared’in altına kaydettim. Sizde isteğinize göre “Componenet/Header/Default”, “View/Home/Components/Header/Default.cshtml” gibi farklı pathlerde oluşturabilirsiniz.

Şimdi son olarak çağırmaya geldik

    @await Component.InvokeAsync(“Header”)

Diyerek çağırdıktan sonra ekran açılacaktır.

Eper parametre vermek istersek

   

@await Component.InvokeAsync("Header",new {dil=false})
using Entity;
using Microsoft.AspNetCore.Mvc;
using Repository;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using UI.Models;

namespace UI.ClassModel
{
    [ViewComponent]
    public class HeaderViewComponent : ViewComponent
    {
        private readonly IRepository<Header> _header;
        private readonly IRepository<SosyalMedya> _sosyalMedya;
        public HeaderViewComponent(IRepository<Header> header, IRepository<SosyalMedya> sosyalMedya)
        {
            _header = header;
            _sosyalMedya = sosyalMedya;
        }
        public async Task<IViewComponentResult> InvokeAsync(bool dil)
        {
            return View(new HeaderModel(header: _header, sosyalMedya: _sosyalMedya));
        }
    }
}

Gibi kullanımı vardır.

Bir cevap yazın

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