Takip Edin

ASP.NET MVC

Asp.Net MVC İle Temel Düzeyde Teknoloji Blog Sitesi Yapımı – Blog ve Kategori Tabloları

asp.net mvc teknoloji bloğu - blog ve kategori tabloları öne çıkan görsel
Asp.Net MVC İle Temel Düzeyde Teknoloji Blog Sitesi Yapımı
Proje Şablonu
Entity Sınıfları
Context Sınıfı
Database Initialization
Connection String
Controller
Blog ve Kategori Tabloları
Anasayfa Blog Listesi
Blog ve Kategori Ekleme Formu
Blog ve Kategori Güncelleme Formu
Kayıt Detay Sayfası
Layout
Kategori Menüsü
Blog Filtreleme
Blog Arama Kutusu

Bu yazıda, BlogController ve CategoryController aracılığıyla kayıt listeleme işlemleri ele alınacaktır.

Öncelikle Solution Explorer penceresinde, Views klasörü altındaki Blog klasörü içinde bulunan Index.cshtml dosyasını açalım:

asp.net mvc teknoloji bloğu - blog klasörü altındaki index.cshtml'i açma

Açılan dosyayı düzenlemek için dosyada bulunan kodları tamamen silip aşağıdaki kodları dosyaya yapıştıralım:

@model IEnumerable<TeknolojiBlogu.Models.Blog>

@{
    ViewBag.Title = "Index";
}

<h2>Blog Listesi</h2>
<hr />

<p>
    @Html.ActionLink("Yeni Blog Ekle", "Create", null, new { @class = "btn btn-primary" })
</p>

<table class="table table-bordered table-striped table-hover">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Category.KategoriAdi)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Baslik)
        </th>       
        <th>
            @Html.DisplayNameFor(model => model.Resim)
        </th>       
        <th>
            @Html.DisplayNameFor(model => model.EklenmeTarihi)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Onay)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Anasayfa)
        </th>
        <th style="width: 195px;"></th>
    </tr>

    @foreach (var item in Model)
    {
<tr>
    <td>
        @Html.DisplayFor(modelItem => item.Category.KategoriAdi)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.Baslik)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.Resim)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.EklenmeTarihi)
    </td>
    <td>
        @if (item.Onay)
        {
            <span class="badge badge-success">Onaylı</span>
        }
        else
        {
            <span class="badge badge-danger">Onay Bekliyor</span>
        }
    </td>
    <td>
        @if (item.Anasayfa)
        {
            <span class="badge badge-success">Anasayfa</span>
        }
        else
        {
            <span class="badge badge-danger">Anasayfada Değil</span>
        }
    </td>
    <td>
        @Html.ActionLink("Edit", "Edit", new { id = item.Id }, new { @class = "btn btn-warning btn-sm mb-2" })
        @Html.ActionLink("Details", "Details", new { id = item.Id }, new { @class = "btn btn-primary btn-sm mb-2" })
        @Html.ActionLink("Delete", "Delete", new { id = item.Id }, new { @class = "btn btn-danger btn-sm mb-2" })
    </td>
</tr>
    }

</table>

Yukarıda bulunan kodları Index.cshtml dosyasına yapıştırdıktan sonra IIS Express (Google Chrome) butonuna bastığımızda /Blog/Index sayfasında olan tarayıcı görüntüsü, aşağıdaki gibi olacaktır:

asp.net mvc teknoloji bloğu - blog klasörü altındaki index view'inin tarayıcı görüntüsü

/Category/Index sayfasını ise kategori adını ve her kategoriye bağlı blog sayısını gösterecek şekilde ayarlayalım.

İlk olarak Models klasörüne sağ tıklayıp Add => Class bölümünü seçelim:

asp.net mvc teknoloji bloğu - model add category class

Sınıfın ismini CategoryModel koyalım:

asp.net mvc teknoloji bloğu - CategoryModel classı ekleme

CategoryModel sınıfı içerisine özelliklerimizi ekleyelim:

asp.net mvc teknoloji bloğu - CategoryModel sınıfı içerisine property'ler ekleme

Solution Explorer penceresinde, Category klasörünün içerisinde bulunan Index.cshtml’i açalım:

asp.net mvc teknoloji bloğu - category klasörü altındaki index view'inin bulunduğu yer

/Category/Index sayfasında, kategori adı ve blog sayısını göstereceğimiz için Index.cshtml’e gönderilecek olan modelin tipi CategoryModel olmalıdır.

asp.net mvc teknoloji bloğu - index sayfasının modelini CategoryModel yapma

Ayrıca, CategoryController altındaki Index action metodundan bu sayfaya gönderilen listenin tipi Category cinsinden olduğundan bu listenin tipini de CategoryModel olarak değiştirmemiz gerekmektedir:

asp.net mvc teknoloji bloğu - index sayfasına gönderilen listenin tipinin Category olduğunu belirten resim

Index action metodunun içerisindeki kodu silip aşağıdaki resimde bulunan kodlarla değiştirelim:

asp.net mvc teknoloji bloğu - index sayfasına gönderilen listenin tipinin CategoryModel olduğunu belirten resim

Yukarıda resimde görüldüğü gibi Index.cshtml’e gönderilen listenin tipi CategoryModel olarak ayarlanmıştır.

Daha sonra, Index.cshtml dosyasında blog sayısı için tabloya başlık alanı ekleyelim.

asp.net mvc teknoloji bloğu - blog sayısı başlığı

foreach içerisine blog sayısını yazdıralım:

asp.net mvc teknoloji bloğu - foreach sorgusu içerisine blog sayısını yazdırma

Edit, Details ve Delete butonlarının stilini düzenleyelim:

asp.net mvc teknoloji bloğu - edit, details ve delete butonlarının stilini düzenleme

<table> etiketinin üzerinde bulunan actionlink’in stilini düzenleyelim:

asp.net mvc teknoloji bloğu - kategori ekle butonu

Tablonun stilini ve sütunlarının genişliğini ayarlayalım:

asp.net mvc teknoloji bloğu - tablo sütun genişliğini ayarlama

IIS Express (Google Chrome) butonuna bastığımızda /Category/Index sayfası, tarayıcıda aşağıdaki gibi gözükecektir.

asp.net mvc teknoloji bloğu - Category/Index sayfası tarayıcı görüntüsü

Devamını oku

Popüler

error: Content is protected !!