Tablolar web sayfalarının en önemli özelliklerindendir. Tabloları tasarlamak için css özelliklerini kullanabilirsiniz. Html5 etiketlerinin yeni gelen özellikleriyle tablo tasarımını rahatlıkla yapabilirsiniz. Bu uygulamamızda derslerin isimlerini, birinci ve ikinci yazılı notlarını listeleyeceğiz. Bu işlemleri Core Mvc teknolojisinde TempData kullanarak yapacağız.
Visual Studio 2022 programını açalım.
Yeni bir boş Core projesi oluşturalım. İsmini BasariListesi 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=Basari}/{action=Karne}"
);
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 BasariController dosyasını oluşturalım. Aşağıdaki gibi bir action metodu oluşturulacaktır. Bu metod Karne() isimli view dosyasını döndürecektir.
public IActionResult Karne()
{
return View();
}
Break point atalım. Projeyi çalıştıralım. Karne() isimli metod çalıştırılacak ancak bu dosya Views klasöründe olmadığı için hata verecektir. Şimdi Views klasörü altında Basari klasörünü, bunun altında Karne dosyasını oluşturalım. Bu işlemi gerçekleştirmek için şu yolu takip edelim. BasariController sayfasında Karne() 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 Basari isminde bir klasör oluşturacağız hem de view sayfası html kodlarının tamamını gösterir şekilde ekrana gelecektir.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Not Listesi</title>
</head>
<body>
</body>
</html>
Projeyi çalıştıralım. Proje hatasız bir şekilde çalıştırılır. 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. Karne view dosyasına bootstrap ve jquery kütüphanelerini dahil edelim.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Not Listesi</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>
</body>
</html>
Projeyi çalıştıralım. Kütüphanelerin projeye hatasız bir şekilde eklendiğinden emin olalım. Öncelikle derslere ait gerekli bilgilerin tutulacağı Models tasarımını yapalım. Amacımız oluşturduğumuz modele ait tüm özellikleri hem view hem de controller tarafında kullanabilmek. Şimdi Models klasörü altına Notlar isminde bir class oluşturalım. Dosyanın içeriği aşağıdaki gibi olacaktır.
public class Notlar
{
public int Id { get; set; }
public string? DersAdi { get; set; }
public int Yazili1 { get; set; }
public int Yazili2 { get; set; }
}
Bu kalıba göre verileri almış olacağız. Şimdi controller tarafında ürünler listesini oluşturalım. İçine 5 adet değer girelim.
public IActionResult Karne()
{
var liste = new List<Notlar>
{
new Notlar{Id=1, DersAdi="İngilizce",
Yazili1=100, Yazili2=80},
new Notlar{Id=2, DersAdi="Matematik",
Yazili1=40, Yazili2=70},
new Notlar{Id=3, DersAdi="Fizik",
Yazili1=30, Yazili2=80},
new Notlar{Id=4, DersAdi="Kimya",
Yazili1=50, Yazili2=60},
new Notlar{Id=5, DersAdi="Edebiyat",
Yazili1=50, Yazili2=50}
};
TempData["notList"] = liste;
return View();
}
Şimdi bu değerleri göndereceğimiz view dosyasını düzenleyelim.
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Başarı Listesi</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>
<ul>
@foreach (var liste in TempData["notList"] as
List<BasariListesi.Models.Notlar>)
{
<li>@liste.DersAdi</li>
}
</ul>
</body>
</html>
Projeyi çalıştırdığımızda derslerin listesini ekranda görürüz. Bizim yapacağımız işlem ise verileri tablo şeklinde listelemek olacaktır. Tablo tasarımımızı aşağıdaki gibi yapalım.
<div class="container mt-3">
<table class="table table-striped caption-top">
<caption>
<h2 class="text-center">
Not Listesi
</h2>
</caption>
<thead class="table-dark">
<tr>
<th>Id</th>
<th>Ders Adı</th>
<th>1. Yazılı</th>
<th>2. Yazılı</th>
</tr>
</thead>
<tbody>
@foreach (var liste in TempData["notList"] as
List<BasariListesi.Models.Notlar>)
{
<tr>
<td>@liste.Id</td>
<td>@liste.DersAdi</td>
<td>@liste.Yazili1</td>
<td>@liste.Yazili2</td>
</tr>
}
</tbody>
</table>
</div>
Projeyi çalıştırdığımızda tablomuz ekrana gelecektir. TempData deyiminin diğerlerinden farkı taşıdığı değerleri başka bir action olayına taşımasıdır. Bilgileri cookie yoluyla başka sayfalara taşıyabilir ve kullanabilirsiniz. Bu işlemi yaparken serialize ederek taşır ve değerleri yeni sayfada deserialize ederek kullanabilirsiniz. Aşağıda kodların düzenlenmiş hali vardır.
public IActionResult Karne()
{
var liste = new List<Notlar>
{
new Notlar{Id=1, DersAdi="İngilizce",
Yazili1=100, Yazili2=80},
new Notlar{Id=2, DersAdi="Matematik",
Yazili1=40, Yazili2=70},
new Notlar{Id=3, DersAdi="Fizik",
Yazili1=30, Yazili2=80},
new Notlar{Id=4, DersAdi="Kimya",
Yazili1=50, Yazili2=60},
new Notlar{Id=5, DersAdi="Edebiyat",
Yazili1=50, Yazili2=50}
};
var data = JsonConvert.SerializeObject(liste);
TempData["notList"] = data;
return RedirectToAction("Index2");
}
public IActionResult Index2()
{
var x = TempData["notList"];
if (x != null)
{
List<Notlar> notlar =
JsonConvert.DeserializeObject<List<Notlar>>(x.ToString());
}
return View();
}
Şimdi aşağıdaki işlemleri siz gerçekleştirin.
Derslere ait not ortalamasını tabloya ekleyiniz.
Yazılıların ortalamasını tablonun altında gösteriniz.
Seçilen derse ait yazılı notlarını baklava grafikte gösteriniz.