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;
AspNet Core ile geliştirdiğimiz projenin bu bölümünde anasayfayı componentlere ayırmaya devam ediyoruz.
Müşterilerimiz Componentinin Oluşturulması
İlk olarak ViewComponents altında HomePage altında bir class tanımlıyoruz. Class’ımızın adı;
_DefaultOurClientsComponentPartialArdından içerisinde Invoke metodumuzu tanımlıyoruz. Tabii ViewComponent’ten kalıtım almasını da unutmuyoruz.
using System;
using Microsoft.AspNetCore.Mvc;
namespace RealEstate_Dapper_UI.ViewComponents.HomePage
{
public class _DefaultOurClientsComponentPartial:ViewComponent
{
public IViewComponentResult Invoke()
{
return View();
}
}
}
Ardından Shared altında Component altında, yukarıda tanımladığımız class ismi ile klasör oluşturuyoruz ve içerisine Razor View ile bir öğe ekliyoruz.
<section class="w3l-index3" id="about">
<div class="midd-w3 py-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-img1">
</div>
</div>
<div class="col-lg-7 pl-lg-0">
<div class="w3l-right-info">
<h6 class="title-small">Our clients</h6>
<div class="client-grid">
<div class="client-title">
<h3 class="title-big">We value client relationships</h3>
</div>
<div class="clients-info">
<h3 class="title-big">45,200</h3>
<p>Satisfied customers</p>
</div>
</div>
<div class="w3l-clients" id="testimonials">
<div id="owl-demo1" class="owl-carousel owl-theme mt-4 pt-2 mb-4">
<div class="item">
<div class="testimonial-content">
<div class="testimonial">
<div class="testi-des">
<div class="peopl align-self">
<h4>John wilson</h4>
<p class="indentity">Communication executive</p>
</div>
</div>
<blockquote>
<q>OMG! I cannot believe that I have got a property new private house after
getting villa. It was very comfortable. I can't say enough about Real Estate</q>
</blockquote>
</div>
</div>
</div>
<div class="item">
<div class="testimonial-content">
<div class="testimonial">
<div class="testi-des">
<div class="peopl align-self">
<h4>Julia sakura</h4>
<p class="indentity">Digital Marketer</p>
</div>
</div>
<blockquote>
<q>OMG! I cannot believe that I have got a property new private house after
getting villa. It was very comfortable. I can't say enough about Real Estate</q>
</blockquote>
</div>
</div>
</div>
<div class="item">
<div class="testimonial-content">
<div class="testimonial">
<div class="testi-des">
<div class="peopl align-self">
<h4>John wilson</h4>
<p class="indentity">Web Developer</p>
</div>
</div>
<blockquote>
<q>OMG! I cannot believe that I have got a property new private house after
getting villa. It was very comfortable. I can't say enough about Real Estate</q>
</blockquote>
</div>
</div>
</div>
<div class="item">
<div class="testimonial-content">
<div class="testimonial">
<div class="testi-des">
<div class="peopl align-self">
<h4>Julia sakura</h4>
<p class="indentity">Digital Marketer</p>
</div>
</div>
<blockquote>
<q>OMG! I cannot believe that I have got a property new private house after
getting villa. It was very comfortable. I can't say enough about Real Estate</q>
</blockquote>
</div>
</div>
</div>
</div>
</div>
<a href="#agents" class="btn btn-style btn-primary mt-5">Contact our agents</a>
</div>
</div>
</div>
</div>
</div>
</section>
Yukarıdaki kodlar bizim ilgili section’a ait kodlarımız. Bu kodları oluşturduğumuz Default.cshtml dosyasına koyuyoruz.
Ardından Views klasörü altında Default altında Index.cshtml’i açarak tanımlamış olduğumuz componenti çağırıyoruz. Eğer çağırma işlemini yapmazsak anasayfada ilgili component gözükmeyecektir.
@await Component.InvokeAsync("_DefaultOurClientsComponentPartial")Bu kodu eklediğimizde ilgili kodlar tam olarak şöyle gözükmeli;
@{
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")
@await Component.InvokeAsync("_DefaultOurClientsComponentPartial")
Hemen ufak bir test yapmak için projeyi ayağa kaldırdığımızda ilgili kısım şu şekilde görünüyor olmalı.
SubFeature Componentinin Oluşturulması
Componentin isimlendirmesini şu şekilde yapacağız;
_DefaultSubFeatureComponentPartialViewComponents altında HomePage altında “_DefaultSubFeatureComponentPartial.cs” class’ını oluşturduk. Ardından kodlarını aşağıdaki gibi düzenledik.
using System;
using Microsoft.AspNetCore.Mvc;
namespace RealEstate_Dapper_UI.ViewComponents.HomePage
{
public class _DefaultSubFeatureComponentPartial:ViewComponent
{
public IViewComponentResult Invoke()
{
return View();
}
}
}
Burada kodda kalın işaretlediğim yerleri lütfen kaçırmayın. ViewComponent sınıfı Microsoft.AspNetCore.Mvc kütüphanesinden gelmektedir. s takılısı olan ViewComponents’i yazmayın. Bu sizin hata almanıza sebep olacaktır. Çünkü ViewComponents bizim tanımladığımız bir klasör Microsoft.AspNetCore.Mvc kütüphanesi değil.
Şimdi ise Shared klasörü altında Components klasörü altında metodun ismi ile aynı isimde bir klasör tanımlıyoruz. Ardından içerisine RazorView ekliyoruz ve adı Default oluyor.
<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 text-left">
<span class="fa fa-search-plus"></span>
<h5>All in one place</h5>
<h4><a href="#feature" class="title-head">Your One-Stop Shop for Finding Your Dream Home</a></h4>
<p>Vivamus a ligula quam. Ut blandit eu leo non. Duis sed dolor in orci.</p>
<a href="#more" class="more">Search for home<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 text-left">
<span class="fa fa-user-o"></span>
<h5>Connect to an agent</h5>
<h4><a href="#feature" class="title-head">Schedule a Free, No-Obligation Appointment</a></h4>
<p>Vivamus a ligula quam. Ut blandit eu leo non. Duis sed dolor in orci.</p>
<a href="#more" class="more">Find an agent <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 text-left">
<span class="fa fa-home"></span>
<h5>Get a home valuation</h5>
<h4><a href="#feature" class="title-head">Understand the Value of Your Property </a></h4>
<p>Vivamus a ligula quam. Ut blandit eu leo non. Duis sed dolor in orci.</p>
<a href="#more" class="more">Submit info <span class="fa fa-long-arrow-right"></span> </a>
</div>
</div>
</div>
</div>
</section>İçerisine ise yukarıda verdiğim kodları ekliyoruz. Şimdi tekrar Views altında Default altında Index.cshtml sayfasına gidip ilgili componenti çağırıyoruz.
@{
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")
@await Component.InvokeAsync("_DefaultOurClientsComponentPartial")
@await Component.InvokeAsync("_DefaultSubFeatureComponentPartial")
Tekrar test için projeyi ayağa kaldırdığımızda göreceğimiz ekran şöyle olmalı;
Günün İlanları Componentinin Oluşturulması
İlgili komponentin ismi şu olacak;
_DefaultDiscountOfDayComponentPartialHemen ViewComponents altında HomePage altında ilgili class’ı tanımlayalım.
using System;
using Microsoft.AspNetCore.Mvc;
namespace RealEstate_Dapper_UI.ViewComponents.HomePage
{
public class _DefaultDiscountOfDayComponentPartial:ViewComponent
{
public IViewComponentResult Invoke()
{
return View();
}
}
}
Ardından Shared > Components altında metodun ismi ile bir klasör oluşturup içerisinde Default adında bir Razor View ekliyoruz. Default dosyasının kodları ise şu şekilde;
<section>
<div class="w3l-news" id="news">
<section id="grids5-block" class="py-5">
<div class="container py-lg-5 py-md-4 py-2">
<h3 class="title-big text-center">Tips and Advices</h3>
<div class="row mt-lg-5 mt-4 pt-3">
<div class="col-lg-4 col-md-6 mt-md-0 mt-sm-4">
<div class="grids5-info">
<span class="posted-date">
<a href="#blog-single">
<span class="small">2020</span>
<span class="big">16</span>
<span class="small">October</span>
</a>
</span>
<a href="#blog-single" class="d-block zoom">
<img src="~/starter/assets/images/p1.jpg" alt=""
class="img-fluid news-image" />
</a>
<div class="blog-info">
<a href="#category" class="category">Uncategorized</a>
<h4><a href="#blog-single">Retail banks wake up to digital lending this year</a></h4>
<p>Lorem ipsum dolor sit amet ad minus libero ullam ipsam quas earum!</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mt-md-0 mt-5">
<div class="grids5-info">
<span class="posted-date">
<a href="#blog-single">
<span class="small">2020</span>
<span class="big">19</span>
<span class="small">October</span>
</a>
</span>
<a href="#blog-single" class="d-block zoom">
<img src="~/starter/assets/images/p2.jpg" alt=""
class="img-fluid news-image" />
</a>
<div class="blog-info">
<a href="#category" class="category">Uncategorized</a>
<h4><a href="#blog-single">A digital prescription for the pharma industry</a></h4>
<p>Lorem ipsum dolor sit amet ad minus libero ullam ipsam quas earum!</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mt-lg-0 mt-5">
<div class="grids5-info">
<span class="posted-date">
<a href="#blog-single">
<span class="small">2020</span>
<span class="big">20</span>
<span class="small">October</span>
</a>
</span>
<a href="#blog-single" class="d-block zoom">
<img src="~/starter/assets/images/p3.jpg" alt=""
class="img-fluid news-image" />
</a>
<div class="blog-info">
<a href="#category" class="category">Uncategorized</a>
<h4><a href="#blog-single">Harvest great ideas from your company’s best assets</a></h4>
<p>Lorem ipsum dolor sit amet ad minus libero ullam ipsam quas earum!</p>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</section>Şimdi Views > Default altında Index.cshtml dosyasına giderek yeni komponentimizi çağırabiliriz.
@{
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")
@await Component.InvokeAsync("_DefaultOurClientsComponentPartial")
@await Component.InvokeAsync("_DefaultSubFeatureComponentPartial")
@await Component.InvokeAsync("_DefaultDiscountOfDayComponentPartial")
Tekrar testimizi yapalım. Bunun için projeyi ayağa kaldıralım.
Marakalar Componentinin Oluşturulması
Componentimizin adı şu olacak;
_DefaultBrandComponentPartialHemen metodunu oluşturmak için ViewComponents > HomePage altında bir sınıf tanımlıyoruz ve kodlarını da şu şekilde güncelliyoruz.
using System;
using Microsoft.AspNetCore.Mvc;
namespace RealEstate_Dapper_UI.ViewComponents.HomePage
{
public class _DefaultBrandComponentPartial:ViewComponent
{
public IViewComponentResult Invoke()
{
return View();
}
}
}
Ardından Shared > Components > _DefaultBrandComponentPartial klasörü oluşturup içerisine Razor View ile Default dosyası oluşturuyoruz. Kodlarını ise şu şekilde yapıyoruz;
<section class="w3l-companies-hny-6 py-5">
<!-- /grids -->
<div class="container py-md-3">
<div class="row">
<div class="col-lg-2 col-md-4 col-6 column">
<div class="company-gd">
<a href="#client"><img class="img-responsive" src="~/starter/assets/images/client1.png" alt="client"> </a>
</div>
</div>
<div class="col-lg-2 col-md-4 col-6 column">
<div class="company-gd">
<a href="#client"><img class="img-responsive" src="~/starter/assets/images/client2.png" alt="client"> </a>
</div>
</div>
<div class="col-lg-2 col-md-4 col-6 column mt-md-0 mt-4">
<div class="company-gd">
<a href="#client"><img class="img-responsive" src="~/starter/assets/images/client3.png" alt="client"> </a>
</div>
</div>
<div class="col-lg-2 col-md-4 col-6 column mt-lg-0 mt-4">
<div class="company-gd">
<a href="#client"><img class="img-responsive" src="~/starter/assets/images/client4.png" alt="client"> </a>
</div>
</div>
<div class="col-lg-2 col-md-4 col-6 column mt-lg-0 mt-4">
<div class="company-gd">
<a href="#client"><img class="img-responsive" src="~/starter/assets/images/client5.png" alt="client"> </a>
</div>
</div>
<div class="col-lg-2 col-md-4 col-6 column mt-lg-0 mt-4">
<div class="company-gd">
<a href="#client"><img class="img-responsive" src="~/starter/assets/images/client6.png" alt="client"> </a>
</div>
</div>
</div>
</div>
<!-- //grids -->
</section>Sonrasında ise componentimizi çağırmak kalıyor. Bunun içinde Views > Default > Index dosyasına gidip componenti çağırıyoruz.
@{
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")
@await Component.InvokeAsync("_DefaultOurClientsComponentPartial")
@await Component.InvokeAsync("_DefaultSubFeatureComponentPartial")
@await Component.InvokeAsync("_DefaultDiscountOfDayComponentPartial")
@await Component.InvokeAsync("_DefaultBrandComponentPartial")
Yine bir test edelim bakalım kodlarımız doğru mu çalışıyor.
Footer Alanının Componentinin Oluşturulması
Footer için kullanacağımız Component ismi;
_DefaultFooterComponentPartialHemen metodumuzu tanımlamak ile başlayalım. Bunun için yapmamız gereken ViewComponents > HomePage klasörünün içerisine belirttiğim isim ile bir class tanımlamak ve kodları şu şekilde düzenlemek;
using System;
using Microsoft.AspNetCore.Mvc;
namespace RealEstate_Dapper_UI.ViewComponents.HomePage
{
public class _DefaultFooterComponentPartial:ViewComponent
{
public IViewComponentResult Invoke()
{
return View();
}
}
}
Ardından Shared > Components > _DefaultFooterComponentPartial klasörü oluşturup içerisine Razor View ile Default dosyası oluşturuyoruz. Kodlarını ise şu şekilde yapıyoruz;
<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>
Şimdi unutmadan bu kısmı daha önceki derslerde zaten layout içerisinde kullandık. Dolayısıyla daha öncekilerde yaptığımız gibi Views > Default > Index dosyasında çağırmayacağız. Bunu Shared > _DefaultLayout.cshtml dosyasında çağıracağız. Ve daha önceden eklediğimiz bu alanı silmeyi de unutmuyoruz. Aksi halde iki kez gözükecektir.
<!--
Author: W3layouts
Author URL: http://w3layouts.com
-->
<!doctype html>
<html lang="en">
@await Component.InvokeAsync("_HeaderViewComponentPartial")
<body>
<!--header-->
@await Component.InvokeAsync("_NavbarViewComponentPartial")
<!--/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 -->
@await Component.InvokeAsync("_DefaultFooterComponentPartial")
<!-- 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>
_DefaultLayout.cshtml dosyamız yukarıdaki gibi olacak.
DefaultLayout’taki Scriptlerin Component Haline Getirilmesi
Bu component için kullanacağımız isim;
_DefaultScriptComponentPartialViewComponents > HomePage altında bir class oluşturalım. Kodları şu şekilde düzenleyelim;
using System;
using Microsoft.AspNetCore.Mvc;
namespace RealEstate_Dapper_UI.ViewComponents.HomePage
{
public class _DefaultScriptComponentPartial:ViewComponent
{
public IViewComponentResult Invoke()
{
return View();
}
}
}Ardından Shared > Components > _DefaultScriptComponentPartial klasörü oluşturup içerisine Razor View ile Default dosyası oluşturuyoruz. Kodlarını ise şu şekilde yapıyoruz;
<!-- 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>Ardından _DefaultLayout.cshtml dosyasında bu componenti çağıralım.
<!--
Author: W3layouts
Author URL: http://w3layouts.com
-->
<!doctype html>
<html lang="en">
@await Component.InvokeAsync("_HeaderViewComponentPartial")
<body>
<!--header-->
@await Component.InvokeAsync("_NavbarViewComponentPartial")
<!--/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 -->
@await Component.InvokeAsync("_DefaultFooterComponentPartial")
@await Component.InvokeAsync("_DefaultScriptComponentPartial")
</body>
</html>
Bakın artık _DefaultLayout dosyamız ne kadar sade ve okunabilir hale geldi. Şimdi testimizi yapalım ve her şeyin yolunda olup olmadığını kontrol edelim.
Evet sitemiz sorunsuz bir şekilde çalışıyor.
Bir sonraki bölümde görüşmek üzere…
0
Mutlu
0
Üzgün
0
Sinirli
0
Şaşırmış
0
Kötü
0
Beynim Yandı
0
Şeytani
Footer ve Script alanları “Layout” isimli klasör altında oluşturulmalıydı. Sonuçta “_DefaultLayout.cshtml” dosyasını parçalıyoruz.
Evet açıkçası videoyu izlerken bende bu şekilde bekledim. Ancak hoca bu şekilde yapmamış