Takip Edin

ASP.NET MVC

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

asp.net mvc teknoloji bloğu - blog ve kategori ekleme formu ö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

Blog Ekleme Formu

Bu bölümde, /Blog/Create sayfasında bulunan form aracılığıyla blog ekleme işlemi yapılacaktır.

İlk önce Solution Explorer penceresinde, Blog klasörü altında bulunan Create.cshtml dosyasını açalım:

asp.net mvc teknoloji bloğu - blog klasörü altındaki create.cshtml'i gösteren resim

Create.cshtml dosyasında bulunan tüm kodları silip aşağıdaki kodları yapıştıralım:

@model TeknolojiBlogu.Models.Blog

@{
    ViewBag.Title = "Create";
}

<h2>Blog Ekle</h2>
<hr />


@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    
    <div class="form-group row">
        @Html.LabelFor(model => model.Baslik, new { @class = "col-form-label col-md-2 text-right font-weight-bold" })
        <div class="col-md-10">
            @Html.TextBoxFor(model => model.Baslik, new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.Baslik, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group row">
        @Html.LabelFor(model => model.Aciklama, new { @class = "col-form-label col-md-2 text-right font-weight-bold" })
        <div class="col-md-10">
            @Html.TextAreaFor(model => model.Aciklama, new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.Aciklama, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group row">
        @Html.LabelFor(model => model.Resim, new { @class = "col-form-label col-md-2 text-right font-weight-bold" })
        <div class="col-md-10">
            @Html.TextBoxFor(model => model.Resim, new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.Resim, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group row">
        @Html.LabelFor(model => model.Icerik, new { @class = "col-form-label col-md-2 text-right font-weight-bold" })
        <div class="col-md-10">
            @Html.TextAreaFor(model => model.Icerik, new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.Icerik, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group row">
        @Html.LabelFor(model => model.CategoryId, "CategoryId", new { @class = "col-form-label col-md-2 text-right font-weight-bold" })
        <div class="col-md-10">
            @Html.DropDownList("CategoryId", null, "Kategori Seçiniz", new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.CategoryId, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group row">
        <div class="offset-md-2 col-md-10">
            <input type="submit" value="Create" class="btn btn-outline-primary" />
        </div>
    </div>    
}

<div>
    @Html.ActionLink("Back to List", "Index", null, new { @class = "btn btn-primary" })
</div>

<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

Solution Explorer penceresinde, Content klasörünün içerisinde bulunan Site.css dosyasını açalım. Burada bulunan max-width: 280px; özelliğini silelim. Böylelikle /Blog/Create sayfasında bulunan form, sayfayı kaplar hâlde karşımıza gelecektir.

asp.net mvc teknoloji bloğu - max-width:280px özelliğini silme

Kodları Create.cshtml dosyasına yapıştırdıktan sonra uygulamayı çalıştırdığımızda /Blog/Create sayfasına ait tarayıcı görüntüsü aşağıdaki gibi olacaktır:

asp.net mvc teknoloji bloğu - Blog/Create tarayıcı ekran görüntüsü

Eğer form, hâlâ sayfayı kaplayacak genişlikte değilse sayfaya sağ tıklayıp İncele diyelim, daha sonra tarayıcının sol üst köşesinde bulunan yenile tuşuna sağ tıklayıp ön belleği boşalt ve tam yeniden yükle dedikten sonra form, üst resimdeki gibi bir görüntüye kavuşacaktır.

asp.net mvc teknoloji bloğu - ön belleği boşaltarak tam ekran yapıldığını gösteren resim

Formda; Başlık, Açıklama, Resim, İçerik ve CategoryId alanları doldurularak yeni bir blog oluşturulduğundan dolayı BlogController.cs dosyasında bulunan Create action metodunda(HttpPost) gerekli düzenlemeleri yapalım:

asp.net mvc teknoloji bloğu - create action post metodunun bind alanını düzenleme

Bloğun eklenme tarihini, sistemin o anki tarih ve saati olarak ayarlayalım:

asp.net mvc teknoloji bloğu - bloğun eklendiği andaki sistemin saat ve tarihi

Onay ve Anasayfa alanlarını Create action metodunda belirtmediğimizden blog eklenirken bu alanlar varsayılan olarak false şeklinde gelecektir.

Uygulamayı çalıştırıp /Blog/Index sayfasını açalım. Karşımıza çıkan sayfada YeniBlog Ekle butonuna basalım. Buton, bizi /Blog/Create sayfasına yönlendirecektir.

asp.net mvc teknoloji bloğu - yeni blog ekle butonuna basacağımızı belirten resim

Bu sayfada, formu doldurup Create butonuna basalım:

asp.net mvc teknoloji bloğu - formun doldurulup create butonuna basaıldığını gösteren resim

Aşağıdaki resimde görüldüğü üzere eklediğimiz blog, listenin en altına yerleşti:

asp.net mvc teknoloji bloğu - eklediğimiz bloğun Blog/Index sayfasında bulunan listenin en altına yerleştiğini gösteren resim

En son eklenen bloğu listenin üstüne yerleştirmek için OrderByDescending metodunu kullanalım:

asp.net mvc teknoloji bloğu - eklediğimiz bloğu listenin en üstüne almamızı belirten kod

Yukarıdaki komut, blogları eklenme tarihine göre azalan şekilde sıralar. Uygulamayı çalıştırdığımızda /Blog/Index sayfasında, eklenen bloğun listenin en üstüne yerleştiği görülmektedir:

asp.net mvc teknoloji bloğu - Blog/Index sayfasında son eklenen bloğun listenin en üstüne geldiğini gösteren resim

Kategori Ekleme Formu

Bu bölümde, /Category/Create sayfasında bulunan form aracılığıyla kategori ekleme işlemi yapılacaktır.

İlk olarak, Solution Explorer penceresinde, Category klasörü altında bulunan Create.cshtml dosyasını açalım:

asp.net mvc teknoloji bloğu - create.cshtml'in bulunduğu yer

Create.cshtml dosyasında bulunan tüm kodları silip yerine aşağıdaki kodları yapıştıralım:

@model TeknolojiBlogu.Models.Category

@{
    ViewBag.Title = "Create";
}

<h2>Kategori Ekle</h2>
<hr />

@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()
               
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group row">
            @Html.LabelFor(model => model.KategoriAdi, new { @class = "col-form-label col-md-2 text-right font-weight-bold" })
            <div class="col-md-10">
                @Html.TextBoxFor(model => model.KategoriAdi, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.KategoriAdi, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group row">
            <div class="offset-md-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-outline-primary" />
            </div>
        </div>   
}

<div>
    @Html.ActionLink("Back to List", "Index", null, new { @class = "btn btn-secondary" })
</div>

<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

Solution Explorer penceresinde, Controllers klasörünün altında bulunan CategoryController.cs dosyasını açalım. Formdan gönderecek olduğumuz alanı yalnızca Kategori Adı olarak ayarlayalım:

asp.net mvc teknoloji bloğu - create action metodunda Id'nin dahil olduğu resim

Create action metodunda(HttpPost), [Bind(Include = “Id, KategoriAdi”)] kısmında bulunan Id ‘yi silelim:

asp.net mvc teknoloji bloğu - create action metodunda Id'nin çıkarıldığı resim

Id için formdan bir değer beklemeye gerek yok çünkü Category.cs sınıfında bulunan Id alanı, eklenen her kategori kaydı için o kaydın Id değerini otomatik olarak artırır.

asp.net mvc teknoloji bloğu - formdan gönderilecek Id alanını Category.cs üzerinden ayarlama

Uygulamayı çalıştırıp /Category/Index sayfasını açalım ve Kategori Ekle butonuna basalım:

asp.net mvc teknoloji bloğu - kategori ekleme butonuna basmamız gerektiğini belirten resim

Karşımıza çıkan /Category/Create sayfasına eklemek istediğimiz kategorileri yazıp Create butonuna basalım:

asp.net mvc teknoloji bloğu - giyilebilir teknoloji kategorisini ekleme
asp.net mvc teknoloji bloğu - yapay zeka kategorisinin ekleneceği resim

Her kategori ekleme işleminden sonra /Category/Index sayfasında bulunan kategori listesinde, eklediğimiz kategorilerin de yer aldığı görülecektir:

asp.net mvc teknoloji bloğu - eklenen kategorilerin Category/Index sayfasında gösterilmesi
Devamını oku

Popüler

error: Content is protected !!