Mvc ve SignalR İle Hatırlatıcı Notlar Bölüm1

Selamlar;

Bugün benim bolca ihtiyaç duyduğum:) sizin de işine yarayacağını düşündüğüm SignlR ve Mvc 6.0 ile Web üzerine hatırlatıcı notlar yazıp, bunları ekran üzerinde istediğimiz yere oynatacağız. Daha sonra sayfaya geri geldiğimiz de ilgili notlar, önceden ekran üzerinde belirlediğimiz yerlerde karşımıza çıkacak. Bir de yeni eklenen notlar, sayfada olan diğer kullanıcılar için de socket teknolojisi kullanılarak sayfada belirecek ve yeri değiştirildiğinde diğer client ekranlarında da hareket edicek.

Öncelikle bir Asp.Net Mvc projesi yaratılır. Sonra yaratılan Index.cshtml sayfasına bir toolbar konur. Ilgili toolbar üzerinde yapıştırılacak kağıt rengi ve içine yazılacağı notun bulunduğu “txtNote” id’li bir textarea nesnesi vardır. Aynı div içine “draggable” id’li bir başka div konarak, yaratılan yeni noteların bu div’in içinde oluşturulması sağlanır.

Yukarıdaki kodda da görüldüğü gibi ilgili resimler tıklanınca “AddNote()” function’ı çağrılmıştır. Herbir renge denk gelen parametre de ilgili function’a gönderilmiştir. Burada amaç seçilen renge göre ilgili text’i o renkteki kağıt resim ile birlikte render edip yeni bir resim olarak ekrana basmaktır.

Index.cshtml(AddNote(id)): Aşağıdaki functionda’da görüldüğü gibi “PostMessage()” methoduna ilgili parametreler gönderilerek post edilip, “Note” klasörü altında yeni oluşmuş resim ismi geri dönülerek “draggable” divinin içine html string olarak basılır.

Şimdi sıra geldi ilgili resim ve yazıdan yeni bir resim oluşturmaya.

HomeController.cs(PostMessage()): Aşağıda görüldüğü gibi seçilen renge göre ilgili text, resim üzerine “DrawString” ile farklı font renkleri ile yazılmıştır. Ve daha sonra oluşturulan yeni resim “Note” klasörünün altına yeni bir “Guid” ismi ile kaydedilmiştir. Son olarak oluşturulan yeni resim ismi string olarak geri dönülmüştür.

Yukarıdaki animasyonda da görüldüğü gibi yeni eklenen notlar sürüklenebilmektedir. Öncelikle gelin bunu bir inceleyelim. Sayfaya eklenen notların class’ı=”paper” dır. Ve her resim div’e eklendiğinde “init()” function’ı çağrılmaktadır.

Index.cshtml(init()): “$(“.paper”).draggable()” ile eklenen resimlerin sürüklenebilmesi sağlanmıştır. Sürüklenme işi bitince(stop:function()) resmin son kordinatı olan “left ve top” alınıp “coordinates()” function’ına gönderilir.

Index.cshtml(coordinates()): Burada amaç ilgili resmlerin hareket ettirildikten sonra son kordinatlarnın saklanıp sayfaya tekrardan gelindiğinde ilgili notların son bırakıldıkları noktadan çıkarılmasıdır.

Ben kordinatların kaydedilmesi için burada biraz radikal bir yol seçtim ve Database veya Cookie kullanmadım. Yukarıdaki kodda görüldüğü gibi “ChangeImageName()” methoduna image’in ismi, son kordinatları ve daha sonra bahsediceğimiz connectionID parametreleri gönderilmektedir. Öncelikle ilgili methodu inceleyelim, daha sonra post işlemi tamamlandığında neler oluyor onu görelim.

HomeController.cs(ChangeImageName()): Aşağıda görüldüğü gibi 1. konumdan 2.konuma gelen image isminin sonuna kordinat bilgisi konulmuştur. Burdan da anlaşılacağı gibi resimin ekran üzerindeki konumu isminde saklanmıştır. Resim hareket ettirildiğinde isminin sonuna yeni konum bilgisi “_” ayracı ile ayrılarak konulmuş ve sonra dosya ismi “MoveTo()” methodu yeni kordinat ismi ile değiştirilerek hem eski hem de yeni ismi birleştirilip geri dönülmüştür.

Geri dünülen resim bilgileri sayesinde aşağıda görüldüğü gibi öncelikle jquery ile ilgili resim, eski yani hareket ettrilmeden önceki  konum bilgisine sahip olan “src” attribute ile bulunmuş ve yeni yol bilgisi yani en son getirldiği kordinat bilgisine sahip “src” değeri ile değiştirilmiştir.

Index.cshtml(document.ready()): Sayfa ilk yüklendiğinde önceden yüklenen resimlerin en son kordinatları ile ekrana basılması için “GetImages()” methoduna ajax post yapılır. Geriye “json” bir data döner. Dönen listede resimlerin “src” bilgileri bulunmaktadır. Ilgili Url bilgisinde resmin kordinat bilgisi de bulunmaktadır. “left ve top” bilgileri “imageList[]” dizisi içinden pars edilip, herbir resim kendi kordinatında “<div id=’draggable’>” div’inin altına basılır. Ayrıca “txtNote” içine bilgilendirici yazı yazılması ve odaklanıldığında temizlenmesi yine “document.ready()” function’ı altında tanımlanmaktadır.

HomeController.cs(GetImages()): Aşağıda “Index.cshtml” sayfasının yüklenmesinden sonra, önceden yazılmış resim şeklindeki notelar eklenme zamanına göre, “Notes” kalsörü içinde tek tek gezilerek  isimleri “Images” sınıfına ait bir listeye eklenir. Ve bu işlemin sonunda ilgili liste “Json” olarak dönülür.

Bu bölümde son olarak eklenen noteların silinmesi özelliğini inceleyeceğiz.  Resimler çift tıklanıldığında silinmesi işlemi Index.cshtml tarafında “init()” function’ı altında aşağıdaki gibi tanımlanmıştır. Eklenen tüm resimler, kendilerine atanmış “.paper” class’ı sayesinde yakalanıp “dblclick()” olayında “DeleteImages()” methoduna post işlemi yapılmıştır. İlgili methoddan silinecek resmin “src” yolu geri dönmekte ve daha sonra ilgili resim “src” yoluna göre bulunup ekrandan silinmekte yani “remove()” edilmektedir.

Index.cshtml(init()):

HomeController(DeleteImage()): Gönderilen resimler ilgili “Notes” folder’ı altından silinerek, dosya ismi geri dönülür.

Bu zamana kadar belli bir renkte kağıda yazı yazıp ilgili note’u ekrana basmayı gördük. Ayrıca bu noteları ekranın istediğimiz bir yerine sürükleyebildik. Ve her sürüklemede ismini değiştirip ilgili kordinatları resim yolunun sonuna ekledik. Böylece ilgili sayfaya tekrar gelindiğinde notları bıraktığımız konumda kordinatları başka bir storage’a kaydetmeden bulabildik. Ayrıca ilgili resimler çıft tıklayarak silebildik. 2. Bölümde SignalR socket teknolojisi kullanılarak hareket ettirilen bir note’un tüm clientlarda animatif olarak hareket ettirilmesini, yeni eklenen ve silinen noteların o andaki tüm clientlarda gösterilmesi yada silinmesini hep beraber inceleyeceğiz. En sonunda da uygulamamızı Azure publish edeceğiz.

Geldik bir makalenin daha sonuna. Makalenin devamında görüşmek üzere hoşçakalın.

HomeController.cs(Full):

Index.cshtml(Full):

Source:

• https://stackoverflow.com/questions/6826921/write-text-on-an-image-in-c-sharp
• https://stackoverflow.com/questions/6311545/c-sharp-write-text-on-bitmap/6311628
• https://stackoverflow.com/questions/21431879/jquery-drag-to-get-start-and-stop-coordinates
• https://stackoverflow.com/questions/849030/how-do-i-get-the-coordinate-position-after-using-jquery-drag-and-drop