Real Estate Projesi ASPNET CORE 8.0 bölüm 16

Anlatıma geçmeden önce AspNet Core 8.0 ile geliştirdiğimiz bu projeye ait linkleri aşağıda sıraladım.

AspNet Core 8.0 projesi için linkler

GitHub

Video Linki

Ayrıca bir önceki yazıyı okumadıysanız;

bir önceki yazı

Real Estate Projesi ASPNET CORE 8.0 bölüm 15

Haberi görüntüle

AspNet Core ile geliştirdiğimiz projenin bu bölümünde WhoWeAreDetail kısmına verilerimizi getirerek devam ediyoruz.

DTO Class’ının Oluşturulması – ASPNET Core

UI katamın içerisinde API’den dönen veriyi işleyebilmek için bir sınıf tanımlamamız gerekiyor. Geçen derslerden de hatırlayacağınız üzere DTO dediğimiz şey aslında tam olarak bu görevi görüyordu. Dtos klasörü içersinde bir klasör daha tanımlıyoruz ve adına WhoWeAreDetailDtos diyoruz. Ardından içerisinde bir class(sınıf) oluşturuyoruz. Adına da ResultWhoWeAreDetail diyoruz.

UI Katmanı > Dtos > WhoWeAreDetailDtos > ResultWhoWeAreDetail.cs

İlgili dosyada datadan dönecek verilerin tanımlamalarını yapacağız.

namespace RealEstate_Dapper_UI.Dtos.WhoWeAreDetailDtos
{
    public class ResultWhoWeAreDetail
    {
        public int WhoWeAreDetailID { get; set; }
        public string Title { get; set; }
        public string Subtitle { get; set; }
        public string Description1 { get; set; }
        public string Description2 { get; set; }
    }
}

API’den dönecek veri yukarıdaki sınıf yardımı ile işleyebileceğiz. Dönecek tüm verilerin yazılabileceği bir prop mevcut. Ardından aşağıdaki kırmızı alandaki verileri tutabilmek için datada Service adında bir tablo oluşturmuştuk. Bu tablo için de Dto sınıfı yazalım.

Real Estate Projesi ASPNET CORE 8.0 bölüm 16 3

Aynı klasörde bir class daha tanımlıyorum. Adı ResultServiceDto olacak. İki tane veri tutacak. Birisi ID diğer ise ServiceName. Kodumuz şu şekilde gözükecek;

namespace RealEstate_Dapper_UI.Dtos.WhoWeAreDetailDtos
{
    public class ResultServiceDto
    {
        public int ServiceID { get; set; }
        public int ServiceName { get; set; }
    }
}

ViewComponent Class’ının Düzenlenmesi

Componentimizin işlendiği taraf olan _DefaultWhoWeAreComponentPartial.cs dosyasına gidelim.

UI Katmanı > ViewComponents > HomePage > _DefaultWhoWeAreComponentPartial.cs

Ardından veri dönme işlemi yapacağımız için Task olarak işaretleyelim ve InvokeAsync olarak metodun adını düzeltelim.

	public class _DefaultWhoWeAreComponentPartial:ViewComponent
	{
		public async Task<IViewComponentResult> InvokeAsync()
		{
			return View();
		}
	}ı

Ardından metodun dışında http isteklerimizi yönetebileceğimiz ilgili nesneyi oluşturalım.

private readonly IHttpClientFactory _httpClientFactory;

Ve constructor metodunu ekleyelim.

public _DefaultWhoWeAreComponentPartial(IHttpClientFactory httpClientFactory)
{
       _httpClientFactory = httpClientFactory;
}

Şimdi InovkeAsync metodumuzun içerisine gelip API’den veri çağırmaya başlayalım.

		public async Task<IViewComponentResult> InvokeAsync()
		{
			var client = _httpClientFactory.CreateClient();
			var responseMessage = await client.GetAsync("https://localhost:7034/api/WhoWeAreDetail");

			if (responseMessage.IsSuccessStatusCode)
			{
				var jsonData = await responseMessage.Content.ReadAsStringAsync();
				var value = JsonConvert.DeserializeObject<ResultWhoWeAreDetailDto>(jsonData);
				ViewBag.a = value.Title;
				return View();
			}
			return View();
		}

Şimdi burada metodumuzu size biraz anlatayım. Buradaki metodda bir tane client tanımladık. Bu client sayesinde internetteki veriye yani api’mize istek atabileceğiz. Hemen altında responseMessage kısmında ise client nesnesini kullanarak bir GetAsync metodu kullandık ve parametre olarakta ilgili apimizin linkini verdik. Burada dikkat etmeniz gereken şey benim api linkim ile sizin api linkiniz farklı! Örneğin benim API katmanım localhost:7034’de çalışıyorken Murat hocanın API katmanı localhost:44333’de çalışıyor. Bu sebeple kendi apinizin linkini almayı unutmayın.

Bu işlemi yaptığımızda responseMessage içerisine artık datadan veri çekmiş olduk. Hemen alt tarafında bir if kontrolü ile responseMessage.IsSuccessStatusCode’un true olup olmadığını kontrol etti. Eğer sorunsuz bir şekilde istek atabilmişsek ve istek attığımız sunucu hata fırlatmadıysa true döndürecektir. Ardından jsonData kısmında apiden dönen veriyi değişkene atamış olduk. value kısmında ise json olan veriyi oluşturmuş olduğumuz DTO sınıfından nesneye aktardık. Bu sayede value artık bir ResultWhoWeAreDetailDto nesnesi olmuş oldu. Yani bu şu anlama geliyor;

value.Title yazarak datadan dönen title’a artık ulaşabiliriz. Tabii diğer verilere de. Sonrasında bu veriyi ViewBag yardımı ile ön yüze aktarabiliyor muyuz diye test etmek için ViewBag.a’ya bu title değerini atadık. Burada bir hata aldık. Bize API’den liste dönüyor. Bu sebeple bizde listeye göre işlem yapmamız gerekiyor.

		public async Task<IViewComponentResult> InvokeAsync()
		{
			var client = _httpClientFactory.CreateClient();
			var responseMessage = await client.GetAsync("https://localhost:7034/api/WhoWeAreDetail");

			if (responseMessage.IsSuccessStatusCode)
			{
				var jsonData = await responseMessage.Content.ReadAsStringAsync();
				var value = JsonConvert.DeserializeObject<List<ResultWhoWeAreDetailDto>>(jsonData);
				ViewBag.title = value.Select(x => x.Title).FirstOrDefault();
				ViewBag.subtitle = value.Select(x => x.Subtitle).FirstOrDefault();
				ViewBag.description1 = value.Select(x => x.Description1).FirstOrDefault();
				ViewBag.description2 = value.Select(x => x.Description2).FirstOrDefault();
				return View();
			}
			return View();
		}

Değişiklik olan yerleri kodda kalın olarak işaretledim. ResultWhoWeAreDetailDto‘yu List ile saramalayarak gelecek verinin bir ResultWhoWeAreDetailDto Listesi olduğunu bildirdik. Alt tarafta ViewBag’lerde ise Select kodu ile ilgili sütunu seçtik. FirsOrDefault metodu ile o sütunun ilk verisini aldık.

Ardından tabii ki Default.cshtml’e gitmemiz gerekiyor. Yani componentin html kodlarının olduğu yere. Bunun için aşağıdaki yolu takip edebilirsiniz.

UI Katmanı > Views > Shared > Components > _DefaultWhoWeAreComponentPartial > Default.cshmtl

Buradaki html kodumuzda ise @ViewBag.Title diyerek title’a ulaşabileceğiz.

<section class="w3l-index3" id="about">
    <div class="midd-w3 pb-5">
        <div class="container pb-lg-5 pb-md-4 pb-2">
            <div class="row">
                <div class="col-lg-5 pr-lg-0">
                    <div class="w3l-left-img">
                    </div>
                </div>
                <div class="col-lg-7 pl-lg-0">
                    <div class="w3l-right-info">
                        <h6 class="title-small">@ViewBag.subtitle</h6>
                        <h3 class="title-big">@ViewBag.title</h3>
                        <p class="mt-4">
                            @ViewBag.description1
                        </p>
                        <p class="mt-3">
                            @ViewBag.description2
                        </p>
                        <ul class="w3l-right-book w3l-right-book-grid mt-md-5 mt-4">
                            <li><span class="fa fa-check" aria-hidden="true"></span>Deneme özellik</li>
                            <li><span class="fa fa-check" aria-hidden="true"></span>İkinci özellik</li>
                            <li><span class="fa fa-check" aria-hidden="true"></span>Get expert advice</li>
                            <li><span class="fa fa-check" aria-hidden="true"></span>Group structure</li>
                            <li><span class="fa fa-check" aria-hidden="true"></span>Specialist services</li>
                            <li><span class="fa fa-check" aria-hidden="true"></span>Vision & strategy</li>
                        </ul>
                        <a href="#services" class="btn btn-style btn-primary mt-4">Discover our services</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

İlgili yerleri yine kalın olarak işaretledim. Kolayca bulabilirsiniz.

Evet bu derslik bu kadardı. Benim YouTube kanalıma da abone olmayı unutmayın arkadaşlar.