1. Haberler
  2. Programlama
  3. Real Estate – AspNet Core 8.0 – Bölüm 11

Real Estate – AspNet Core 8.0 – Bölüm 11

Murat Yücedağ'ın AspNet Core 8.0 ile Api Dapper gibi teknolojileri kullandığı Real Estate serisinin 11. bölümünü izledim. Bu bölümde yapılanları size anlatmaya çalıştım. AspNet Core ile geliştirilen bu projede her ders için blog yazısı yazmaya çalışacağım. Sizler de bu blog serisini takip ederek dahada pekiştirmiş olursunuz. Ben Eyüp Furkan Tüylü. AspNet Core 8.0 projesine hepiniz hoş geldiniz!

Real Estate Projesi ASPNET CORE 8.0 bölüm 11 - murat yücedağ - eyüp furkan tüylü
Real Estate Projesi ASPNET CORE 8.0 bölüm 11 - murat yücedağ - eyüp furkan tüylü
Paylaş

Bu Yazıyı Paylaş

veya linki kopyala

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

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

Bir Önceki Yazı
thumbnail
Real Estate – AspNet Core 8.0 – Bölüm 10
Haberi görüntüle

Murta Hocanın bu dersinde anasayfa tasarımı ile devam ediyoruz. İlk olarak templatedeki anasayfayı oluşturan index.html sayfasını header kısmından sonraki ilk section’ı alıyoruz.


<section class="w3l-cover-3">
    <div class="cover top-bottom">
        <div class="container">
            <div class="middle-section text-center">
                <div class="section-width">
                    <p>It's great to be home!</p>
                    <h2>Find a property today</h2>
                    <div class="most-searches">
                        <h4>Most Searches</h4>
                        <ul>
                            <li><a href="#link">Villa</a></li>
                            <li><a href="#link">Apartment</a></li>
                            <li><a href="#link">Private house</a></li>
                        </ul>
                    </div>
                    <form action="#" class="w3l-cover-3-gd" method="GET">
                        <input type="search" name="text" placeholder="Enter keywords" required>
                        <span class="input-group-btn">
                            <select class="btn btn-default" name="ext" required>
                                <option selected="">Office</option>
                                <option>Villa</option>
                                <option>Apartment</option>
                                <option>Private house</option>
                                <option>Building</option>
                                <option>Shop</option>
                                <option>Social housing</option>
                                <option>Town house</option>
                            </select>
                        </span>
                        <span class="input-group-btn">
                            <select class="btn btn-default" name="ext" required>
                                <option selected="">Select Country</option>
                                <option>Australia</option>
                                <option>London</option>
                                <option>India</option>
                                <option>Bangladesh</option>
                                <option>Saudi Arabia</option>
                                <option>America</option>
                                <option>Srilanka</option>
                            </select>
                        </span>
                        <button type="submit" class="btn-primary">Search</button>
                    </form>
                </div>
                <section id="bottom" class="demo">
                    <a href="#bottom"><span></span>Scroll</a>
                </section>
            </div>
        </div>
    </div>
</section>

Bu kodu UI projesinde Views altında Default klasörünün içerisindeki Index.cshtml’e yapıştırdık.

Feature Kısmının Partial Hale Getirilmesi

Şimdi ViewComponents kısmında HomePage adında bir klasör ekliyoruz. Oluşturduğumuz bu klasörün içerisinde bir class tanımlayacağız. Bunun için sağ tuş, add kısmından new class diyip “_DefaultFeatureComponentPartial” adında bir partial oluşturuyoruz.

_DefaultFeatureComponentPartial Tanımlaması

Class’ı oluşturduktan sonra içerisindeki kodu silip sadece public class’ı ViewComponent’ten miras aldıracağız. Yani kodumuz şu şekilde olacak;

using System;
using Microsoft.AspNetCore.Mvc;

namespace RealEstate_Dapper_UI.ViewComponents.HomePage
{
	public class _DefaultFeatureComponentPartial:ViewComponent
	{
		
	}
}

Burada dikkat etmemiz gereken AspNet Core kütüphanesinden miras alınan ViewComponent‘tir. Yanlışlıkla s takılı olanını yazmayın. ViewComponents bizim kendi oluşturduğumuz ViewComponents klasörünü işaret edecektir bu sebeple uygulama hata verecektir. Doğru olanı ViewComponent’tir.

Ardından iç kısımda Invoke metodunu tanımlayacağız. Bu metod bir View dönecek.

		public IViewComponentResult Invoke()
		{
			return View();
		}

Şimdi yapmamız gereken bir Shared klasörü altındaki Components klasörünün içerisinde “_DefaultFeatureComponentPartial” isminde bir klasör tanımlamak ve view’ını tanımlamaya.

Şimdi Index.cshtml de tanımladığımız section kısmını component partial’a taşıyabiliriz. Oluşturduğumuz _DefaultFeatureComponentPartial klasöründeki Default.cshtml dosyasında sadece şu kodlar olacak;


<section class="w3l-cover-3">
    <div class="cover top-bottom">
        <div class="container">
            <div class="middle-section text-center">
                <div class="section-width">
                    <p>It's great to be home!</p>
                    <h2>Find a property today</h2>
                    <div class="most-searches">
                        <h4>Most Searches</h4>
                        <ul>
                            <li><a href="#link">Villa</a></li>
                            <li><a href="#link">Apartment</a></li>
                            <li><a href="#link">Private house</a></li>
                        </ul>
                    </div>
                    <form action="#" class="w3l-cover-3-gd" method="GET">
                        <input type="search" name="text" placeholder="Enter keywords" required>
                        <span class="input-group-btn">
                            <select class="btn btn-default" name="ext" required>
                                <option selected="">Office</option>
                                <option>Villa</option>
                                <option>Apartment</option>
                                <option>Private house</option>
                                <option>Building</option>
                                <option>Shop</option>
                                <option>Social housing</option>
                                <option>Town house</option>
                            </select>
                        </span>
                        <span class="input-group-btn">
                            <select class="btn btn-default" name="ext" required>
                                <option selected="">Select Country</option>
                                <option>Australia</option>
                                <option>London</option>
                                <option>India</option>
                                <option>Bangladesh</option>
                                <option>Saudi Arabia</option>
                                <option>America</option>
                                <option>Srilanka</option>
                            </select>
                        </span>
                        <button type="submit" class="btn-primary">Search</button>
                    </form>
                </div>
                <section id="bottom" class="demo">
                    <a href="#bottom"><span></span>Scroll</a>
                </section>
            </div>
        </div>
    </div>
</section>

Ardından Index.cshtml dosyasında ise şu tanımlamayı gerçekleştireceğiz;

@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/_DefaultLayout.cshtml";
}



@await Component.InvokeAsync("_DefaultFeatureComponentPartial") 

Ardından Default.cshtml’de biraz Türkçeleştirme işlemi yaparak kodumuza devam ediyoruz.


<section class="w3l-cover-3">
    <div class="cover top-bottom">
        <div class="container">
            <div class="middle-section text-center">
                <div class="section-width">
                    <p>Hayalinizdeki eve sahip olun!</p>
                    <h2>Bugün Sizin İçin Doğru Evi Bulalım</h2>
                    <div class="most-searches">
                        <h4>Sık Arananlar</h4>
                        <ul>
                            <li><a href="#link">Villa</a></li>
                            <li><a href="#link">Daire</a></li>
                            <li><a href="#link">Yazlık</a></li>
                        </ul>
                    </div>
                    <form action="#" class="w3l-cover-3-gd" method="GET">
                        <input type="search" name="text" placeholder="Aramak istediğiniz" required>
                        <span class="input-group-btn">
                            <select class="btn btn-default" name="ext" required>
                                <option selected="">Gayrimenkul Türü</option>
                                <option>Villa</option>
                                <option>Apartment</option>
                                <option>Private house</option>
                                <option>Building</option>
                                <option>Shop</option>
                                <option>Social housing</option>
                                <option>Town house</option>
                            </select>
                        </span>
                        <span class="input-group-btn">
                            <select class="btn btn-default" name="ext" required>
                                <option selected="">Ülke Seçin</option>
                                <option>Australia</option>
                                <option>London</option>
                                <option>India</option>
                                <option>Bangladesh</option>
                                <option>Saudi Arabia</option>
                                <option>America</option>
                                <option>Srilanka</option>
                            </select>
                        </span>
                        <button type="submit" class="btn-primary">Ara</button>
                    </form>
                </div>
                <section id="bottom" class="demo">
                    <a href="#bottom"><span></span>Kaydır</a>
                </section>
            </div>
        </div>
    </div>
</section>

Product List Kısmının Partial Hale Getirilmesi

Bu kısım aşağıdaki kodları içeriyor.

<section class="locations-1" id="locations">
    <div class="locations py-5">
        <div class="container py-lg-5 py-md-4 py-2">
            <div class="heading text-center mx-auto">
                <h3 class="title-big">Top Properties</h3>
            </div>
            <div class="row pt-md-5 pt-4">
                <div class="col-lg-4 col-md-6">
                    <a href="property-single.html">
                        <div class="box16">
                            <div class="rentext-listing-category"><span>Buy</span><span>Rent</span></div>
                            <img class="img-fluid" src="assets/images/p1.jpg" alt="">
                            <div class="box-content">
                                <h3 class="title">$25,00,000</h3>
                                <span class="post">51 Merrick Way, Coral Gables, USA</span>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-lg-4 col-md-6 mt-md-0 mt-4">
                    <a href="property-single.html">
                        <div class="box16">
                            <div class="rentext-listing-category"><span>Buy</span><span>Rent</span></div>
                            <img class="img-fluid" src="assets/images/p2.jpg" alt="">
                            <div class="box-content">
                                <h3 class="title">$37,00,000</h3>
                                <span class="post">51 Merrick Way, Coral Gables, USA</span>

                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-lg-4 col-md-6 mt-lg-0 pt-lg-0 mt-4 pt-md-2">
                    <a href="property-single.html">
                        <div class="box16">
                            <div class="rentext-listing-category"><span>Buy</span><span>Rent</span></div>
                            <img class="img-fluid" src="assets/images/p3.jpg" alt="">
                            <div class="box-content">
                                <h3 class="title">$41,00,000</h3>
                                <span class="post">51 Merrick Way, Coral Gables, USA</span>

                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-lg-4 col-md-6 mt-4 pt-md-2">
                    <a href="property-single.html">
                        <div class="box16">
                            <div class="rentext-listing-category"><span>Buy</span><span>Rent</span></div>
                            <img class="img-fluid" src="assets/images/p4.jpg" alt="">
                            <div class="box-content">
                                <h3 class="title">$19,00,000</h3>
                                <span class="post">51 Merrick Way, Coral Gables, USA</span>

                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-lg-4 col-md-6 mt-4 pt-md-2">
                    <a href="property-single.html">
                        <div class="box16">
                            <div class="rentext-listing-category"><span>Buy</span><span>Rent</span></div>
                            <img class="img-fluid" src="assets/images/p5.jpg" alt="">
                            <div class="box-content">
                                <h3 class="title">$26,00,000</h3>
                                <span class="post">51 Merrick Way, Coral Gables, USA</span>

                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-lg-4 col-md-6 mt-4 pt-md-2">
                    <a href="property-single.html">
                        <div class="box16">
                            <div class="rentext-listing-category"><span>Buy</span><span>Rent</span></div>
                            <img class="img-fluid" src="assets/images/p6.jpg" alt="">
                            <div class="box-content">
                                <h3 class="title">$34,00,000</h3>
                                <span class="post">51 Merrick Way, Coral Gables, USA</span>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

Şimdilik bu kod burada dursun. Biz ViewComponents klasörü altında HomePage altında bir sınıf tanımlayalım. Sınıfın ismi _DefaultHomePageProductList olacak. Yine bir önceki kısımda anlattığım gibi ViewComponent sınıfından miras alacak. Yine aynı şekilde içeride bir Invoke metodu tanımlayacağız. Sonuç olarak şu şekilde gözükecek kodumuz;

using System;
using Microsoft.AspNetCore.Mvc;

namespace RealEstate_Dapper_UI.ViewComponents.HomePage
{
	public class _DefaultHomePageProductList:ViewComponent
	{
		public IViewComponentResult Invoke()
		{
			return View();
		}
	}
}

Metodumuzu tanımladığımıza göre artık Views Components altında _DefaultHomePageProductList klasörü oluşturup içerisine de bir view oluşturacağız. Bu başlığın altında belirttiğim section kodunu oluşturduğumuz razor view’ın içerisine koyacağız. Burada görseller olduğu için görsellerin yolunu AspNet Core projelerinde “~/…” ekleyerek belirtiyoruz. Bizim kodumuz ise şu şekilde olacak;


<section class="locations-1" id="locations">
    <div class="locations py-5">
        <div class="container py-lg-5 py-md-4 py-2">
            <div class="heading text-center mx-auto">
                <h3 class="title-big">Günün Favori İlanları</h3>
            </div>
            <div class="row pt-md-5 pt-4">
                <div class="col-lg-4 col-md-6">
                    <a href="property-single.html">
                        <div class="box16">
                            <div class="rentext-listing-category"><span>Buy</span><span>Rent</span></div>
                            <img class="img-fluid" src="~/starter/assets/images/p1.jpg" alt="">
                            <div class="box-content">
                                <h3 class="title">$25,00,000</h3>
                                <span class="post">51 Merrick Way, Coral Gables, USA</span>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-lg-4 col-md-6 mt-md-0 mt-4">
                    <a href="property-single.html">
                        <div class="box16">
                            <div class="rentext-listing-category"><span>Buy</span><span>Rent</span></div>
                            <img class="img-fluid" src="~/starter/assets/images/p2.jpg" alt="">
                            <div class="box-content">
                                <h3 class="title">$37,00,000</h3>
                                <span class="post">51 Merrick Way, Coral Gables, USA</span>

                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-lg-4 col-md-6 mt-lg-0 pt-lg-0 mt-4 pt-md-2">
                    <a href="property-single.html">
                        <div class="box16">
                            <div class="rentext-listing-category"><span>Buy</span><span>Rent</span></div>
                            <img class="img-fluid" src="~/starter/assets/images/p3.jpg" alt="">
                            <div class="box-content">
                                <h3 class="title">$41,00,000</h3>
                                <span class="post">51 Merrick Way, Coral Gables, USA</span>

                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-lg-4 col-md-6 mt-4 pt-md-2">
                    <a href="property-single.html">
                        <div class="box16">
                            <div class="rentext-listing-category"><span>Buy</span><span>Rent</span></div>
                            <img class="img-fluid" src="~/starter/assets/images/p4.jpg" alt="">
                            <div class="box-content">
                                <h3 class="title">$19,00,000</h3>
                                <span class="post">51 Merrick Way, Coral Gables, USA</span>

                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-lg-4 col-md-6 mt-4 pt-md-2">
                    <a href="property-single.html">
                        <div class="box16">
                            <div class="rentext-listing-category"><span>Buy</span><span>Rent</span></div>
                            <img class="img-fluid" src="~/starter/assets/images/p5.jpg" alt="">
                            <div class="box-content">
                                <h3 class="title">$26,00,000</h3>
                                <span class="post">51 Merrick Way, Coral Gables, USA</span>

                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-lg-4 col-md-6 mt-4 pt-md-2">
                    <a href="property-single.html">
                        <div class="box16">
                            <div class="rentext-listing-category"><span>Buy</span><span>Rent</span></div>
                            <img class="img-fluid" src="~/starter/assets/images/p6.jpg" alt="">
                            <div class="box-content">
                                <h3 class="title">$34,00,000</h3>
                                <span class="post">51 Merrick Way, Coral Gables, USA</span>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

Ardından Views altında Default altında Index.cshtml dosyamızı açıp kodu buraya çağıracağız.

@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/_DefaultLayout.cshtml";
}



@await Component.InvokeAsync("_DefaultFeatureComponentPartial")

@await Component.InvokeAsync("_DefaultHomePageProductList") 

Kod kısmında bold olarak işaretlediğim alan Prodcut List componentini çağırmakta. Şimdi artık kodumu deneyelim ve sonucu görüntüleyelim.

realestate aspnet core 8.0 bolum 11 murat yucedag eyup furkan tuylu componentleri cagirmak 1
Real Estate – AspNet Core 8.0 – Bölüm 11 5

İlk kısım gördüğünüz gibi Türkçeleştirildi ve topbar alanından hemen sonra düzgün bir şekilde geliyor. İkinci kısım ise;

realestate aspnet core 8.0 bolum 11 murat yucedag eyup furkan tuylu componentleri cagirmak 2
Real Estate – AspNet Core 8.0 – Bölüm 11 6

Feature kısmının altında düzgün bir şekilde geliyor.

Biz Kimiz Kısmının Partial Hale Getirilmesi

Artık alışmaya başladık diye düşünüyorum. Yapacaklarımızı aşağı-yukarı tahmin edebiliyorsunuzdur. Adımlarımız sabit aslında. İlk olarak ViewComponents içerisinde bir class tanımlıyoruz. Ardından Shared altından Components altında bir cshtml ile ilgili kısmın html kodlarını tanımlıyoruz ve sonrasında Views altında Default altında Index.cshtml’de bu componenti çağırıyoruz. Hadi hızlıca yapalım.

_DefaultWhoWeAreComponentPartial

adında bir sınıf oluşturup gerekli işlemleri yapıyoruz ve kodumuz şu şekilde gözüküyor;

using System;
using Microsoft.AspNetCore.Mvc;

namespace RealEstate_Dapper_UI.ViewComponents.HomePage
{
	public class _DefaultWhoWeAreComponentPartial:ViewComponent
	{
		public IViewComponentResult Invoke()
		{
			return View();
		}
	}
}

Ardından html kodumuzu alalım ve Shared altında tanımlayalım.

<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">Biz Kimiz?</h6>
                        <h3 class="title-big">The experts in local and international property</h3>
                        <p class="mt-4">
                            We have over 15 year experience, Over 20,000 people work for us in more than 70
                            countries all over the world. Learn more about our work!
                            Lorem ipsum vive dolor sit amet.
                        </p>
                        <p class="mt-3">
                            Viverra feugiat. Pellen tesque libero ut justo,
                            ultrices in ligula. Semper at tempufddfel lorem ipsum.
                        </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>Outstanding property</li>
                            <li><span class="fa fa-check" aria-hidden="true"></span>Social responsibility</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>

Burada templatte son section’ı eklemeyi unutmuşlar. Siz benim yukarıda verdiğim kodu eklerseniz sorunsuz çalışacaktır. Ardından Views altında Defaul altında Index.cshtml dosyasında componenti çağırdığımızda işlem tamamlanacak.

@await Component.InvokeAsync("_DefaultWhoWeAreComponentPartial")  
realestate aspnet core 8.0 bolum 11 murat yucedag eyup furkan tuylu componentleri cagirmak 3
Real Estate – AspNet Core 8.0 – Bölüm 11 7

Services Kısmının Partial Hale Getirilmesi

Çok fazla tekrar yaptık. Artık hangi sayfada hangi kod var bunu gösteriyor olacağım.

ViewComponents > HomePage > _DefaultServicesComponentPartial.cs

using System;
using Microsoft.AspNetCore.Mvc;

namespace RealEstate_Dapper_UI.ViewComponents.HomePage
{
	public class _DefaultServicesComponentPartial:ViewComponent
	{
		public IViewComponentResult Invoke()
		{
			return View();
		}
	}
}

View > Shared > Components > _DefaultServicesComponentPartial > Default.cshtml

<section class="w3l-bottom-grids py-5" id="steps">
    <div class="container py-lg-5 py-md-4 py-2">
        <div class="grids-area-hny main-cont-wthree-fea row">
            <div class="col-lg-4 col-md-6 grids-feature">
                <div class="area-box no-box-shadow">
                    <span class="fa fa-home"></span>
                    <h4><a href="#feature" class="title-head">Buy a home</a></h4>
                    <p>Vivamus a ligula quam. Ut blandit eu leo non. Duis sed dolor amet ipsum primis in faucibus orci.</p>
                    <a href="#more" class="more">Read More <span class="fa fa-long-arrow-right"></span> </a>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 grids-feature mt-md-0 mt-4">
                <div class="area-box no-box-shadow">
                    <span class="fa fa-home"></span>
                    <h4><a href="#feature" class="title-head">Rent a home </a></h4>
                    <p>Vivamus a ligula quam. Ut blandit eu leo non. Duis sed dolor amet ipsum primis in faucibus orci.</p>
                    <a href="#more" class="more">Read More <span class="fa fa-long-arrow-right"></span> </a>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 grids-feature mt-lg-0 mt-4">
                <div class="area-box no-box-shadow">
                    <span class="fa fa-building-o"></span>
                    <h4><a href="#feature" class="title-head">See neighbourhoods</a></h4>
                    <p>Vivamus a ligula quam. Ut blandit eu leo non. Duis sed dolor amet ipsum primis in faucibus orci.</p>
                    <a href="#more" class="more">Read More <span class="fa fa-long-arrow-right"></span> </a>
                </div>
            </div>
        </div>
    </div>
</section>

Views > Default > Index.cshtml

@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/_DefaultLayout.cshtml";
}



@await Component.InvokeAsync("_DefaultFeatureComponentPartial")

@await Component.InvokeAsync("_DefaultHomePageProductList")

@await Component.InvokeAsync("_DefaultWhoWeAreComponentPartial")

@await Component.InvokeAsync("_DefaultServicesComponentPartial")  

_DefaultProductListExploreCitiesComponentPartial

ViewComponents > HomePage > _DefaultProductListExploreCitiesComponentPartial.cs

using System;
using Microsoft.AspNetCore.Mvc;

namespace RealEstate_Dapper_UI.ViewComponents.HomePage
{
	public class _DefaultProductListExploreCitiesComponentPartial:ViewComponent
	{
		public IViewComponentResult Invoke()
		{
			return View();
		}
	}
}

View > Shared > Components > _DefaultProductListExploreCitiesComponentPartial > Default.cshtml



<section class="locations-1 popular" id="locations">
    <div class="locations py-5">
        <div class="container py-lg-5 py-md-4">
            <div class="heading text-center mx-auto">
                <h6 class="title-small">Explore cities</h6>
                <h3 class="title-big">Popular Locations</h3>
            </div>
            <div class="row pt-5">
                <div class="col-lg-3 col-md-4 col-6">
                    <a href="#url">
                        <div class="box16">
                            <img class="img-fluid" src="~/starter/assets/images/p1.jpg" alt="">
                            <div class="box-content">
                                <h3 class="title mb-1">Newyork</h3>
                                <span class="post">4 listings</span>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-lg-3 col-md-4 col-6">
                    <a href="#url">
                        <div class="box16">
                            <img class="img-fluid" src="~/starter/assets/images/p2.jpg" alt="">
                            <div class="box-content">
                                <h3 class="title mb-1">California</h3>
                                <span class="post">4 listings</span>

                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-lg-3 col-md-4 col-6 mt-md-0 pt-md-0 mt-sm-4 mt-3 pt-md-2">
                    <a href="#url">
                        <div class="box16">
                            <img class="img-fluid" src="~/starter/assets/images/p3.jpg" alt="">
                            <div class="box-content">
                                <h3 class="title mb-1">Las vegas</h3>
                                <span class="post">4 listings</span>

                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-lg-3 col-md-4 col-6 mt-lg-0 pt-lg-0 mt-sm-4 mt-3 pt-md-2">
                    <a href="#url">
                        <div class="box16">
                            <img class="img-fluid" src="~/starter/assets/images/p4.jpg" alt="">
                            <div class="box-content">
                                <h3 class="title mb-1">Malaysia</h3>
                                <span class="post">4 listings</span>

                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-lg-3 col-md-4 col-6 mt-sm-4 mt-3 pt-md-2">
                    <a href="#url">
                        <div class="box16">
                            <img class="img-fluid" src="~/starter/assets/images/p5.jpg" alt="">
                            <div class="box-content">
                                <h3 class="title mb-1">Paris</h3>
                                <span class="post">4 listings</span>

                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-lg-3 col-md-4 col-6 mt-sm-4 mt-3 pt-md-2">
                    <a href="#url">
                        <div class="box16">
                            <img class="img-fluid" src="~/starter/assets/images/p6.jpg" alt="">
                            <div class="box-content">
                                <h3 class="title mb-1">New Jersy</h3>
                                <span class="post">4 listings</span>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-lg-3 col-md-4 col-6 mt-sm-4 mt-3 pt-md-2">
                    <a href="#url">
                        <div class="box16">
                            <img class="img-fluid" src="~/starter/assets/images/p7.jpg" alt="">
                            <div class="box-content">
                                <h3 class="title mb-1">France</h3>
                                <span class="post">4 listings</span>

                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-lg-3 col-md-4 col-6 mt-sm-4 mt-3 pt-md-2">
                    <a href="#url">
                        <div class="box16">
                            <img class="img-fluid" src="~/starter/assets/images/p8.jpg" alt="">
                            <div class="box-content">
                                <h3 class="title mb-1">Newyork</h3>
                                <span class="post">4 listings</span>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>



Views > Default > Index.cshtml

@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/_DefaultLayout.cshtml";
}



@await Component.InvokeAsync("_DefaultFeatureComponentPartial")

@await Component.InvokeAsync("_DefaultHomePageProductList")

@await Component.InvokeAsync("_DefaultWhoWeAreComponentPartial")

@await Component.InvokeAsync("_DefaultServicesComponentPartial")

@await Component.InvokeAsync("_DefaultProductListExploreCitiesComponentPartial")

Evet AspNet Core 8.0 projesinin 11. bölümü tamamlanmış bulunmakta. Umarım AspNet Core 8.0 projesinin tamamlandığı yazıyı da birlikte görmüş oluruz. AspNet gerçekten hoşuma gitmeye başladı. Bir mobil developer olarak AspNet ile api projeleri hazırlayıp bir de üzerine yine AspNet Core 8.0 ile web projesini geliştirirsem tadından yenmez.

0
mutlu
Mutlu
0
_zg_n
Üzgün
0
sinirli
Sinirli
0
_a_rm_
Şaşırmış
0
k_t_
Kötü
0
beynim_yand_
Beynim Yandı
0
_eytani
Şeytani
Real Estate – AspNet Core 8.0 – Bölüm 11
Yorum Yap

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Giriş Yap

Eyüp Furkan Tüylü ayrıcalıklarından yararlanmak için hemen giriş yapın veya hesap oluşturun, üstelik tamamen ücretsiz!