Takip Edin

ASP.NET MVC

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

asp.net mvc teknoloji bloğu - Layout ö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, _Layout.cshtml dosyasında, tek kolona sahip olan(.col-md-12) sayfalar için ayrı, iki kolona sahip olan(.col-md-8 & .col-md-4) sayfalar için ayrı düzenleme yapılacaktır.

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

asp.net mvc teknoloji bloğu - _Layout.cshtml dosyasının açılış yeri

.row sınıfına sahip olan div içerisindeki kodları silelim:

asp.net mvc teknoloji bloğu - _Layout.cshtmml dosyasında .row sınıfına sahip olan div içerisinde bulunan eski kodlar

Yerine aşağıdaki kodları yapıştıralım:

asp.net mvc teknoloji bloğu - _Layout.cshtmml dosyasında .row sınıfına sahip olan div içerisinde bulunan yeni kodlar

Böylelikle bir sayfada, SagKolon isminde bir bölüm tanımlanmışsa bu bölümün içerisindekiler haricinde o sayfada yazdığımız kodlar tarayıcıda 8’lik kolonda, tanımlanmamışsa sayfada yazdığımız tüm kodlar 12’lik kolonda gösterilecektir.

İki kolona sahip olan Home klasörü altındaki Index.cshtml dosyasını açarak gerekli düzenlemeleri yapalım. Öncelikle .row, .col-md-8 ve .col-md-4 sınıfına sahip olan div’lerin açılış ve kapanış etiketlerini silelim:

asp.net mvc teknoloji bloğu - Home klasörü altındaki Index.cshtml dosyasında .row, .col-md-4 ve .col-md-8 sınıfına sahip olan div'lerin açılış ve kapanış etiketlerinin silinmesi-1
asp.net mvc teknoloji bloğu - Home klasörü altındaki Index.cshtml dosyasında .row, .col-md-4 ve .col-md-8 sınıfına sahip olan div'lerin açılış ve kapanış etiketlerinin silinmesi-2

.col-md-4 sınıfının sahip olduğu içeriği SagKolon section’ının içerisine alalım:

asp.net mvc teknoloji bloğu - index sayfasında arama kutusu ve kategori menüsünü sagkolon section'ının içerisine alma

Yine iki kolona sahip olan Blog klasörü altındaki Details.cshtml dosyasını açarak gerekli düzenlemeleri yapalım. Öncelikle .row, .col-md-8 ve .col-md-4 sınıfına sahip olan div’lerin açılış ve kapanış etiketlerini silelim:

asp.net mvc teknoloji bloğu - blog klasörü altındaki details.cshtml dosyasında .row, .col-md-8 ve .col-md-4 sınıflarına sahip olan div elemanlarının silinmeden önceki hali

.col-md-4 sınıfının sahip olduğu içeriği, SagKolon section’ının içerisine alalım:

asp.net mvc teknoloji bloğu - blog klasörü altındaki details.cshtml dosyasında SagKolon section'ınını sayfaya yerleştirme

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

asp.net mvc teknoloji bloğu - Home/Index sayfasının SagKolon section'ı eklendikten sonraki tarayıcı görüntüsü

Görüldüğü gibi /Home/Index sayfasının, önceki(SagKolon sectionu eklenmeden önceki hâli) tarayıcı görüntüsüyle arasında hiçbir fark bulunmamaktadır.

Yine iki kolona sahip olan /Blog/Details sayfasının kontrolünü yapalım. Bunun için /Home/Index sayfasında bulunan herhangi bir bloğa ait olan Devamını Oku butonuna tıklayalım:

asp.net mvc teknoloji bloğu - SagKolon section eklendikten sonra /Home/Index sayfasında bulunan bir bloğa ait olan Devamını Oku butonuna tıklama

/Home/Index sayfasında olduğu gibi /Blog/Details sayfasının tarayıcı görüntüsünün de önceki tarayıcı görüntüsüyle arasında hiçbir fark olmadığı görülmektedir:

asp.net mvc teknoloji bloğu - /Blog/Details sayfasının SagKolon section eklendikten sonraki tarayıcı görüntüsü

Bir de SagKolon section’ının eklenmediği bir sayfanın kontrolünü yapalım. Tarayıcıdan /Blog/Index sayfasını açalım:

asp.net mvc teknoloji bloğu - SagKolon section'ının eklenmediği sayfa olan /Blog/Index sayfasının tarayıcı görüntüsü

Görüldüğü gibi, /Blog/Index sayfasının tarayıcı görüntüsünün de önceki haliyle arasında bir fark bulunmamaktadır.

Devamını oku

Popüler

error: Content is protected !!