Bir web projesinde birden fazla veriyi view tarafına gönderip işlemek isteyebilirsiniz. Bununla ilgili değişik yöntemler olmasına rağmen core mvc bize tuple teknolojisiyle bu işlemi yapabileceğimizi söyler. Burada bununla ilgili bir uygulama yapacağız.
Visual Studio uygulamasını açalım.
İsmi BirdenFazlaNesneGonterimi olan yeni bir core mvc uygulaması açalım.
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.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Birden Fazla Değer 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. Index view dosyasına bootstrap ve jquery kütüphanelerini dahil edelim.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Birden Fazla Değer 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 öğrencilere 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 Ogrenciler isminde bir class oluşturalım. Dosyanın içeriği aşağıdaki gibi olacaktır.
public class Ogrenciler
{
public int OgrNo { get; set; }
public string? OgrAdi { get; set; }
public string? OgrSoyadi { get; set; }
}
Şimdi de Notlar isminde bir class dosyas oluşturalım. Dosyanın içeriği aşağıdaki gibi olacaktır.
public class Notlar
{
public int OgrNo { get; set; }
public int Y1 { get; set; }
public int Y2 { get; set; }
public int P1 { get; set; }
}
Bu kalıba göre verileri almış olacağız. Şimdi controller tarafında ogrenciler ve notlar listesini oluşturalım. İçine 3 adet değer girelim. Bu değerleri view tarafına göndermek için tuple nesnesinden yararlanalım.
public IActionResult Index()
{
var ogrliste = new List<Ogrenciler>
{
new Ogrenciler{OgrNo=11,
OgrAdi="Kamil", OgrSoyadi="Karşal"},
new Ogrenciler{OgrNo=12,
OgrAdi="Ayşe", OgrSoyadi="Fidan"},
new Ogrenciler{OgrNo=13,
OgrAdi="Mustafa", OgrSoyadi="Şahin"}
};
var ogrnotlar = new List<Notlar>
{
new Notlar{OgrNo=11,
Y1=90, Y2=90, P1=90},
new Notlar{OgrNo=12,
Y1=90, Y2=100, P1=100},
new Notlar{OgrNo=13,
Y1=70, Y2=80, P1=90},
};
var bilgiler = (ogrliste, ogrnotlar);
return View(bilgiler);
}
Şimdi bu değerleri göndereceğimiz view dosyasının başına gönderilen değerlerin tiplerine uygun tanımlamayı yapalım.
@model (List<BirdenFazlaNesneGonterimi.Models.Ogrenciler> o,
List<BirdenFazlaNesneGonterimi.Models.Notlar> n)
Öncelikle view tarafında öğrencilerin bilgilerini listeleyelim.
<ul>
@foreach (var ogrenci in Model.o)
{
<li>@ogrenci.OgrNo @ogrenci.OgrAdi @ogrenci.OgrSoyadi</li>
}
</ul>
Projeyi çalıştırdığımızda öğrencilerin listesini ekranda görürüz. Şimdi de notların listesini alalım.
<ul>
@foreach (var notlar in Model.n)
{
<li>@notlar.OgrNo @notlar.Y1 @notlar.Y2 @notlar.P1</li>
}
</ul>
Bizim yapacağımız işlem ise acordiyon yapıyı kullanarak öğrencilerle aldığı notları ilişkilendirmek olacaktır. Acordiyon tasarımımızı aşağıdaki gibi yapalım.
<div class="container mt-3">
<h2>Öğrencilere Ait Not Listesi</h2>
<p>Öğrencinin adı ve soyadı başlığına tıklayarak
notlarını görebilirsiniz.</p>
<div id="accordion">
@foreach (var ogrenci in Model.o)
{
<div class="card">
<div class="card-header">
<a class="btn" data-bs-toggle="collapse"
href="#@ogrenci.OgrNo">
@ogrenci.OgrAdi @ogrenci.OgrSoyadi
</a>
</div>
<div id="@ogrenci.OgrNo" class="collapse"
data-bs-parent="#accordion">
<div class="card-body">
Notları:
<ul>
@foreach (var not in
Model.n.Where(n => n.OgrNo == ogrenci.OgrNo))
{
<li>1. Yazılı : @not.Y1</li>
<li>2. Yazılı : @not.Y2</li>
<li>Performan : @not.P1</li>
}
</ul>
</div>
</div>
</div>
}
</div>
</div>
Projeyi çalıştırdığımızda acordiyon menü yardımıyla verileri listelemiş oluruz. Şimdi aşağıdaki işlemleri siz gerçekleştirin.
Öğrencinin not ortalamasını bulunuz.
Geçen öğrencinin başlığını yeşil, kalan öğrencinin başlığını kırmızı yapınız.
Seçilen öğrenciye ait notların oranını baklava grafikte gösteriniz.