Online Mağaza Projesi Bölüm2

Selamlar;

Öncelikle ürün işlemleri yapılacak admin ekranından başlıyalım. Burada amaç yeni bir ürün girişini yapmak, girilen ürünü düzeltmek ve onaylı bir şekilde silmektir.

admin

View/Home/Admin.cshtml:

Yukarıda görüldüğü gibi ekranda üç tane partial view vardır. Ürün resmini yüklediğimiz file ajax upload, ürünlerin detayının göründüğü resmi, ismi, fiyatı ve açıklama alanları ile son olarak vitrindeki ürün listesidir.

 Views/Shared/FileUpload.cshtml:

Yeni Ürün girişinde yukarıda görüldüğü gibi ilk olarak fileupload’u inceleyelim. Form post olunca gideceği action belirlendikten sonra :@using (Ajax.BeginForm(“FileUpload”, “Home”, new AjaxOptions() { HttpMethod = “POST” }, new { enctype = “multipart/form-data” })) güvenlik amaçlı AntiForgeryToken konur. Form ajax ile post olduktan sonra complete durumunda actiondan dönen, image path’i ürün detaydaki resim bilgisine basılır.

HomeController/FileUpload :  Post edilen file, images kalsörüne kaydedilir.

Views/Home/Admin.cshtml/saveProduct() function: Kaydet butonuna basılınca aşağıda görüldüğü gibi ürünün jquery post ile yeni kayıt eklenmesi yada güncellenmesi action’larının çağrıldığı functiondır.

HomeControl/Admin[Get]: Ürün detay ekranı yani ProductDetail, DAL.tblProduct modeli beklemektedir. Aşağıda görüldüğü gibi ilgili model çekilip view’a gönderilir.

 Views/Shared/ProductDetail.cshtml : Ürün detayının göründüğü partial view’dur.

Yukarıda görüldüğü gibi ürün detay ekranı yani ProductDetail, DAL.tblProduct modeli beklemektedir. Kaydet butonuna basılınca yukarıda görülen Admin’deki saveProduct() function çağrılır. Burada ürün jquery post ile ya güncellenir yada yeni bir ürün girişi yapılır. Yani aşağıda görüldüğü gibi ya  /Home/AdminUpdate yada /Home/Admin  action çağrılır.

HomeControl/Admin[Post] & AdminUpdate:

productList

Şimdi biraz da yukarda görülen ürün listesini inceleyelim. Aşağıdaki kodlarda görüldüğü gibi partial view model olarak DAL.tblProduct beklemektedir. Ürünle ilgili olarak silme ve düzenleme işleri burada yapılır. Aşağıda görülen Admin ekranındaki editProduct() ve deleteProduct functionları çağrılır.

Views/Shared/ProductList.cshtml :

 HomeController/ProductList[Get]:

Views/Home/Admin.cshtml/editProduct() & deleteProduct()  functions:

HomeControl/ ProductDelete[Post] & ProductDetial[Post] :

Yapılan değişikliklerin client tarafına yansıtılması için dikkat ederseniz Admin ekranındaki delete ve save functionlarında aşağıdaki refreshProduct() function’ı çağrılmıştır.

 messagehub.server.refreshProduct();

View/Admin.cshtml’de signalR için alttaki script’in eklenmesi gerekmektedir

Server tarafındaki HomeController altındaki Jewellery :Hub classımız aşadaki gibi tanımlanmıştır.

Yukarıdaki RefreshProduct’a dikkat ederseniz, ürünlerde değişiklik olunca ProductScreen, ilgili datamodel ile doldurulup,  tüm clientlardaki reloadProduct function’una parametre olarak gönderilmektedir. Buradaki önemli nokta bu class’ın controller’dan türemediği için result olarak PartialView döndürememesidir. Bu nedenle PartialView’umuzu string’e çeviren bir helper yazdık. Böylece ProductScreen view’umuzu ilgili model ile doldurup string’e çevrilecek. Client tarafında da Index.cshtml’de ilgili div’in altına (<div id=”productScreen”></div>) bu html basılacak.

Model/Helper.cs: İlgili View’ı string’e çevirir.

 View/Home/Index.cshtml: Ürünlerin client’lara gösterildiği ana ekran.

Yukarıdaki kod’a dikkat ederseniz server side’dan çağrılan messagehub.client.reloadProduct succeed durumunda ilgili productScreen divini tekardan doldurmaktadır.

Views/Shared/ProductScreen: Ürünlerin client tarafında gösterildiği Partial View’dur.

 HomeController.cs’in tamamı:

 Views/Home/Admin.cshtml’in tamamı:

Örnek Url : http://jewellerystores.azurewebsites.net/Home/Login

Source Code: http://www.borakasmer.com/projects/JewelleryStore.rar

Böylece bir kuyumcu online mazasında yeni bir ürün girilmesi, silinmesi ve düzeltilmesi durumunda signalR ile client’ları bu değişimden haberdar ettik. Partial View’ımızı html string’e çevirdik. Ajax post ile image upload yaptık. Ayrıca Admin sayfamızda görüldüğü gibi farklı partial viewlar ile nasıl çalışabileceğimizi gördük.Partial viewlarda çağrılan java script kodlarını kondukları ana sayfa olan Admin sayfasına koyulmasındaki amacın, çağrılma ve yükleme anında erişim problemini ortadan kaldırmak olduğunu gördük.

Geldik bir makalenin daha sonuna yeni bir makalede görüşmek üzere hoşçakalın.

Herkes Görsün:

Sevebilirsin...

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir