Mvc | Temel İşlemler

İçerik: Tablo ilişkilendirme, CRUD, drop-down list, validation, paging, alert, popup modal, arama paneli, datatable

1. Sql üzerinden MvcDbStok adında bir Database oluşturalım.

2. Ürün, Kategori, Satış ve Müşteri tabloları oluşturalım.

    TBLUrun: UrunId, UrunAd, UrunKategori, Marka, Fiyat, Stok

    TBLKategori: KategoriId, KategoriAd

    TBLSatis: SatisId, Urun, Musteri, Adet, Fiyat

    TBLMusteri: MusteriId, MusteriAd, MusteriSoyad

şeklinde oluşturulabilir. Bu aşamada Id'lerin Primary Key olarak işaretlenmesi önemlidir.

İlişkilerin Kurulması ve Model Oluşturma

1. Bu projede ilişkiler Sql diyagramı üzerinden ilgili tablo içeriklerinin sürüklenmesi ile oluşturulacaktır.

    KategoriId ➜ UrunKategori (Kategori ve Ürün)

    MusteriId ➜ Musteri (Müşteriler ve Satış)

    UrunId ➜ Urun (Ürün ve Satış) arasında ilişki olmalıdır.

2. Oluşturduğumuz tablolara veri girişleri yapalım.

3. Visual Studio'da proje açalım.➝ ASP.NET Web Application(.NET Framework)➝ Proje adı: MvcDbStok

4. Models klasöründe bir Entity klasörü oluşturalım ve buraya Add > New Item ile ADO.NET Entity Data Model ekleyelim. Açılan pencerede herhangi bir değişiklik yapmamız gerekmiyor, bağlantı kısmına Sql sunucu bağlantısını girmemiz ve veri tabanı kısmından ilgili database'i (MvcDbStok) seçmemiz yeterli. Artık tabloları dahil edebiliriz.

5. Controllers klasöründe tüm tablolar için birer Controller oluşturalım ve View ekleyelim (Layout seçili olsun).

@RenderBody()

    Örnek bir View'i tarayıcıda açmaya çalıştığımızda RenderBody() hatası alırız, çünkü program Layout ile beraber kullandığımız yeni dosyanın sayfada hangi alana geleceğini bilemez. Bu nedenle kullandığımız Layout içinde oluşturduğumuz yeni sayfalar nereye gelsin istiyorsak o alana @RenderBody() yazmalıyız. (Genellikle navbar'ın sabit kalması, sayfa gövdesinin (container) değişmesi tercih edilir.)

    Layout içinde hazır herhangi bir template kullanabiliriz. Navbar'da kullanacağımız sayfalara ulaşmak için liste oluşturabiliriz.

Listeleme

1. KategoriController içinde using MvcStok.Models.Entity; tanımlayarak Entity klasöründeki modele ulaşım sağlayalım.

2. public class içine MvcDbStokEntities db = new MvcDbStokEntities(); yazarak modeli çağıralım.

    db, MvcDbStokEntities sınıfından türetilen nesnedir.

    MvcDbStokEntities oluşturulan modeli tutar. Model de tabloları içermektedir.

3. public ActionResult Index() içine 

    var degerlerdb.TBLKategoriler.ToList();

    yazarak tablo verilerini listeleme talebi oluştururuz. Hemen altına return View(degerler) yazarak değerlerin görüntülenmesini de sağlamalıyız.

4. Index sayfamıza dönelim.

    @using MvcStok.Models.Entity

    @model List<TBLKategoriler>

yazalım. İlki modeli sayfaya dahil ederken ikincisi Kategoriler tablosunu liste olarak tutacaktır.

5. Html üzerinde tablo oluşturup foreach metodu ile kullandığımızda veriler sayfaya tablo halinde gelecektir.

Bunu tüm tablolar için uygulayalım. @model List< > bölümünde her sayfanın kendi tablosunu getirmeyi ve tüm verileri listelemeyi unutmayalım.

Bu sayfalara ulaşım için navbar içinde daha önce oluşturduğumuz listede bağlantı verelim:

CRUD İşlemleri 1 | Alanların Oluşturulması

Kategoriler'de Sil ve Güncelle bölümü için buton oluşturup bu butonlara ActionResult (Controller'da tanımlayacağız) verelim. En alta da yeni kategori eklemek için bir buton oluşturalım. Böyle görünmeli:

    (Örn. Kategori'deki Sil ActionResult'ına git ➝ KategoriId'ye göre silme işlemi yap.) Bunu tüm tabloların sayfalarında yapalım.

HttpGet & HttpPost

HttpGet: Herhangi bir işlem yapmadan sayfa yükleniyorsa, yani istek direkt Url'e gidiyorsa.

HttpPost: Sayfada herhangi bir işlem yapıldığında (Örn. Kaydet butonuna bastığımızda).

CRUD İşlemleri 2 | Controller

KategoriController Crud işlemlerini tanımladıktan sonra böyle görünecektir:

CRUD | Create

(Şu an için sadece YeniKategori üzerinde çalışacağımız için sonradan ekleyeceğimiz ikinci sütunu görmezden gelebiliriz.)

if(!ModelState.IsValid) ➝ Geçerli değilse YeniKategori sayfasına döndür.

YeniKategori ve KategoriGetir için birer View oluşturulur.

    YeniKategori.cshtml:

Ortaya çıkan görüntü böyle olacaktır:

Tüm Controller ve sayfalar için aynı yol izlenir.

KategoriGetir.cshtml (daha sonra güncelleme yaparken ihtiyaç duyulacak):

Db ile Drop-down List Kullanımı

Ürün kategorisi zaten bir tabloda hazır bulunduğu için her seferinde yazmak yerine seçebiliriz.

UrunlerController:

"TBLKategorilerin listesini çek, i değişkenine ata. Seçilen yeni listede text KategoriAd değerine, value KategoriId değerine atansın. Id int olduğu için görüntülerken ToString ile string şekilde görüntülenmesini sağla. Listele. Html'de ViewBag.dgr olarak girdiğimiz kısmı degerler'e ata. Sayfası görüntüle."

YeniUrun.cshtml içinde de ViewBag.dgr içeren bir drop-down list girişi yapalım. Bunun için bir html helper olan DropDownListFor yardımcısını kullanalım:

    

CRUD | Read, Update, Delete

Silme işleminde int türünde id parametresi verdik. var kategori ile bir kategori nesnesi oluşturup TBLKategorilerden id nesnesini bul ve ona ata, demiş olduk. Daha sonra oluşturulan kategori nesnesini tablodan çekip Remove ile silme komutu verdik. db.SaveChanges(); ile veri tabanında değişiklikleri kaydettirip Index sayfasına dönüş sağladık.

KategoriGetir'de sadece oluşturduğumuz ktgr nesnesini KategoriGetir sayfasında görüntüleme (Read)  işlemi yapıldı.

Güncelleme işleminde TBLKategoriler tablosundan p1 adlı bir parametre tanımladık. KategoriId'sini ktg adlı bir nesneye atadık. Tablodaki KategoriId ve KategoriAd verilerini p1 parametresi ile eşleştirdik. (Böylece yeni bir kategori eklendiğinde eklenen kategorinin Id ve Ad verisi tabloya dahil olacak.) Değişiklikleri kaydedip Index sayfasına dönüş sağladık.

Validation İşlemleri

Kategori Ekle butonuna tıkladığımızda tabloya kategori adı girmesek bile yeni ve boş bir kategori eklenmekte. Ayrıca veri tabanında tanımladığımız alandan daha fazla veri girişi de yapılması ihtimal dahilinde. Bunu önlemek için doğrulama (Validation) kullanılır.

Model içindeki ilgili tabloda zorunlu olmasını istediğimiz alanlarda [Required], maksimum uzunluk sınırlandırmasında [StringLength( )] kullanıp ErrorMessage ile istediğimiz uyarı mesajını veririz:

Ardından kategori ekleme işlemi yaptığımız YeniKategori.cshtml sayfasında düzenleme yaparız:

Label altına TextBoxFor ile KategoriAd'ı modelden çektik. ValidationMessageFor ile KategoriAd için yaptığımız sınırlamanın geleceği yeri belirttik: " " boş tırnak içine tablo içinde yazdığımız metin (ErrorMessage) gelecektir.

Paging

Kategori > Index.cshtml içinde düzenleme yapalım. Artık List yerine PagedList kullanacağız. Mantık olarak çok farklı değil.

KategoriController üzerine ToPagedList ile her sayfada kaç veri görünsün istediğimizi belirtelim:

Sonuç:

Alert
Ekleme, silme, güncelleme işlemleri yapıldığında bir uyarı görüntülemek isteyebiliriz.

YeniMusteri.cshtml'de örnek bir alert oluşturalım:

Butonu script içerisinde id'si ile çektik, tıklandığında çıkacak mesajı yazdık. Artık butona tıklandığında hem yeni müşteri eklenecek hem de 'Müşteri Eklendi.' bildirimi alınacak.

Popup Modal Kullanımı

Musteri > Index.cshtml içinde @Html.ActionLink içerisinde Controllerda kullanılan Sil actionName'ini belirterek onay için popup oluşturalım:  

Silme işlemi MusteriId'ye göre yapılsın. onclick ile uyarı metni butona (Yeni Müşteri Ekle) tıklandığında gösterilsin.

EK: data-dismiss ile modal kapatma:

Satis > Index.cshtml'de bir buton üzerinde data dismiss'i görelim.

Vazgeç butonuna tıklandığında modal kapanacaktır.

Arama Paneli

Musteri > Index.cshtml'de table'ın üstüne:

MusteriController içine:

string türünde bir p parametresini tutacağımızı bildirdik.

degerler nesnesi türetip TBLMusteriler içinden d parametresini al dedik. (d degerler'i temsil ediyor.)

if içerisinde döndüreceğimiz p parametresinin boş olup olmadığı durumunu sorgulattık. => Boş değil ise MusteriAd içerisinden p'yi oluşturduğumuz degerler nesnesine ata.

Daha sonra degerler.ToList() ile çekilen değerin listesini döndürdük.

Datatable Kullanımı

Manage NuGet Packages > jquery.datatables > Install

Kurulum tamamlandığında Content içerisine DataTables klasörü gelmiş olur.

Musteri > Index.cshtml'de datatable kullanalım:

dataTables.min.css ve dataTables.min.js https://datatables.net/ adresinden alınabilir.

<script></script> alanı içerisinde datatable olarak göstermek istediğimiz tablonun id'si belirtilir.

Tablo dilini Türkçe yapmak için language içerisinde bu url ile ayarlama yapabiliriz: 

"url": "//cdn.datatables.net/plug-ins/1.10.20/i18n/Turkish.json"