Takip Edin

ASP.NET MVC

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

asp.net mvc teknoloji bloğu - anasayfa blog listesi ö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, HomeController’ın Index action metodunda blog listesi için sorgu oluşturulacak ve oluşturulan blog listesi, Index.cshtml’e gönderilerek tarayıcıda gösterilecektir.

İlk olarak Solution Explorer penceresinde, 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

BlogModel.cs isminde bir sınıf oluşturalım:

asp.net mvc teknoloji bloğu - BlogModel sınıfını ekleme

Index.cshtml’e göndereceğimiz özellikleri bu sınıfın içerisine yerleştirelim:

asp.net mvc teknoloji bloğu - BlogModel sınıfına property'ler eklenmesi

Index action metodunda gerekli sorgumuzu oluşturalım. Bunu yaparken BlogContext’te bulunan Bloglar tablosundan gelen her bloğun BlogModel sınıfıyla ilgili olan alanlarını, bu sınıfın içerisine kopyalayalım:

asp.net mvc teknoloji bloğu - bloglar tablosundaki bilgilerin blogmodele kopyalanması

Bu sorguyu Index.cshtml’e gönderdiğimizde Bloglar tablosunda bulunan tüm bloglar, sorguda oluşturduğumuz alanlarıyla(kolonlarıyla) beraber index sayfasına aktarılır ancak tüm blogları Index.cshtml’e aktarmak yerine Anasayfa ve Onay alanları true olan blogları aktaralım. Bunun için where ile filtreleme yapalım:

asp.net mvc teknoloji bloğu - index sayfasına gönderilen listeyi where ile filtreleme

Göndereceğimiz bloglar listesini return View() içerisinde belirtelim:

asp.net mvc teknoloji bloğu - return view içerisine bloglar.tolist ekleme

Index.cshtml’in beklediği model artık Blog değil BlogModel tipinde olacağından gerekli düzenlemeyi yapalım:

asp.net mvc teknoloji bloğu - index sayfasının beklediği modelin tipini BlogModel olarak değiştirme

Index sayfasını 8 birim sol tarafa, 4 birim sağ tarafa olacak şekilde iki kısma ayıralım ve sayfada bulunan foreach sorgusunu silelim:

asp.net mvc teknoloji bloğu - index.cshtml'i kolonlara ayırma

Index.cshtml’e gelen bloglar listesini, 8 birimlik alana foreach komutu yardımıyla yerleştirelim. Bunun için aşağıda bulunan kodları, .col-md-8 sınıfına sahip olan div içerisine yerleştirelim:

@foreach (var blog in Model)
        {
            <div class="card shadow mb-5">
                <img class="card-img-top" src="~/img/@(blog.Id).jpg" alt="Card image cap">
                <div class="card-body">
                    <p class="card-text"><small class="text-muted"><i class="far fa-calendar-alt"></i> @blog.EklenmeTarihi</small></p>
                    <h3 class="card-title">@blog.Baslik</h3>
                    <hr />
                    <p class="card-text">@blog.Aciklama</p>
                    <hr />

                    <a href="#" class="btn btn-primary">Devamını Oku...</a>
                </div>
            </div>
        }

4 birimlik alana ise bir arama kutusu ve kategori menüsü ekleyelim. Bunun için aşağıda bulunan kodları, .col-md-4 sınıfına sahip olan div içerisine yerleştirelim:

        <div class="card bg-dark p-5 mb-5">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Ara">
                <div class="input-group-append">
                    <button class="btn btn-info" type="button">Ara</button>
                </div>
            </div>
        </div>

        <div class="card bg-dark p-2 pt-4 text-center">
            <div class="row">
                <div class="col-lg-6">
                    <ul class="list-unstyled">
                        <li>
                            <a href="#" class="text-light text-decoration-none">Category Name</a>
                        </li>
                        <li>
                            <a href="#" class="text-light text-decoration-none">Category Name</a>
                        </li>
                        <li>
                            <a href="#" class="text-light text-decoration-none">Category Name</a>
                        </li>
                        <li>
                            <a href="#" class="text-light text-decoration-none">Category Name</a>
                        </li>
                    </ul>
                </div>
                <div class="col-lg-6">
                    <ul class="list-unstyled">
                        <li>
                            <a href="#" class="text-light text-decoration-none">Category Name</a>
                        </li>
                        <li>
                            <a href="#" class="text-light text-decoration-none">Category Name</a>
                        </li>
                        <li>
                            <a href="#" class="text-light text-decoration-none">Category Name</a>
                        </li>
                        <li>
                            <a href="#" class="text-light text-decoration-none">Category Name</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

Index.cshtml’i düzenledikten sonra uygulamayı çalıştırdığımızda /Home/Index sayfasına ait tarayıcı görüntüsü, aşağıdaki gibi olacaktır:

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

Popüler

error: Content is protected !!