Yeni bir boş Core projesi oluşturalım. İsmini UserIslemleriWeb 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.
using Microsoft.AspNetCore.Mvc;
namespace UserIslemleriWeb.Controllers
{
public class HomeController : Controller
{
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>Kullanıcı İşlemleri</title>
</head>
<body>
</body>
</html>
Projeyi kaydedip çalıştıralım. Web sayfasının hatasız bir şekilde çalıştığına emin olalım. 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 UserIslemleriWeb
@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 lang="tr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width; scale=1.0" />
<title>@ViewData["Title"] - Kullanıcı İşlemleri</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 yandaki 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. Şablon dosyasında tasarım işlemine geçelim. Menünün sol tarafta olduğu bir tasarım oluşturalım. Şablonumuz aşağıdaki gibi olacaktır.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width; scale=1.0" />
<title>@ViewData["Title"] - Kullanıcı İşlemleri</title>
<link href="~/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.4/font/bootstrap-icons.css">
<script src="~/lib/jquery/jquery.min.js"></script>
<script src="~/lib/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid bg-light min-vh-100">
<div class="row">
<div class="col-md-3 mt-3">
<div class="list-group">
<a href="#" class="list-group-item disabled">
<h5>Kullanıcı İşlemleri</h5>
</a>
<a class="list-group-item" href="#">
<i class="bi bi-house-check-fill"></i> Ana Sayfa
</a>
<a class="list-group-item" href="#">
<i class="bi bi-people-fill"></i> Kullanıcı Listesi
</a>
<a class="list-group-item" href="#">
<i class="bi bi-person-fill-add"></i> Kullanıcı Ekle
</a>
</div>
</div>
<div class="col-md-9 mt-3">
@RenderBody()
</div>
</div>
</div>
</body>
</html>
Projeyi kaydedip çalıştıralım. Tasarımı ekranda görürsünüz. Ana Sayfa linkine tıkladığımıızda bu sayfanın gelmesini sağlayalım.
<a class="list-group-item" href="/Home/Index">
<i class="bi bi-house-check-fill"></i> Ana Sayfa
</a>