Takip Edin

ASP.NET MVC

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

asp.net mvc teknoloji bloğu - blog ve kategori güncelleme 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 Güncelleme Formu

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

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

asp.net mvc teknoloji bloğu - edit.cshtml'in yerini belirten resim

Bu dosyada bulunan kodları silip yerine aşağıdaki kodları yapıştıralım.

@model TeknolojiBlogu.Models.Blog

@{
    ViewBag.Title = "Edit";
}

<h2>Blog Güncelle</h2>
<hr />


@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()


    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    @Html.HiddenFor(model => model.Id)

    <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.Onay, new { @class = "form-check-label col-md-2 text-right font-weight-bold" })
        <div class="col-md-10">
            <div class="form-check">
                @Html.EditorFor(model => model.Onay, new { htmlAttributes = new { @class = "form-check-input" } })
                @Html.ValidationMessageFor(model => model.Onay, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>

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

    <div class="form-group row">
        @Html.LabelFor(model => model.CategoryId, "CategoryId", htmlAttributes: 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="Kaydet" class="btn btn-outline-primary" />
        </div>
    </div>

}

<div>
    @Html.ActionLink("Back to List", "Index")
</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>

Form aracılığıyla düzenlemek istediğimiz alanlar arasında EklenmeTarihi olmadığından dolayı, BlogController.cs dosyasında bulunan Edit action metodundan Eklenme tarihi alanını çıkaralım:

asp.net mvc teknoloji bloğu - edit action metodundan eklenme tarihi alanının çıkarılması

db.Entry(blog).State = EntityState.Modified sorgusunu silerek sadece istediğimiz alanları güncelleme içerisine katalım:

asp.net mvc teknoloji bloğu - db.Entry(blog).State sorgusunu silinmesi

Bunu, güncellenmesi istenen bloğun içerisindeki Id değeriyle sorgulama yaparak gerçekleştirelim:

asp.net mvc teknoloji bloğu - edit action metodunda sorgu yazarken istediğimiz alanları dahil etme

Uygulamayı çalıştırıp /Blog/Index sayfasını açalım. Karşımıza çıkan blog listesinde, güncellemek istediğimiz bloğa ait olan Edit butonuna basalım:

asp.net mvc teknoloji bloğu - güncellenmek istenilen bloğun /Blog/Index sayfasındaki görüntüsü

Karşımıza çıkan sayfada, bloğa ait güncellenmesini istediğimiz bilgiler, form üzerinde gösterilmektedir. Form üzerinden gerekli düzenlemeleri yaparak Kaydet butonuna basalım:

asp.net mvc teknoloji bloğu - yazılım kategorisindeki bloğu mobil kategorisine güncelleme

Kaydet butonuna bastıktan sonra düzenlediğimiz blog, /Blog/Index sayfasında bulunan blog listesinde, güncellenmiş bir şekilde karşımıza gelecektir.

asp.net mvc teknoloji bloğu - /Blog/Index sayfasında bloğun güncellenmiş hali

Bir bloğu güncelledikten sonra /Blog/Index sayfasında, hangi bloğu güncellediğimizi gösterelim. Öncelikle BlogController.cs dosyasında bulunan Edit action metodunda(HttpPost) kayıt gerçekleştikten sonra bir TempData nesnesi oluşturalım:

asp.net mvc teknoloji bloğu - Edit action metodunda TempData[""] nın belirtilmesi

Oluşturduğumuz TempData nesnesini, Blog klasöründeki Index.cshtml dosyasında kullanalım:

asp.net mvc teknoloji bloğu - TempData'nın index.cshtml'de kullanımı

Burada Font Awesome ikonu kullandığımızdan aşağıdaki kodu, Solution Explorer penceresinde bulunan Shared klasörü altındaki _Layout.cshtml dosyasında bulunan head elemanının içerisine yerleştirelim:

<script src='https://kit.fontawesome.com/a076d05399.js'></script>
asp.net mvc teknoloji bloğu - _Layout.cshtml dosyasına font awesome kütüphanesi için script kodunu ekleme

Uygulamayı çalıştırıp /Blog/Index sayfasını açalım ve güncellemek istediğimiz bloğa ait olan Edit butonuna basalım:

asp.net mvc teknoloji bloğu - TempData ile bir verinin güncellemeden önceki hali

Karşımıza çıkan /Blog/Edit sayfasında bulunan formda, gerekli düzenlemeleri yaptıktan sonra Kaydet butonuna basalım:

asp.net mvc teknoloji bloğu - TempData ile güncellendiği gösterilecek olan bloğun form üzerindeki görüntüsü

Bu aşamada, TempData devreye girerek güncellediğimiz bloğun başlığını yazarak başarıyla güncellendi mesajını /Blog/Index sayfasında gösterecektir:

asp.net mvc teknoloji bloğu - güncellenen bloğun /Blog/Index sayfasında alert kutusunda mesajla gösterilmesi

Kategori Güncelleme Formu

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

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

asp.net mvc teknoloji bloğu - category klasörü altındaki edit.cshtml'in solution explorer'daki yeri

Açılan dosyadaki tüm kodları silip yerine aşağıdaki kodları yapıştıralım:

@model TeknolojiBlogu.Models.Category

@{
    ViewBag.Title = "Edit";
}

<h2>Kategori Güncelle</h2>
<hr />


@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()


    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    @Html.HiddenFor(model => model.Id)

    <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="Save" class="btn btn-outline-primary" />
        </div>
    </div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</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>

CategoryController.cs dosyasının Edit action metodunda(HttpPost), kullanıcının yaptığı güncellemeyi TempData’nın içine atalım:

asp.net mvc teknoloji bloğu - post edit action metodunda TempData'nın belirtilmesi

Oluşturduğumuz TempData nesnesini, Category klasöründeki Index.cshtml dosyasında kullanalım:

asp.net mvc teknoloji bloğu - Category klasörü Index.cshtml TempData yerleştirilmesi

Uygulamayı çalıştırıp /Category/Index sayfasını açalım ve karşımıza çıkan kategori listesinden güncellemek istediğimiz kategoriye ait olan Edit butonuna basalım:

asp.net mvc teknoloji bloğu - güncellemek istediğimiz kategori listesi

Karşımıza çıkan /Category/Edit sayfasında kategori adını değiştirerek Save butonuna basalım:

asp.net mvc teknoloji bloğu - kategori adının eski ve yeni hali

/Category/Index sayfasında, güncellemek istediğimiz kategori, yeni ismiyle karşımıza gelecektir:

asp.net mvc teknoloji bloğu - /Category/Index sayfasında güncellediğimiz bloğun yeni ismiyle listede gözükmesi
Devamını oku

Popüler

error: Content is protected !!