Personel bilgilerine ait sanal veritabanı bilgilerini web sayfasında görüntülemiştik. Burada dikkat ettiyseniz herhangi bir tasarım ve menü yapısı kullanmadık. Halbuki personel işlemlerini gerçekleştirmek için bir menü yapısına ve tasarımla farklı sayfaların gösterilmesine ihtiyaç vardır. Şimdi bu işlemleri gerçekleştirelim. Öncelikler şu sorulara cevap bulmaya çalışalım.
Web sayfası eklendiğinde bootstrap ve jquery kütüphaneleri her defasında yüklenmek zorundamıdır. Hayır.
Web sayfasına model binding aracılığıyla bilgi gönderildiğinde veri tipi için proje isminin her defasında yazılması gereklimidir. Hayır.
Tüm web sayfalarında aynı olan üst taraf, menüler, alt taraf, yan tarafta yer alan seçenekler her defasında web sayfasında yapılmak zorundamıdır. Hayır
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 = "_Layout";
}
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 PersonelWeb
@using PersonelWeb.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
Hatırlarsanız Index dosyasında modeli eklerken bu tanımlamaları yapmıştık. Artık bu tanımlamaları yapmamıza gerek kalmadan işlemleri yapabileceğiz. Index dosyasının tamamını silelim ve aşağıdaki gibi düzenleyelim. Ayrıca controller tarafında veri tabanının eklenmesi için yapılan tüm işlemleri silelim. Çünkü personel listeslini başka bir controller aracılığıyla gerçekleştireceğiz.
@{
ViewData["Title"] = "Ana Sayfa";
}
Burada hem web sayfasında title etiketi kullanıldı hem de ViewData ile web sayfasının başlığı verildi. Bunun ne zaman işe yarayacağını daha sonra açıklayacağım. Devam edelim. _Layout ana sayfasının oluşturulması için view klasörü altında Shared klasörü oluşturalım. Bu klasör altına _Layout 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, initial-scale=1">
<title>@ViewData["Title"] - Personel Yönetimi</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>
@RenderBody()
</body>
</html>
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 _layout 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-5">Personel Yönetim Sistemine Hoşgeldiniz</h1>
<p>İşlemler için soldaki 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 css isminde bir klasör oluşturalım. Bunun altında styles bir style dosyası oluşturalım. İçeriği aşağıdaki gibi olacaktır.
body {
background: url(/img/body-bg.jpg) fixed;
background-size: cover;
margin-top: 57px;
}
.bg-navbar {
background-color: #0a4768;
}
Burada yer alan body-bg.jpg isimli dosyayı img klasörünün altına kopyalayalım. Projeyi kaydedip çalıştıralım. Web sayfasının hatasız ekrana geldiğini görürsünüz. Şimdi _Layout sayfasına navbar ekleyelim.
<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-navbar">
<div class="container">
<a class="navbar-brand" asp-controller="Home" asp-action="Index">Admin Panel</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" asp-controller="Home" asp-action="Index"><i class="bi bi-house"></i> Giriş</a>
</li>
</ul>
</div>
</div>
</nav>
Projeyi kaydedip çalıştıralım. Web sayfasının hatasız ekrana geldiğini görürsünüz. Şimdi _Layout sayfasına sol menü ve alt başlık ekleyelim.
<div class="container bg-light">
<div class="row">
<img class="img-fluid p-0" src="~/img/ust-bg.jpg" title="Personel Yönetim Sitemi">
</div>
<div class="row py-3">
<div class="col-md-3">
<div class="list-group">
<a href="#" class="list-group-item disabled">
<h5>Personel İşlemleri</h5>
</a>
<a class="list-group-item" asp-controller="PersonelYonetimi" asp-action="Index"><i class="bi bi-people-fill"></i> Personel Listesi</a>
<a class="list-group-item" asp-controller="PersonelYonetimi" asp-action="Ekle"><i class="bi bi-person-fill-add"></i> Personel Ekle</a>
</div>
</div>
<div class="col-md-9">
@RenderBody()
</div>
</div>
<div class="row bg-dark text-white p-3">
<small>Bu sitedeki çalışmalar eğitim amaçlı olarak hazırlanmıştır.
İçerik serbestçe kullanılabilir. 2024 ©</small>
</div>
</div>
Projeyi kaydedip çalıştıralım. Web sayfasının hatasız ekrana geldiğini görürsünüz.
Görüş ve önerilerinizi bize yazabilirsiniz.