Asp.Net Core ve MVC Pattern Kullanarak BookApp Projesi (Part 2)

Merhaba, bu yazımda, daha önce başlamış olduğum BookApp projesie devam edeceğim. Önceki yazıma aşağıdaki linkten ulaşabilirsiniz:

Asp.Net Core ve MVC Pattern Kullanarak BookApp Projesi (Part 1 )

Aslında backend geliştirmekle daha çok ilgiliyim fakat bilindiği üzere sadece kod ve Postman üzerinden çalışınca projenin görseli eksik oluyor, ben de bu yüzden Bootstrap kullanarak basit bir arayüz oluşturacağım.

Öncelikle Views/Shared/_Layout.cshtml dizininde head etiketi içinde bir linkle bootstrap’i dahil ettim. title etiketi içine de BookApp başlığı ekledim. wwwroot içinde css klasörüne style.css sayfası oluşturdum, gerekli olduğunda css kodlarımızı buraya yazacağız.

_Layout.cshtml içinde title üzerine bir link daha açıp bu style.css dosyasını dahil ettim.

head etiketini bu şekilde düzenledikten sonra body’deki kodları sildim ve header, main ve footer etiketlerini oluşturdum.

Sitenin navbar’ını Shared klasörü içinde _navbar.cshtml sayfasında oluşturacağım . Bu dosyayı_Layout.cshtml’deki header etiketinde

@Html.Partial("_navbar")

ile dahil ettim. main kısmında div.container ekledim ve container’ın üstten margin değerini verdim. İçine

@RenderBody()

yazdım. footer içine de header’daki mantıkla

@Html.Partial("_footer")

yazarak navbar’daki gibi bir partial html oluşturdum. Daha sonra Shared içine _footer.cshtml sayfasını oluşturdum.

_navbar sayfasında aşağıdaki kodla bir div ekledim.

.navbar.navbar-expand-sm.bg-primary.navbar-dark

Oluşan divin içine de

.container

ile yeni bir div daha oluşturdum. Son olarak _navbar.cshtml dosyasının içeriği şu şekilde:

<div class="navbar navbar-expand-sm bg-primary navbar-dark">
 <div class="container">
 <a href="/" class="navbar-brand">Book App</a>
<ul class="navbar-nav">
<li class="nav-item">
<a href="/login" class="nav-link">Login</a>
</li>
<li class="nav-item">
<a href="/register" class="nav-link">Register</a>
</li>
</ul>
</div>
</div>

Footer kısmı için de aşağıdaki kodu kullandım:

<div class="footer py-3 mt-3">
 <div class="container">
  <span class="text-muted">
   Place Footer Content Here
  </span>
 </div>
</div>

Site için bir menü oluşturmak istedim, dolayısıyla Shared klasörü altına menu.cshtml dosyasına aşağıdaki kodu ekledim:

<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active">Link Item 1</a>
<a href="#" class="list-group-item list-group-item-action active">Link Item 2</a>
<a href="#" class="list-group-item list-group-item-action active">Link Item 3</a>
<a href="#" class="list-group-item list-group-item-action active">Link Item 4</a>
<a href="#" class="list-group-item list-group-item-action active">Link Item 5</a>
</div>

Daha sonra dönüp geliştirmek üzere bıraktım. Bu menüyü Home sayfası içinde kullanmak için Views/Home/Index.cshtml içeriğini sildim. Bir div etiketi içine iki farklı div etiketi daha ekleyerek _menu ve _books sayfalarını verdim. Kod aşağıdadır:

<div class="row">
<div class="col-md-3">
@Html.Partial("_menu")
</div>
<div class="col-md-9">
@Html.Partial("_books")
</div>
</div>

Home klasörü içine, _books.cshtml sayfasını oluşturdum. wwwroot içinde img klasörü oluşturup, kitapların kapakları .jpg olarak ekledim. _books.cshtml içine aşağıdaki örnek modelde div etiketleri oluşturdum:

<div class="card mb-3">
<div class="row no-gutter">
<div class="col-md-3">
<img src="~/img/1.jpg" alt="" class="card-img">
</div>
<div class="col-md-9">
<div class="card-body">
<h5 class="card-title">
It
</h5>
<p class="card-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, impedit.
</p>
<p class="card-text">
<small class="text-muted">
3 days ago
</small>
</p>
</div>
</div>
</div>
</div>

wwwroot/css/style.css içine footer için background değeri verdim.

.footer {
background-color:#f5f5f5
}

Buradaki problem, 5 ayrı div oluşturup hepsinin değerlerini kendimiz eklemiş olmamız. Bunu engellemek için Repository.cshtml içinde oluşturduğumuz modelleri çekmemiz gerekiyor. Öncelikle_books.cshtml içindeki diğer divleri silerek bir tanesini bıraktım. Bunu şablon olarak kullanacağım.

En başa kullanacağım modeli yazdım.

@model IEnumerable<Book>

Böylece elimize kitaplardan oluşan bir liste gelmiş oldu. foreach döngüsü içine oluşturduğumuz div etiketlerini kopyaladım.

img etiketini aşağıdaki şekilde değiştirerek sayfanın yapısını değiştirdim:

<img src="~/img/@book.ImageUrl" alt="" class="card-img">

Aynı mantıkla diğer divleri de değiştirdim. Ardından HomeController’a giderek Index içindeki View kısmına Repository.Books yazarak modeli çağırdım. Çağırdığım kitap modelleri Repository içinden sırayla geldi ve son olarak sayfa şöyle oldu:

Index.cshtml sayfasına da Book Model’ı aynı şekilde ekledim. Ardından bu sayfadaki _books’un yanına Model ekleyerek, model’dan gelen bilgileri _books’a aktardım.

Bu yazımı burada sonlandırıyorum, içerik boyunca bootstrap ile basit bir front end oluşturduk ve Model’ler ile liste halindeki kitapları bu siteye ekledik. Diğer yazımda görüşmek üzere, okuduğunuz için teşekkürler.

Kodun github linki aşağıdaki şekildedir:

https://github.com/serapbaysal/ChooseBookApp