Real Estate AspNet Core 8.0 projesinin bu bölümünde UI kısmını ele alıyor olacağız. AspNet Core 8.0 ile geliştirdiğimiz bu projede api tarafına ufak bir ara veriyoruz ve Anasayfa’yı oluşturmaya başlıyoruz.
Bir önceki dersin anlatımını henüz görmediysenizi aşağıdaki bağlantıya tıklayarak bölüm 9’u okuyabilirsiniz.
AspNet Core 8.0 ile Anasayfa Vitrin İşlemleri
Anlatıma geçmeden önce Murat Yücedağ’ın videosuna ulaşmak için buraya tıklayın.
İlk olarak vitrin ile çalışacağımızdan bahsettik. Bunun için hemen UI projesinde Controller’da DefaultController tanımlamak ile işe başlayabiliriz. DefaultController’ı anasayfa olarak düşünebilirsiniz. İlk olarak template’i parçalara ayırarak layoutumuzu hazırlayalım. Bunun için wwwroot altında starter altında index.html dosyasını düzenleyebiliriz.
Layout oluşturmak
AspNet Core 8.0 ile geliştirdiğimiz bu projede iki adet katmanımız vardı. Biri API katmanı diğeri ise UI katmanı. Bu derste işimiz UI katmanı ile olacak. UI katmanında Views klasörünün altında yer alan Shared klasöründe layoutlarımız tutulur. Biz de buraya layoutumuzu tanımlayacağız. Bunun için Shared klasörünün üzerine sağ tıklayıp “Add New” -> “New File” -> “ASP.NET Core” altında “Razer Layout” u seçiyoruz. Ardından bizden bir isim bekliyor. “_DefaultLayout” olarak adlandırıyoruz.
Bunu oluşturduktan sonra Anasayfa için bir adet View oluşturmamız gerekiyor.
DefaultController Oluşturmak
AspNet ile geliştirdiğimiz projede Controllers klasörüne sağ tıklayarak Add sekmesi altında New File’ı seçiyoruz. Ardından AspNet Core sekmesine gelip Controller Class’ı seçiyoruz ve Name kısmında DefaultController adını verip Create butonuna basıyoruz.
Artık controller’ımız da oluştu. Şimdi ise DefaultController’da Index sayfası için bir View oluşturmamız gerekiyor.
Index View Oluşturmak
MacOS tarafında geliştirme yaptığım için ben manuel olarak View altında Default adlı bir klasör oluşturmam ve içerisinde yeni bir View dosyası oluşturmam gerekiyor. Bunun için hemen Views klasörüne bir adet klasör ekliyorum ve içerisine de RazerView ile Index dosyasını oluşturuyorum.
Şimdi burada açılacak sayfada bizde layout yok. Bunu manuel tanımlamamız gerekiyor. Bunun için aşağıdaki kodları kopyalayabilirsiniz.
@{
ViewData["Title"] = "Index";
Layout = "~/Views/Shared/_DefaultLayout.cshtml";
}
<h1>Index</h1>Sıra geldi Layout’u temaya uygun düzenlemekte.
Layout’u temaya uygun düzenlemek
Temanın contact sayfası kısa ve daha kolay olduğu için Contact.html sayfasını açıp ilgili kısımları çekebiliriz.
İki adet görsel bırakıyorum. Bunlar temamızda üst kısım ve alt kısım olarak düşünebilirsiniz. Orta alana ise RenderBody kodunu yazıyor olacağız. Bunu biraz ileride anlatıyor olacağım.
Görsellerde gördüğünüz kırmızı kutu ile çerçevelenmiş alanların kodlarına ihtiyacımız var. Bu alanlar her sayfada ortak. Bu sebeple buraları Layout haline getirirsek sorunumuz çözülecektir.
Tema Üst Kısım Kodları
<!--
Author: W3layouts
Author URL: http://w3layouts.com
-->
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Estate sale - Real Estate Category Bootstrap Responsive Website Template - Contact : W3layouts</title>
<!-- google fonts -->
<link href="//fonts.googleapis.com/css2?family=Kumbh+Sans:wght@300;400;700&display=swap" rel="stylesheet">
<!-- Template CSS -->
<link rel="stylesheet" href="assets/css/style-starter.css">
</head>
<body>
<!--header-->
<header id="site-header" class="fixed-top">
<div class="container">
<nav class="navbar navbar-expand-lg stroke px-0">
<h1>
<a class="navbar-brand" href="index.html">
<span class="fa fa-home"></span> Estate sale
</a>
</h1>
<!-- if logo is image enable this
<a class="navbar-brand" href="#index.html">
<img src="image-path" alt="Your logo" title="Your logo" style="height:35px;" />
</a> -->
<button class="navbar-toggler collapsed bg-gradient" type="button" data-toggle="collapse"
data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon fa icon-expand fa-bars"></span>
<span class="navbar-toggler-icon fa icon-close fa-times"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-lg-5 mr-auto">
<li class="nav-item @@home__active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item @@listing__active">
<a class="nav-link" href="listing.html">Listing</a>
</li>
<li class="nav-item dropdown @@property__active">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Property <span class="fa fa-angle-down"></span>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item @@ps__active" href="property-single.html">Single property</a>
</div>
</li>
<li class="nav-item dropdown active">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Pages <span class="fa fa-angle-down"></span>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item @@about__active" href="about.html">About us</a>
<a class="dropdown-item active" href="contact.html">Contact us</a>
</div>
</li>
</ul>
<div class="top-quote mt-lg-0">
<a href="#buytheme" class="btn btn-style btn-primary">
<span class="fa fa-home"></span> Add
listiing
</a>
</div>
<!--/search-right-->
<div class="search mx-3">
<input class="search_box" type="checkbox" id="search_box">
<label class="fa fa-search" for="search_box"></label>
<div class="search_form">
<form action="error.html" method="GET">
<input type="text" placeholder="Search"><input type="submit" value="search">
</form>
</div>
</div>
<!--//search-right-->
</div>
<!-- toggle switch for light and dark theme -->
<div class="mobile-position">
<nav class="navigation">
<div class="theme-switch-wrapper">
<label class="theme-switch" for="checkbox">
<input type="checkbox" id="checkbox">
<div class="mode-container">
<i class="gg-sun"></i>
<i class="gg-moon"></i>
</div>
</label>
</div>
</nav>
</div>
<!-- //toggle switch for light and dark theme -->
</nav>
</div>
</header>
<!--/header-->Bu kodu kullanacağız.
Tema Alt Kısım Kodları
Temanın footer kısmı ise şu şekilde.
<!-- footers 20 -->
<section class="w3l-footers-20">
<div class="footers20">
<div class="container">
<div class="footers20-content">
<div class="d-grid grid-col-4 grids-content">
<div class="column">
<a href="#url" class="link"><span class="fa fa-comments"></span></a>
<a href="#url" class="title-small">Free consultation</a>
<h4>Schedule a free consultation with our specialist.</h4>
<a href="#buytheme" class="btn btn-style btn-primary">
Schedule now
<span class="fa fa-long-arrow-right ml-2"></span>
</a>
</div>
<div class="column">
<a href="#url" class="link"><span class="fa fa-phone"></span></a>
<a href="#url" class="title-small">help desk</a>
<h4>Do you have questions or want more infomation? Call Now</h4>
<a href="tel:+1-2345-678-11">
<p class="contact-phone mt-2">
<span class="lnr lnr-phone-handset"></span> +1-2345-678-11
</p>
</a>
</div>
<div class="column mt-lg-0 mt-md-5">
<h4 class="mb-1">Signup for newsletter</h4>
<p>and get latest news and updates</p>
<form action="#" class="subscribe-form mt-4" method="post">
<div class="form-group">
<input type="email" name="subscribe" placeholder="Enter your email" required="">
<button class="btn btn-style btn-primary">Subscribe</button>
</div>
</form>
<ul class="footers-17_social">
<h4 class="d-inline mr-4">Follow us</h4>
<li><a href="#url" class="twitter"><span class="fa fa-twitter"></span></a></li>
<li><a href="#url" class="facebook"><span class="fa fa-facebook"></span></a></li>
<li><a href="#url" class="linkedin"><span class="fa fa-linkedin"></span></a></li>
<li><a href="#url" class="instagram"><span class="fa fa-instagram"></span></a></li>
</ul>
</div>
</div>
<div class="d-grid grid-col-3 grids-content1 bottom-border">
<div class="columns copyright-grid align-self">
<p class="copy-footer-29">
© 2020 Estate sale. All rights reserved | Designed by <a href="https://w3layouts.com">W3layouts</a>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- move top -->
<button onclick="topFunction()" id="movetop" title="Go to top">
⤴
</button>
<script>// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function () {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("movetop").style.display = "block";
} else {
document.getElementById("movetop").style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}</script>
<!-- /move top -->
</section>
<!-- jQuery and Bootstrap JS -->
<script src="assets/js/jquery-3.3.1.min.js"></script>
<script src="assets/js/theme-change.js"></script><!-- theme switch js (light and dark)-->
<!-- stats number counter-->
<script src="assets/js/jquery.waypoints.min.js"></script>
<script src="assets/js/jquery.countup.js"></script>
<script>$('.counter').countUp();</script>
<!-- //stats number counter -->
<!-- owlcarousel -->
<script src="assets/js/owl.carousel.js"></script>
<!-- script for blog post slider -->
<script>$(document).ready(function () {
$('.owl-blog').owlCarousel({
loop: true,
margin: 30,
nav: false,
responsiveClass: true,
autoplay: false,
autoplayTimeout: 5000,
autoplaySpeed: 1000,
autoplayHoverPause: false,
responsive: {
0: {
items: 1,
nav: true
},
480: {
items: 1,
nav: true
},
700: {
items: 1,
nav: true
},
1090: {
items: 1,
nav: true
}
}
})
})</script>
<!-- //script for blog post slider -->
<!-- script for tesimonials carousel slider -->
<script>$(document).ready(function () {
$("#owl-demo1").owlCarousel({
loop: true,
nav: false,
margin: 50,
responsiveClass: true,
responsive: {
0: {
items: 1,
nav: false
},
736: {
items: 1,
nav: false
}
}
})
})</script>
<!-- //script for tesimonials carousel slider -->
<script src="assets/js/jquery.magnific-popup.min.js"></script>
<script>$(document).ready(function () {
$('.popup-with-zoom-anim').magnificPopup({
type: 'inline',
fixedContentPos: false,
fixedBgPos: true,
overflowY: 'auto',
closeBtnInside: true,
preloader: false,
midClick: true,
removalDelay: 300,
mainClass: 'my-mfp-zoom-in'
});
$('.popup-with-move-anim').magnificPopup({
type: 'inline',
fixedContentPos: false,
fixedBgPos: true,
overflowY: 'auto',
closeBtnInside: true,
preloader: false,
midClick: true,
removalDelay: 300,
mainClass: 'my-mfp-slide-bottom'
});
});</script>
<!-- disable body scroll which navbar is in active -->
<script>$(function () {
$('.navbar-toggler').click(function () {
$('body').toggleClass('noscroll');
})
});</script>
<!-- disable body scroll which navbar is in active -->
<!-- MENU-JS -->
<script>$(window).on("scroll", function () {
var scroll = $(window).scrollTop();
if (scroll >= 80) {
$("#site-header").addClass("nav-fixed");
} else {
$("#site-header").removeClass("nav-fixed");
}
});
//Main navigation Active Class Add Remove
$(".navbar-toggler").on("click", function () {
$("header").toggleClass("active");
});
$(document).on("ready", function () {
if ($(window).width() > 991) {
$("header").removeClass("active");
}
$(window).on("resize", function () {
if ($(window).width() > 991) {
$("header").removeClass("active");
}
});
});</script>
<!-- //MENU-JS -->
<!-- bootstrap -->
<script src="assets/js/bootstrap.min.js"></script>
</body>
</html>Şimdi bu iki kodu DefaultLayout’a taşıyacağız ve src yollarını düzelteceğiz. Src yollarını düzeltmek için temanın dosyalarının olduğu klasörü işaret etmeliyiz. Bunun için “~/starter/” yolunu eklememiz gerekiyor. Aşağıda DefaultLayout dosyasının tam kodlarını bulabileceksiniz.
DefaultLayout Kodları
@{
Layout = null;
}
<!--
Author: W3layouts
Author URL: http://w3layouts.com
-->
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Estate sale - Real Estate Category Bootstrap Responsive Website Template - Contact : W3layouts</title>
<!-- google fonts -->
<link href="//fonts.googleapis.com/css2?family=Kumbh+Sans:wght@300;400;700&display=swap" rel="stylesheet">
<!-- Template CSS -->
<link rel="stylesheet" href="~/starter/assets/css/style-starter.css">
</head>
<body>
<!--header-->
<header id="site-header" class="fixed-top">
<div class="container">
<nav class="navbar navbar-expand-lg stroke px-0">
<h1>
<a class="navbar-brand" href="index.html">
<span class="fa fa-home"></span> Estate sale
</a>
</h1>
<button class="navbar-toggler collapsed bg-gradient" type="button" data-toggle="collapse"
data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon fa icon-expand fa-bars"></span>
<span class="navbar-toggler-icon fa icon-close fa-times"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-lg-5 mr-auto">
<li class="nav-item @@home__active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item @@listing__active">
<a class="nav-link" href="listing.html">Listing</a>
</li>
<li class="nav-item dropdown @@property__active">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Property <span class="fa fa-angle-down"></span>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item @@ps__active" href="property-single.html">Single property</a>
</div>
</li>
<li class="nav-item dropdown active">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Pages <span class="fa fa-angle-down"></span>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item @@about__active" href="about.html">About us</a>
<a class="dropdown-item active" href="contact.html">Contact us</a>
</div>
</li>
</ul>
<div class="top-quote mt-lg-0">
<a href="#buytheme" class="btn btn-style btn-primary">
<span class="fa fa-home"></span> Add
listiing
</a>
</div>
<!--/search-right-->
<div class="search mx-3">
<input class="search_box" type="checkbox" id="search_box">
<label class="fa fa-search" for="search_box"></label>
<div class="search_form">
<form action="error.html" method="GET">
<input type="text" placeholder="Search"><input type="submit" value="search">
</form>
</div>
</div>
<!--//search-right-->
</div>
<!-- toggle switch for light and dark theme -->
<div class="mobile-position">
<nav class="navigation">
<div class="theme-switch-wrapper">
<label class="theme-switch" for="checkbox">
<input type="checkbox" id="checkbox">
<div class="mode-container">
<i class="gg-sun"></i>
<i class="gg-moon"></i>
</div>
</label>
</div>
</nav>
</div>
<!-- //toggle switch for light and dark theme -->
</nav>
</div>
</header>
<!--/header-->
<section class="w3l-about-breadcrumb">
<div class="breadcrumb-bg breadcrumb-bg-about pt-5">
<div class="container pt-lg-5 py-3">
</div>
</div>
</section>
<!-- contacts -->
@RenderBody()
<!-- //contacts -->
<!-- footers 20 -->
<section class="w3l-footers-20">
<div class="footers20">
<div class="container">
<div class="footers20-content">
<div class="d-grid grid-col-4 grids-content">
<div class="column">
<a href="#url" class="link"><span class="fa fa-comments"></span></a>
<a href="#url" class="title-small">Free consultation</a>
<h4>Schedule a free consultation with our specialist.</h4>
<a href="#buytheme" class="btn btn-style btn-primary">
Schedule now
<span class="fa fa-long-arrow-right ml-2"></span>
</a>
</div>
<div class="column">
<a href="#url" class="link"><span class="fa fa-phone"></span></a>
<a href="#url" class="title-small">help desk</a>
<h4>Do you have questions or want more infomation? Call Now</h4>
<a href="tel:+1-2345-678-11">
<p class="contact-phone mt-2">
<span class="lnr lnr-phone-handset"></span> +1-2345-678-11
</p>
</a>
</div>
<div class="column mt-lg-0 mt-md-5">
<h4 class="mb-1">Signup for newsletter</h4>
<p>and get latest news and updates</p>
<form action="#" class="subscribe-form mt-4" method="post">
<div class="form-group">
<input type="email" name="subscribe" placeholder="Enter your email" required="">
<button class="btn btn-style btn-primary">Subscribe</button>
</div>
</form>
<ul class="footers-17_social">
<h4 class="d-inline mr-4">Follow us</h4>
<li><a href="#url" class="twitter"><span class="fa fa-twitter"></span></a></li>
<li><a href="#url" class="facebook"><span class="fa fa-facebook"></span></a></li>
<li><a href="#url" class="linkedin"><span class="fa fa-linkedin"></span></a></li>
<li><a href="#url" class="instagram"><span class="fa fa-instagram"></span></a></li>
</ul>
</div>
</div>
<div class="d-grid grid-col-3 grids-content1 bottom-border">
<div class="columns copyright-grid align-self">
<p class="copy-footer-29">
© 2020 Estate sale. All rights reserved | Designed by <a href="https://w3layouts.com">W3layouts</a>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- move top -->
<button onclick="topFunction()" id="movetop" title="Go to top">
⤴
</button>
<script>// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function () {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("movetop").style.display = "block";
} else {
document.getElementById("movetop").style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}</script>
<!-- /move top -->
</section>
<!-- jQuery and Bootstrap JS -->
<script src="~/starter/assets/js/jquery-3.3.1.min.js"></script>
<script src="~/starter/assets/js/theme-change.js"></script><!-- theme switch js (light and dark)-->
<!-- stats number counter-->
<script src="~/starter/assets/js/jquery.waypoints.min.js"></script>
<script src="~/starter/assets/js/jquery.countup.js"></script>
<script>$('.counter').countUp();</script>
<!-- //stats number counter -->
<!-- owlcarousel -->
<script src="~/starter/assets/js/owl.carousel.js"></script>
<!-- script for blog post slider -->
<script>$(document).ready(function () {
$('.owl-blog').owlCarousel({
loop: true,
margin: 30,
nav: false,
responsiveClass: true,
autoplay: false,
autoplayTimeout: 5000,
autoplaySpeed: 1000,
autoplayHoverPause: false,
responsive: {
0: {
items: 1,
nav: true
},
480: {
items: 1,
nav: true
},
700: {
items: 1,
nav: true
},
1090: {
items: 1,
nav: true
}
}
})
})</script>
<!-- //script for blog post slider -->
<!-- script for tesimonials carousel slider -->
<script>$(document).ready(function () {
$("#owl-demo1").owlCarousel({
loop: true,
nav: false,
margin: 50,
responsiveClass: true,
responsive: {
0: {
items: 1,
nav: false
},
736: {
items: 1,
nav: false
}
}
})
})</script>
<!-- //script for tesimonials carousel slider -->
<script src="~/starter/assets/js/jquery.magnific-popup.min.js"></script>
<script>$(document).ready(function () {
$('.popup-with-zoom-anim').magnificPopup({
type: 'inline',
fixedContentPos: false,
fixedBgPos: true,
overflowY: 'auto',
closeBtnInside: true,
preloader: false,
midClick: true,
removalDelay: 300,
mainClass: 'my-mfp-zoom-in'
});
$('.popup-with-move-anim').magnificPopup({
type: 'inline',
fixedContentPos: false,
fixedBgPos: true,
overflowY: 'auto',
closeBtnInside: true,
preloader: false,
midClick: true,
removalDelay: 300,
mainClass: 'my-mfp-slide-bottom'
});
});</script>
<!-- disable body scroll which navbar is in active -->
<script>$(function () {
$('.navbar-toggler').click(function () {
$('body').toggleClass('noscroll');
})
});</script>
<!-- disable body scroll which navbar is in active -->
<!-- MENU-JS -->
<script>$(window).on("scroll", function () {
var scroll = $(window).scrollTop();
if (scroll >= 80) {
$("#site-header").addClass("nav-fixed");
} else {
$("#site-header").removeClass("nav-fixed");
}
});
//Main navigation Active Class Add Remove
$(".navbar-toggler").on("click", function () {
$("header").toggleClass("active");
});
$(document).on("ready", function () {
if ($(window).width() > 991) {
$("header").removeClass("active");
}
$(window).on("resize", function () {
if ($(window).width() > 991) {
$("header").removeClass("active");
}
});
});</script>
<!-- //MENU-JS -->
<!-- bootstrap -->
<script src="~/starter/assets/js/bootstrap.min.js"></script>
</body>
</html>
Evet DefaultLayout dosyamız hazır. Burada değişecek alanı RenderBody ile işaretliyoruz. Bizde bu alan alt ve üst kısmın ortası olduğu için ilgili kısımların ortasında RenderBody() fonksiyonunu çağırdık.
Components ile çalışmak
Layout dosyasındaki karmaşıklıktan kurtulmak için Componentler ile çalışmak daha doğru olacaktır. Şimdi UI Projesinin altında bir tane ViewComponents adında klasör oluşturalım. Ardından klasörün içerisinde Layout adında bir klasör daha tanımlayalım. Bunu yapmamızdaki amaç Layout’un componentlerini burada tutacağımızı belirtmek. Düzenli bir kod yazmak. Temiz bir mimari oluşturmaya çalışmak. Şimdi Layout klasörüne sağ tıklayıp add sekmesinden New Class’ı seçip _HeaderViewComponentPartial ismini verdik.
Ardından dosya oluştuğunda ViewComponent sınıfından kalıtım almasını sağladık. Ancak dikkat edin ViewComponents değil. Sonunda s takısı yok. ViewComponent sınıfını üzerine gelip “using Microsoft.AspNetCore.Mvc;” butonuna basarak import ediyoruz.
AspNet Core’da ViewComponent’ler partialView’lar gibi görev görürler. Ancak PartialView’lara URL üzerinden erişim sağlanabilirken ViewComponent’lere URL üzerinden erişim sağlayamazsınız.
Şimdi _HeaderViewComponentPartial içerisinde bir metod oluşturacağız. Bu metod IViewComponentResult sınıfından türeyecek ve bize bir View dönecek.
using System;
using Microsoft.AspNetCore.Mvc;
namespace RealEstate_Dapper_UI.ViewComponents.Layout
{
public class _HeaderViewComponentPartial:ViewComponent
{
public IViewComponentResult Invoke()
{
return View();
}
}
}
AspNet’te Componentlerimizi View klasörü altında Shared altında Components klasöründe tutacağız. Bunun da altında _HeaderViewComponentPartial adlı bir klasör oluşturacağız. Burada isimlerin aynı olmasına dikkat etmeliyiz.
Shared altındaki Components altındaki _HeaderViewComponentPartial klasöründe yeni bir dosya oluşturuyoruz. Bu dosya Razor View’dan oluşacak ve adı Default olacak. Ardından bu dosyanın içine layoutta taşımak istediğimiz alanı alıyoruz. Şimdilik head etiketleri arasını buraya taşıyoruz.
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Hayalinizdeki eve bir adım uzaktasınız</title>
<!-- google fonts -->
<link href="//fonts.googleapis.com/css2?family=Kumbh+Sans:wght@300;400;700&display=swap" rel="stylesheet">
<!-- Template CSS -->
<link rel="stylesheet" href="~/starter/assets/css/style-starter.css">
</head>Yukarıdaki kod Default dosyasına aittir. Layout içerisinden bu kısmı çıkardık. Şimdi bunu Layout dosyasında çağırmamız gerekiyor. Tekrar _DefaultLayout dosyasını açıyoruz ve kodları kestiğimiz yere;
@await Component.InvokeAsync("_HeaderViewComponentPartial")kodunu ekliyoruz. Bu sayede componen’timizi buraya çağırmış oluyoruz.
Şimdi aynı işlemleri navbar için de yapacağız.
Navbar Component
AspNet ile geliştirdiğimiz bu projede ilk olarak hemen ViewComponents altında Layout altında “_NavbarViewComponentPartial.cs” dosyasını sınıf olarak oluşturuyoruz. Ardından sınıfın ViewComponent’ten kalıtım almasını sağlıyoruz. IViewComponentResult tipinde Invoke adında View dönen metodumuzu tanımlıyoruz.
using System;
using Microsoft.AspNetCore.Mvc;
namespace RealEstate_Dapper_UI.ViewComponents.Layout
{
public class _NavbarViewComponentPartial:ViewComponent
{
public IViewComponentResult Invoke()
{
return View();
}
}
}
Ardından Views altında Shared altında Components altında “_NavbarViewComponentPartial” adında bir klasör oluşturuyoruz. İçerisine ise Default adında Razor View ekliyoruz. Default.cshtml dosyasının içerisini temizleyip navbar kodlarını buraya ekliyoruz.
<header id="site-header" class="fixed-top">
<div class="container">
<nav class="navbar navbar-expand-lg stroke px-0">
<h1>
<a class="navbar-brand" href="index.html">
<span class="fa fa-home"></span> Real Estate
</a>
</h1>
<button class="navbar-toggler collapsed bg-gradient" type="button" data-toggle="collapse"
data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon fa icon-expand fa-bars"></span>
<span class="navbar-toggler-icon fa icon-close fa-times"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-lg-5 mr-auto">
<li class="nav-item @@home__active">
<a class="nav-link" href="index.html">Anasayfa <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item @@listing__active">
<a class="nav-link" href="listing.html">İlanlar</a>
</li>
<li class="nav-item dropdown @@property__active">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Fırsatlar <span class="fa fa-angle-down"></span>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item @@ps__active" href="property-single.html">Günün Fırsatı</a>
</div>
</li>
<li class="nav-item @@listing__active">
<a class="nav-link" href="listing.html">Hakkımızda</a>
</li>
<li class="nav-item @@listing__active">
<a class="nav-link" href="listing.html">Bize Yazın</a>
</li>
<li class="nav-item @@listing__active">
<a class="nav-link" href="listing.html">Giriş Yapın</a>
</li>
</ul>
<div class="top-quote mt-lg-0">
<a href="#buytheme" class="btn btn-style btn-primary">
<span class="fa fa-home"></span> İlan Ver
</a>
</div>
<!--/search-right-->
<div class="search mx-3">
<input class="search_box" type="checkbox" id="search_box">
<label class="fa fa-search" for="search_box"></label>
<div class="search_form">
<form action="error.html" method="GET">
<input type="text" placeholder="Search"><input type="submit" value="search">
</form>
</div>
</div>
<!--//search-right-->
</div>
<!-- toggle switch for light and dark theme -->
<div class="mobile-position">
<nav class="navigation">
<div class="theme-switch-wrapper">
<label class="theme-switch" for="checkbox">
<input type="checkbox" id="checkbox">
<div class="mode-container">
<i class="gg-sun"></i>
<i class="gg-moon"></i>
</div>
</label>
</div>
</nav>
</div>
<!-- //toggle switch for light and dark theme -->
</nav>
</div>
</header>Header kodlarını kestiğimiz _DefaultLayout isimli layout dosyasında ise kestiğimiz yere;
@await Component.InvokeAsync("_NavbarViewComponentPartial")
kodunu ekliyoruz.
Evet, bu kısımla birlikte videoyu tamamlamış olduk. AspNet Core 8.0 ile geliştirdiğimiz bu projeyi aktif olarak takip etmenizde fayda var. Murat Hocanın AspNet Core 8.0 dersi gerçekten sizlere faydalı olacaktır. Referans olarak kullanabileceğiniz projelerden. AspNet Core iş ilanlarında çok rahatlıkla bu projeyi gösterebilirsiniz. Gerçekten detaylı bir proje olacak gibi duruyor. AspNet Core 8.0 serisinin bir sonraki yazısında görüşmek üzere. İyi çalışmalar.
