Yeni bir boş Core projesi oluşturalım. İsmini OtomobilSatisWeb olarak belirleyelim.
Temel ayarların yapıldığı program.cs dosyasını düzenleyelim.
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddMvc();
var app = builder.Build();
app.UseDefaultFiles();
app.UseStaticFiles();
app.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}"
);
app.Run();
Projeyi çalıştıralım. Controller bulunamadığı için hata verecektir. Öncelikle MVC projesi için gerekli olan klasörleri oluşturalım. Projemizi çalıştıralım. Controllers panelinde dosya olmadığı için hata verecektir.
Şimdi Controllers klasörü içine HomeController dosyasını oluşturalım. Aşağıdaki gibi bir action metodu oluşturulacaktır. Bu metod Index() isimli view dosyasını döndürecektir.
public IActionResult Index()
{
return View();
}
Break point atalım. Projeyi çalıştıralım. Index() isimli metod çalıştırılacak ancak bu dosya Views klasöründe olmadığı için hata verecektir. Şimdi Views klasörü altında Home klasörünü, bunun altında Index dosyasını oluşturalım. Bu işlemi gerçekleştirmek için şu yolu takip edelim. HomeController sayfasında Index() metodunun içindeyken farenin sağ tuşuna basalım. Ekrana gelen içerik menüsünden Add View komutunu çalıştıralım. Çıkan form sayfasında Razor View seçeneğini seçelim ve Add butonuna basalım. Gelen ekranda Use a layout page onay kutusunu kaldıralım. Add diyerek işlemi tamamlayalım. Bu yöntemi kullanarak Views klasöründe hem Home isminde bir klasör oluşturacağız hem de view sayfası html kodlarının tamamını gösterir şekilde ekrana gelecektir.
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Otomobil İlan Sitasi</title>
</head>
<body>
</body>
</html>
Burada Layout kısmına dikkat ediniz. Biz Use a layout page onay kutusunu iptal ettiğimiz için null döndü. Ancak projemizde bir tasarım sayfası olacak ve bu sayfayı burada tanımlayacağız. Bütün web sayfalarında sabit olan yerleri ve sürekli tekrar eden kütüphaneleri ve modelleri saklayacağımız dosyaları oluşturalım.
Core mvc projelerinde her defasında tekrar eden yapıları bir sayfada tutup istenildiğinde çağırmanız yeterli olacaktır. Hadi şimdi bunu gerçekleştirelim. Tüm web sayfalarında kullanılacak bilgilerin ve yapıların saklandığı dosyayı belirtmek için view klasöründe _ViewStart isminde bir razor page sayfası oluşturmanız gerekir. Burada masterpage dediğimiz ana şablonun ismi belirtilir. Dosyamızı oluşturalım ve içeriğini yazalım.
@{
Layout = "_Sablon";
}
Projede kullanılacak model ve yardımcı elemanların her web sayfası eklendiğinde eklenmemesi için view klasöründe _ViewImports razor page dosyası oluşturulması gerekir. Şimdi bu dosyayı ekleyelim ve gerekli tanımlamaları yapalım.
@using OtomobilSatisWeb
@using OtomobilSatisWeb.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
Index dosyasının tamamını silelim ve aşağıdaki gibi düzenleyelim.
@{
ViewData["Title"] = "Ana Sayfa";
}
_Sablon ana sayfasının oluşturulması için view klasörü altında Shared klasörü oluşturalım. Bu klasör altına _Sablon razor page sayfasını oluşturalım. Sayfanın tasarımını aşağıdaki gibi yapalım.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>ViewBag.Title - Otomobil İlan Sitesi</title>
</head>
<body>
<div>
@RenderBody()
</div>
</body>
</html>
Projeyi kaydedip çalıştıralım. Proje başlığına dikkat edin. Ana Sayfa kelimesi Index sayfasından gelmektedir. Projede bootstrap ve jquery kütüphanelerini yüklemek için wwwroot klasörünü ekleyelim. Projeye bootstrap eklemek için proje isminin üzerinde farenin sağ tuşuna basalım. Ekrana gelen içerik menüsünden Add diyelim. Burada yer alan komutlardan Client-Side Library komutunu çalıştıralım. Ekrana gelen form sayfasında library kutusuna bootstrap yazalım. Install diyerek kurulum işlemini tamamlayalım. Aynı komutu kullanarak projeye jquery kütüphanesini de ekleyelim. _Sablon view dosyasına bootstrap ve jquery kütüphanelerini dahil edelim.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewData["Title"] - Otomobil İlan Sitesi</title>
<link href="~/lib/bootstrap/css/bootstrap.min.css"
rel="stylesheet" />
<script src="~/lib/jquery/jquery.min.js"></script>
<script src="~/lib/bootstrap/js/bootstrap.min.js">
</script>
</head>
<body>
<div>
@RenderBody()
</div>
</body>
</html>
Projeyi çalıştıralım. Kütüphanelerin projeye hatasız bir şekilde eklendiğinden emin olalım. Gördüğünüz gibi bootstrap ve jquery kütüphanelerini burada tanımlıyoruz. ViewData ile başlığı burada görüntülüyoruz. Burada en önemli komut @RenderBody komutudur. Bu _Sablon sayfasını kullanan diğer web sayfalarının içerikleri bu komut sayesinde görüntülenmektedir. Şimdi Index sayfasını aşağıdaki gibi düzenleyelim.
@{
ViewData["Title"] = "Ana Sayfa";
}
<div class="text-center">
<h1 class="display-4">Hoşgeldiniz</h1>
<p>İşlemler için yukarıdaki menüyü kullanabilirsiniz.</p>
</div>
Projeyi kaydedip çalıştıralım. Web sayfasının hatasız bir şekilde ekrana geldiğini görürsünüz. Şimdi wwwroot klasörü altında resimleri saklamak için img klasörü oluşturalım. Bunun altına resimleri kopyalayalım. Stil işlemleri için css isminde bir klasör oluşturalım. Bunun altında styles isminde bir style dosyası oluşturalım. İçeriği aşağıdaki gibi olacaktır.
body{
background-image: url(../img/body-bg.jpg);
background-size: cover;
background-attachment: fixed;
}
Tanımladığımız bu css dosyasını _Sablon dosyasına dahil edelim. Ayrıca bootstrap için kullanılan iconların görüntülenmesi için gerekli olan kütüphaneyi de dahil edelim.
<link rel="stylesheet" href="https://cdn.jsdelivr.net
/npm/bootstrap-icons@1.10.4/font/bootstrap-icons.css">
<link href="~/css/styles.css" rel="stylesheet" />
Projeyi kaydedip çalıştıralım. Tasarım dosyaları arasında yer alan index dosyasını açalım ve body etiketi arasındaki tüm kodları seçip buraya kopyalayalım. Projeyi kaydedip çalıştıralım. Web sayfasının hatasız ekrana geldiğini görürsünüz.