Erkan KESER

Asp.Net Core ile Sqlite Veritabanı kullanarak Kitap Listesi Uygulaması yapma

Bu yazıda Entity Framework (EF) kullanarak Sqlite veritabanına Asp.NET Core  ile nasıl bağlanılır, Model Form Doğrulama konularıyla ilgili bilgiler yer alıyor.

Uygulama Açıklama: Kitap Listesi Uygulaması, KitapModel(Id, KitapAd, YazarAd, Fiyat)' e göre SqLite ile CRUD(Create, Read, Update, Delete) işlemlerini yapan ve ekleme yada güncelleme işleminde Model form doğrulamasını sunucu taraflı yapan uygulama en basit haliyle anlatılmaktadır. 

Önkoşullar 

  • Visual Studio Code - (ve Eklenti paketler .Net Core Pack )
  • .NET Core SDK 8 

Proje öncesinde sisteminizde bulunması gereken uygulamalar yukarıda listelenmiştir.

Adım 1: Proje Klasörü oluştur ve mvc deseni ekle

projem klasörümüz KitapListesi olsun. klasörü vs code uygulamasına bağladıktan sonra komut satırına(cmd) geçerek mvc deseni ekleyelim.

komut satırına

dotnet new mvc 

komutu girilerek mvc deseni projeye dahil edilir.

Adım 2: Gerekli Paketleri Kur.  (Bağımlılıklar - Dependencies)

projeye Entity Framework (EF) konutlarını kullanmak ve sqlite bağlantı komutlarını kullanabilmek için bağımlılıkların kurulması gereklidir. Bunun için 

komut satırına komutları sırasıyla girilerek bağımlılıklar projeye dahil edilir.

dotnet add package Microsoft.EntityFrameworkCore.Design
dotnet add package Microsoft.EntityFrameworkCore.Sqlite

Adım 3: Model oluştur

Model klasörü içerisine KitapModel.cs isimli bir sınıf(Class) oluşturun.(Model Klasörü> fare Sağ tuş > new c# > class) Model içerisinde tutulmak istenilen bilgileri özellikler şeklinde belirleyin.

Models/KitapModel.cs  Dosyası içeriği. (Kendi Projenizi aşağıdaki kodlara göre düzenleyin.)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using System.ComponentModel.DataAnnotations;
namespace KitapListesi.Models
{
   public class KitapModel
   {
       [Key]
       public int Id { get; set; }
       [Display(Name="Kitap Adı")]
       [Required(ErrorMessage = "Kitap Adı Giriniz.")]
       public string KitapAd { get; set; }
       [Display(Name="Yazar Adı")]
       [Required(ErrorMessage = "{0} Alanını doldur")]
       public string YazarAd { get; set; }
       [Display(Name="Kitap Fiyatı")]
       [Range(1, int.MaxValue, ErrorMessage = "1 veya daha büyük bir değer giriniz.")]
       public int Fiyat { get; set; }
   }
}

Not: Özelikleri vscode eklenti kısayolu olan prop ifadesini yazarak hızlıca ekleyebilirsiniz.

Adım 4: DBContext Oluşturun ve Bağlantı Cümlesi Ekleyin

Proje Ana Klasörü içerisine Data diye bir klasör oluşturun. Data klasörü içerisine AppDbContext.cs isimli yeni bir dosya oluşturarak aşağıdaki kodun yazabilirsiniz. yada vsCode uygulamanızda eklenti yüklüyse ef-dbcontext kısayolu ile context kodlarını yazdırın. Uygulamada sqlite kullanıldığı için bunu UseSqlite cümlesine çeviriyoruz.

Data/AppDbContext.cs  Dosyası içeriği. (Kendi Projenizi aşağıdaki kodlara göre düzenleyin.)

using Microsoft.EntityFrameworkCore;
namespace KitapListesi.Models {
   public class AppDbContext : DbContext {
   
       protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
       {
           optionsBuilder.UseSqlite("Data Source=./wwwroot/KitapListesi.db");
       }
       public DbSet<KitapModel> Kitaplar { get; set; }
   }
}

Adım 5: Uygulama başlangıcında veritabanı ilişkisini ayarlama

Uygulamayı Sqlite Veritabanını kullanacak şekilde yapılandırın. Program.cs dosyasını açın ve aşağıdaki değişiklikleri yapın.

using KitapListesi.Models;

var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddControllersWithViews();

// Context Bağlama içik eklenecek kısım
builder.Services.AddDbContext<AppDbContext>();

var app = builder.Build();
.... 
Diğer Kodlar

Not: Dosya başına using ifadesi ile Models klasörünün kendiliğinden eklenmesi gerekir. Aksi halde ekleyiniz. (using proje_ismi.Models;)

Adım 6: Migrations - Veritabanı için Sql Cümlesi oluşturma 

Migration, veritabanı ve içerisindeki tabloları oluşturmak için sql cümlesini oluşturma işlemidir.

Migrations işlemi için model ve context oluşturulduktan sonra komut satırına aşağıdaki kod yazılır.

dotnet ef migrations add init

Migrations sonrası oluşturulan sql cümlesini veritabanına dönüştürmek için komut satırına aşağıdaki kod yazılır.

dotnet ef database update

Not: Komutlar çalışmıyorsa projedeki bin klasörünü silip, dotnet watch ile projeyi izleme modunda çalıştırmayı deneyin. 

Bu adım sonrasında veritabanı dosyası oluşmuş olmalıdır.

Adım 7: Controller - Veritabanı Bağlantısı  

Bu proje için bir KitapController oluşturalım. Controllers klasörü içerisinde KitapController.cs dosyası oluşturup. vscode eklentisi ile mvc-controller komutuyla şablon controller oluşturulabilir. Sonrasında Controller ile veritabanı, context değişkeni ile bağlantısı sağlanır.

Controllers/ KitapController.cs Dosyası içeriğinde ilgili değişikliği yapın.

 private readonly AppDbContext _context;
 public KitapController(AppDbContext context)
  {
    _context = context;
  }

Adım 8: Listeleme Sayfası - Kitap Listesi 

Projede Controller olarak KitapController kullanılacak ve Index action ı Kayıtlı kitapların listelendiği olacak. 

Controllers/ KitapController.cs Dosyası index action içeriği.

public IActionResult Index()
       {
           var kitaplar = _context.Kitaplar.ToList();
           return View(kitaplar);
       }    

KitapController.cs dosyasındaki Index action'ı düzenledikten sonra view klasörü içinde Kitap klasörü altına Index.cshtml dosyasını oluşturuyoruz. (action içerindeki  view() kısmı üzerine gelerek fare sağ tuşu ile add view - go to view  komutları ile daha hızlı işlem yapılabilir. )

Views/ Kitap/ Index.cshtml Dosyası içeriği.

@model List<KitapModel>
@{
   ViewData["Title"] = "Kitap Listesi";
}
<div class="jumbotron">
   <h1 class="text-center">@ViewData["Title"]</h1>
</div>
<table class="table table-bordered">
   <thead class="thead-light">
       <tr>
           <th>
               Kitap Adı
           </th>
           <th>
               Yazar Adı
           </th>
           <th>
               Fiyatı
           </th>
           <th>
               <a asp-action="EkleDuzenle">Yeni Kitap</a>
           </th>
       </tr>
   </thead>
   <tbody>
       @for (int i = 0; i < Model.Count; i++)
       {
           <tr>
               <td>
                   @Model[i].KitapAd
               </td>
               <td>
                   @Model[i].YazarAd
               </td>
               <td>
                   @Model[i].Fiyat
               </td>
               <td>
                   <a asp-action="EkleDuzenle" asp-route-id="@Model[i].Id">Duzenle</a> |
                   <a asp-action="Sil" asp-route-id="@Model[i].Id">Sil</a>
               </td>
           </tr>
       }
   </tbody>
</table>

Adım 9: EkleDuzenle Sayfası

Projede kitap ekleme ve kitap düzenleme işlemlerini aynı action içerisinde yapacağız.

Controllers klasörü içindeki KitapController.cs (Controllers/ KitapController.cs) dosyasına EkleDuzenle action'ı ekliyoruz. ( mvc-action kısayolu kullanılabilir. )

Controllers/ KitapController.cs Dosyası EkleDuzenle action içeriği.

public IActionResult EkleDuzenle(int? id)
{
   KitapModel kitap = new KitapModel();
   if (id > 0)
       kitap = _context.Kitaplar.FirstOrDefault(x => x.Id == id);
   return View(kitap);
}
[HttpPost]
public IActionResult EkleDuzenle(KitapModel kitap)
{
   if (ModelState.IsValid)
   {
       if (kitap.Id > 0)
       {
           _context.Kitaplar.Update(kitap);
       }
       else
       {
           _context.Kitaplar.Add(kitap);
       }
       _context.SaveChanges();
       return RedirectToAction("Index");
   }
   return View(kitap);
}

Views/ Kitap/ EkleDuzenle.cshtml Dosyası içeriği.

@model KitapModel
@{
   ViewData["Title"] = Model.Id == 0 ? "Kitap Ekle" : "Kitap Düzenle";
}
<h1>@ViewData["Title"]</h1>
<hr />
<div class="row">
   <div class="col-md-4">
       <form asp-action="EkleDuzenle" autocomplete="off">
           <div asp-validation-summary="ModelOnly" class="text-danger"></div>
           <input type="hidden" asp-for="Id" />
           <div class="form-group">
               <label asp-for="KitapAd" class="control-label"></label>
               <input asp-for="KitapAd" class="form-control" />
               <span asp-validation-for="KitapAd" class="text-danger"></span>
           </div>
           <div class="form-group">
               <label asp-for="YazarAd" class="control-label"></label>
               <input asp-for="YazarAd" class="form-control" />
               <span asp-validation-for="YazarAd" class="text-danger"></span>
           </div>
           <div class="form-group">
               <label asp-for="Fiyat" class="control-label"></label>
               <input asp-for="Fiyat" class="form-control" />
               <span asp-validation-for="Fiyat" class="text-danger"></span>
           </div>
           <div class="form-group mt-2">
               <input type="submit" value="@((Model.Id == 0) ? " Kitap Ekle" : "Kitap Düzenle")"
                   class="btn btn-primary" />
           </div>
       </form>
   </div>
</div>
<div>
   <a asp-action="Index">Kitap Listesi</a>
</div>

Adım 10: Silme işlemi 

Kitap silmek için ayrı bir sayfa yapmaya gerek yok. Controllers/ KitapController.cs dosyasına Sil action'ı ekleyip Index'e yönlendirelim.

Controllers/ KitapController.cs Dosyası sil action içeriği.

public IActionResult Sil(int id)
{
   KitapModel kitap = _context.Kitaplar.FirstOrDefault(x => x.Id == id);
   if (kitap != null)
   {
       _context.Kitaplar.Remove(kitap);
       _context.SaveChanges();
   }
   return RedirectToAction("Index");
}

Adım 11: Proje Ön izleme

Anasayfa da menünün doğru gözükmesi için Views/ Shared/ _Layout.cshtml dosyasında aşağıdaki düzenlemeyi yapın.

<li class="nav-item">
      <a class="nav-link text-dark" asp-area="" asp-controller="Kitap" asp-action="Index">Kitap Listesi</a>
</li>

Sonrasında Projeyi izleme modunda çalıştıralım

komut satırına

dotnet watch