Takip Edin

ASP.NET MVC

Asp.Net MVC İle Temel Düzeyde Teknoloji Blog Sitesi Yapımı – Kayıt Detay Sayfası

asp.net mvc teknoloji bloğu - Kayıt Detay Sayfası
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, /Blog/Details sayfası üzerinde gerekli düzenlemeler yapılacak ve bir bloktan, o bloğa ait olan detay sayfasına yönlendirme işlemi yapılacaktır.

İlk olarak Solution Explorer penceresinde, Views klasörü altındaki Blog klasörü içerisinde bulunan Details.cshtml dosyasını açalım:

asp.net mvc teknoloji bloğu - Blog klasörü altındaki Details.cshtml dosyasının açıldığı yer

Bu dosyada bulunan tüm kodları silip yerine aşağıda verilen kodları yapıştıralım:

@model TeknolojiBlogu.Models.Blog

@{
    ViewBag.Title = "Details";
}

<div class="row">
    <div class="col-md-8">
        <div class="card shadow-lg mb-3">
            <img class="card-img-top" src="~/img/@Model.Resim" alt="Card image cap">
            <div class="card-body">
                <h2 class="card-title">@Model.Baslik</h2>
                <hr />
                <p class="lead">@Model.Aciklama</p>
                <p class="card-text">@Model.Icerik</p>
                <hr />
                <p class="card-text"><small class="text-muted">@Model.EklenmeTarihi</small></p>
                
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <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>
    </div>
</div>

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

asp.net mvc teknoloji bloğu - Devamını Oku butonunun Details sayfasına yönlendirme işlemi için Home klasörü altındaki Index.cshtml'in açıldığı yeri gösteren resim

Devamını oku butonunun yer aldığı kısmı silelim:

asp.net mvc teknoloji bloğu - devamını ok butonunun Index.cshtml dosyasındaki eski hali

Devamını Oku butonunu, Html.ActionLink metoduyla tekrar oluşturarak /Blog/Details sayfasına yönlendirelim:

asp.net mvc teknoloji bloğu - Devamını Oku butonunu HtmlAction metoduyla /Blog/Details sayfasına yönlendirme

Uygulamayı çalıştıralım ve /Home/Index sayfasını açalım. Bu sayfada, istediğimiz bir bloğa ait olan Devamını Oku butonuna tıklayalım:

asp.net mvc teknoloji bloğu - /Home/Index sayfasında vpn bloğuna ait olan Devamını Oku butonuna tıklama

Buton, bizi /Blog/Details sayfasına yönlendirecektir:

asp.net mvc teknoloji bloğu - vpn bloğuna ait olan Devamını Oku butonuna tıkladıktan sonra bizi yönlendirdiği bloğa ait olan /Blog/Details sayfası

Herhangi bir bloğa ait olan detay sayfasında bir yorum bölümü oluşturmak için Blog klasörünün altındaki Details.cshtml dosyasını açalım.

asp.net mvc teknoloji bloğu - Details.cshtml dosyasında yorum bölümü için eklenecek kodların yeri

.card-body sınıfına sahip olan div içerisinde, eklenme tarihinden sonraki kısma aşağıdaki kodları yapıştıralım:

                <!--Yorum Bölümü-->
                <form class="my-5">
                    <div class="form-group">
                        <label for="comment">Aşağıdaki alana yorum yazabilirsiniz:</label>
                        <textarea class="form-control" rows="5" id="comment" name="text"></textarea>
                    </div>
                    <button type="submit" class="btn btn-outline-success">Gönder</button>
                </form>
                <div class="media">
                    <img class="mr-3 rounded-circle" src="http://via.placeholder.com/64/?text=vihekasade.net" alt="Generic placeholder image">
                    <div class="media-body">
                        <h5 class="mt-0">Media heading <small><i>@Model.EklenmeTarihi.AddHours(5) tarihinde yazıldı.</i></small></h5>
                        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

                        <div class="media mt-3">
                            <a class="pr-3" href="#">
                                <img class="rounded-circle" src="http://via.placeholder.com/64/?text=vihekasade.net" alt="Generic placeholder image">
                            </a>
                            <div class="media-body">
                                <h5 class="mt-0">Media heading <small><i>@Model.EklenmeTarihi.AddDays(2).AddHours(3) tarihinde yazıldı.</i></small></h5>
                                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                            </div>
                        </div>
                    </div>
                </div>

Uygulamayı tekrar çalıştırarak /Home/Index sayfasına gelelim ve istediğimiz herhangi bir bloğa ait olan Devamını Oku butonuna tıklayalım.

asp.net mvc teknoloji bloğu - /Blog/Details sayfasında yorum kısmını gösteren resim

Böylelikle bir bloğa ait olan detay sayfasına, yorum kısmı eklenmiş oldu.

Devamını oku

Popüler

error: Content is protected !!