Takip Edin

ASP.NET MVC

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

asp.net mvc teknoloji bloğu - Kategori Menüsü ö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, kategoriler için bir partial view oluşturulacak ve bu partial view’de tanımlı kategori listesi, kategori menüsüne sahip olan sayfalarda RenderAction( ) metodu aracılığıyla gösterilecektir.

Öncelikle Solution Explorer penceresinde Controllers klasörü altında bulunan CategoryController.cs dosyasını açalım:

asp.net mvc teknoloji bloğu - CategoryController.cs dosyası açılış yeri

Bu dosya içerisinde KategoriListesi adında bir PartialViewResult metodu oluşturalım:

asp.net mvc teknoloji bloğu - KategoriListesi adında bir partialviewresult oluşturma

PartialView’e sağ tıklayıp Add View diyelim:

asp.net mvc teknoloji bloğu - partialview'e sağ tıklayıp add => view'i tıkladık

Karşımıza gelen Add View penceresinde Create as a partial view seçeneğini işaretleyip Add butonuna basalım:

asp.net mvc teknoloji bloğu - partial view oluşturmak için karşımıza çıkan add view penceresi

Oluşturduğumuz KategoriListesi.cshtml dosyasına aşağıdaki kodları yapıştıralım. Bu sayede kategoriler, sayfada dinamik bir şekilde görünecektir:

@model IEnumerable<TeknolojiBlogu.Models.Category>

<div class="card bg-dark p-2 pt-4 text-center">
    <h4 class="text-light">Blog Kategorileri</h4>
    <hr class="border-light" />
    <div class="row">
        @foreach (var item in Model)
        {
            <div class="col-lg-6">
                <ul class="list-unstyled">
                    <li>
                        <a href="#" class="text-light text-decoration-none">@item.KategoriAdi</a>
                    </li>
                </ul>
            </div>
        }
    </div>
</div>

Home klasörü altındaki Index.cshtml dosyasını açalım. SagKolon section’ının içerisinde bulunan kategori menüsü ile ilgili kodları silelim:

asp.net mvc teknoloji bloğu - Home klasörü altındaki Index.cshtml dosyasında bulunan kategori menüsü ile alakalı eski kodlar

Bu kodlar yerine, RenderAction metodu oluşturarak kategori menüsünü sayfaya getirelim:

asp.net mvc teknoloji bloğu - Home klasörünün altındaki Index.cshtml dosyasında kategori menüsü RenderAction metoduyla oluşturuldu

Blog klasörü altındaki Details.cshtml dosyasını açalım ve Index.cshtml dosyasında yaptığımız gibi SagKolon section’ının içerisinde bulunan kategori menüsü ile ilgili kodları silelim:

asp.net mvc teknoloji bloğu - Details.cshtml dosyasında bulunan kategori menüsü ile alakalı silinecek kodlar

Bu kodlar yerine Index.cshtml’deki gibi RenderAction metodu oluşturarak sayfaya kategori menüsünü getirelim:

asp.net mvc teknoloji bloğu - RenderAction metoduyla Blog klasörü altındaki Details.cshtml dosyasında RenderAction metoduyla kategori menüsünün getirilmesi

Uygulamayı çalıştırıp /Home/Index sayfasını açalım:

asp.net mvc teknoloji bloğu - RenderAction metoduyla oluşturulan kategori menüsünü /Home/Index sayfasında kontrol etme

Görüldüğü üzere RenderAction metoduyla Home klasörü altındaki Index.cshtml dosyasına getirilen Kategori menüsü, sayfada sorunsuz bir şekilde çalıştı.

Bu sayfada bulunan bloglardan herhangi birine ait olan Devamını Oku butonuna tıklayalım ve /Blog/Details sayfasını kontrol edelim:

asp.net mvc teknoloji bloğu - RenderAction metoduyla oluşturulan kategori menüsünü /Blog/Details sayfasında kontrol etme

Index.cshtml dosyasında olduğu gibi RenderAction metoduyla Blog klasörü altındaki Details.cshtml dosyasına getirilen Kategori menüsü, sayfada sorunsuz bir şekilde çalıştı.

Devamını oku

Popüler

error: Content is protected !!