Tahmin ediyorum 3 hafta sonra kaldığım yerden yazılarıma devam edeceğim. Bir proje için yazının tamamını gör olayını yaptım, bugünde bu olayı eklenti haline getireyim hemde jQuery e nasıl eklenti yazılıyor bunu bir göreyim diyerek more eklentisini yazdım :) (Hayatımın en garip duygulu günlerinden birini geçiriyorum, bu sebepten dolayı cümlelerde anormallikler olabilir, kodlarda da, sonra uğrar düzeltirim.)

Eklenti şu işi yapıyor; diyelim uzunca bir yazı var ve siz bunun ilk 100 karakterini göstermek istiyorsunuz, 100 karakterden sonra çıkan bir düğmeylede yazının tamamını gösteriyorsunuz. Yada kendi belirlediğiniz bir ayraçla bu işlemi yapabiliyorsunuz. Bu arada eğer özellik açıksa ki varsayılan olarak açık, html etiketlerini kaldırıyor, devam et düğmesine basıncada yazının orjinal halini getiriyor.  Örneklere bakarak demek istediğimi daha iyi anlayabilirsiniz.

$(document).ready(function () {
  $(".more").more();
  $(".more").more({text:' ..more',textClass:'moreLink',character:50,splitChar:'{devam}'});
});

Eklentinin git adresi: https://github.com/apoStyLEE/jQuery-More-plugin

Örnek: http://95.0.146.135/jqueryMore/

Bisiklete olan merakımı her ne kadar  uygulamada yaşayamasamda elimden geldiğince gelişmeleri takip etmeye çalışıyorum. Özellikle yokuş aşağı inişler (downhill) beni benden alıyor. Allah nasip ederde gelecekte hedeflediğim yaşam standartlarına ulaşırsam zamanımın çoğunu bu konuyla ilgilenerek geçirmek istiyorum. Neyse çok uzatmayayım bu girdinin sebebi aşağıdaki birbirinden güzel fotoğraflar.

Kaynak

Twitter, Friendfeed gibi sosyal ağlarda bir şeyi etikletlemek istediğimizde #(diyez) işaretiyle başlayarak etiketimizi yazabiliyoruz, buna hashtag (#etiketimiz) deniyor. Twitter’ da @ işaretiyle başlayıp herhangi bir kullanıcının adını yazdığımızda (@apostylee) o kullanıcıya bir uyarı gidiyor ve ekranda biz bu girdiyi kullanıcının profiline giden bir link olarak görüyoruz. Konuyla ilgili geçenlerde şöyle bir şey paylaşmıştım. Bu iki özelliğe ek olarak http:// yada www. ile başlayan bir girdi yaptığımızda otomatik olarak linke dönüştürülüyor. Bu olay yaptığım bir projede lazım olmuştu, hazır yapılmışı varmı diye ararken burada ki kodları buldum. İş sadece biçimlendirmeyle bitmiyor, eğer Twitter’ da ki gibi ilgili kullanıcıya bir bilgi vermemiz gerekirse o kullanıcı adına sahip olmamız gerekiyor, bu işi ufak bir regex kullanarak hallediyoruz. Örneklere bakınca demek istediğimi daha iyi anlayacaksınız. Önce girdiyi biçimlendiren kodlarımız;

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Text.RegularExpressions;

namespace WebApplication2
{
    public static class HtmlParser
    {
        public static List hashTagList(string s) {
            Regex tags = new Regex(@"(?:(?            List l = new List();
            foreach (Match item in tags.Matches(s))
            {
                l.Add(item.Groups[1].ToString());
            }
            return l;
        }

        public static List userNameList(string s)
        {
            Regex tags = new Regex(@"(?:(?            List l = new List();
            foreach (Match item in tags.Matches(s))
            {
                l.Add(item.Groups[1].ToString());
            }
            return l;
        }

        public static string Link(this string s, string url)
        {
            return string.Format("<a href="\&quot;{0}\&quot;" target="\&quot;_blank\&quot;">{1}</a>", url, s);
        }
        public static string ParseURL(this string s)
        {
            return Regex.Replace(s, @"(http(s)?://)?([\w-]+\.)+[\w-]+(/\S\w[\w- ;,./?%&=]\S*)?", new MatchEvaluator(HtmlParser.URL));
        }
        public static string ParseUsername(this string s)
        {
            return Regex.Replace(s, "(@)((?:[A-Za-z0-9-_]*))", new MatchEvaluator(HtmlParser.Username));
        }
        public static string ParseHashtag(this string s)
        {
            return Regex.Replace(s, "(#)((?:[A-Za-z0-9-_]*))", new MatchEvaluator(HtmlParser.Hashtag));
        }
        private static string Hashtag(Match m)
        {
            string x = m.ToString();
            string tag = x.Replace("#", "");
            return x.Link("http://www.alanadi.com/tag/" + tag);
        }
        private static string Username(Match m)
        {
            string x = m.ToString();
            string username = x.Replace("@", "");
            return x.Link("http://www.alanadi.com/" + username);
        }
        private static string URL(Match m)
        {
            string x = m.ToString();
            return x.Link(x);
        }
    }
}

Örnek kullanım ise şu şekilde;

        protected void Page_Load(object sender, EventArgs e)
        {
            string strCumle = "selam @apostylee @ferdinand @drogma, nasılsın bakalım ? #tag #tag2 http://www.apostylee.com www.alanadi.com";

            Response.Write(strCumle.ParseURL().ParseUsername().ParseHashtag()+"</pre>

<hr />

<pre>
");

            Response.Write(HtmlParser.userNameList(strCumle).Count+"</pre>

<hr />

<pre>
");

            foreach (var item in HtmlParser.userNameList(strCumle))
            {
                Response.Write(item+"
");
            }
        }

HtmlParser.userNameList() ve HtmlParser.hashTagList() methodları bize ilgili girdideki kullanıcı adlarının yada etiketlerin listesini döndürüyor. Yukarıda da bahsettiğim gibi eğer veritabanına yazmamız gereken bir durum varsa bu iki methodun bize döndürdüğü listeyi kullanıyoruz. Projenin çalışır halini buradan indirebilirsiniz. Umarım faydalı bir yazı olmuştur..

Uzun zaman önce hayalini çok kurduğumuz fakat yeterince javascript bilmemekten ve kütüphanelerin bu denli gelişmiş olamayışından dolayı bir türlü gerçekleştiremediğimiz bir olaydı bu. Nereden aklıma geldi bilmiyorum, fakir bir çocuğun zengin olduğunda hayalini kurup bir türlü yapamadığı şeyi yapması heyecanıyla sarıldım web matrixe :) Heeeeeman, güç bende artık !


Senaryomuz şu şekilde, bir tarafta ürünlerimiz var diğer tarafta ise alış veriş sepetimiz. Kullanıcı almak istediği ürünü sürükleyip sepete bırakıyor. Aynı ürünü tekrar sepete attığında sadece adet bir artıyor. Ürünü sepetinden çıkartmak istediğinde ise, üzerine çift tıklıyor. Bu işi yapmak için jQuery ve jQueryUI kullanıyoruz. En can alıcı noktamız ise jQuery UI nin Draggable ve Droppable özelliği. Kodların üzerinde açıklamalar bulunuyor.

        $(document).ready(function(){

            // Sürükleme yapılacak elemanları seçiyoruz.
            $(".urunGrid ul li").draggable({
                revert:true,
                helper: "clone"
            });

            // Üzerine elemanları alacak olan kısmı belirtiyoruz. Yani sepetimiz.
            $(".sepet").droppable({
                drop: function( event, ui ) {
                    var t = $(this);
                    var d = ui.draggable; // bu bizim tuttuğumuz eleman yani <li> elementi
                    var ul = t.find("ul"); // Sepetimizin içindeki ul elementimiz.
                    var id = d.attr("id"); // tuttuğumuz ürünün id si.
                    var idToLi = ul.find("#"+id); // sepette, tuttuğumuz id ye sahip ürünü seçiyoruz.
                    var adet;

                   // Veritabanına yazma işlerini burada yapabilirsiniz. (ajax)                    

                    idToLi.fadeOut().fadeIn(); // şeklimizi yapıyoruz :)

                    // eğer daha önce ürün ekli değilse ekliyoruz, ekliyse adetini 1 arttırıyoruz.
                    if(idToLi.html()==null){
                        ul.append("<li id=\""+id+"\" title=\"Silmek için çift tıklayın\"><em>1 *</em> "+d.html()+"</li>");
                    }
                    else{
                        adet = parseInt(idToLi.find("em").text().replace(" *",""));
                        idToLi.find("em").text(adet+1+" *");
                    }
                    toplam(); // sepetin altına toplam alan fonksiyonu çağırıyoruz.
                }
            });

            // Sepetteki ürüne çift tıklandığında silinmesini sağlıyoruz.
            $(".sepet ul li").live("dblclick", function() {
                var adet = parseInt($(this).find("em").text().replace(" *", ""));
                if (adet == 1) {
                    $(this).remove();
                }
                else {
                    $(this).find("em").text(adet-1+" *");
                }
                toplam(); // Ürün silindiğinde toplamın yeniden hesaplanmasını sağlıyoruz.
            });
        });

        function toplam(){
            var toplam=0;
            var t;
            var fiyat;
            var adet;

            // Eğer sepette ürün yoksa "ürün yok" ibaresini görünmez yapıyoruz.
            if($(".sepet ul li").length != 0){
                $(".sepet h1 small").fadeOut();
            }
            else
            {
                $(".sepet h1 small").fadeIn();
            }

            // Sepetin içinde ki ürünleri yani <li> leri döndürüp toplama işlemini yapıyoruz.
            $(".sepet ul li").each(function(){
                t = $(this);
                fiyat = parseFloat(t.find("span").text().replace(t.find("span small").text(),""));
                adet = t.find("em").text().replace(" *","");
                toplam += (fiyat*adet);
            });

            // toplamı ilgili alana yazdırıyoruz.
            $("#toplam").fadeIn().text($(".sepet ul li").length+" Ürün, Toplam: "+toplam+" TL");
        }

    <body>
        <div class="tasiyici">
            <div class="kutu urunGrid">
                <h1>Ürünler</h1>
                <ul>
                    <li id="1">Asus Anakart <span>125<small> TL</small></span></li>
                    <li id="2">Intel İşlemci <span>23<small> TL</small></span></li>
                    <li id="3">Amd İşlemci <span>44<small> TL</small></span></li>
                    <li id="4">Sony Bilmemne <span>96<small> TL</small></span></li>
                </ul>
            </div>

            <div class="kutu sepet">
                <h1>Sepet <small>ürün yok</small></h1>
                <ul></ul>
                <div id="toplam"></div>
            </div>

            <div style="clear:both"></div>
        </div>
    </body>

Sürükle bırak gibi dışarıdan karışık gelen bir olayı jQuery sayesinde çok basit bir şekilde çözdük. Bu konuyla ilgili ufak tefek denemeler yaparak olayı daha iyi kavraya bilirsiniz. Aşağıda çalışan örneği görebilirsiniz, umarım faydalı bir yazı olmuştur :)

Bu yazıda jQuery ile serileştirme (serialize) olaylarına değineceğim. Serileştirme, bir grup form elemanın elemanAdi ve içindeki değer olarak bir string haline yada dizi (array) haline getirilmesine diyoruz. Bu yöntem özellikle ajax ile veritabanı işlemleri yaparken kullanılıyor.

İçinde 10 tane form elemanı olan bir form düşünelim, bu formu ajax kullanarak veritabanına yazmamız gerektiğinde her form elemanı için tanımlama yapmamız gerekir, işte serileştirme bu noktada işimize yarıyor, $(“form”).serialize(); dediğimizde otomatik olarak form serileştiriliyor ve istediğimiz gibi kullanabiliyoruz. Form serileştiğinde alan1=1&alan2=2&alan3=3&select1=test1 haline geliyor.

jQuery serileştirme işini dizi şeklinde de yapabiliyor. Serileştirme sonucunda oluşan veri yapısı şu şekilde oluyor;

[
    {
        name: "a",
        value: "1"
    },
    {
        name: "b",
        value: "2"
    },
    {
        name: "c",
        value: "3"
    },
    {
        name: "d",
        value: "4"
    },
    {
        name: "e",
        value: "5"
    }
]

Görüldüğü üzere çıktımız jSon data şeklinde oluyor. Bu sayede veriyi çok kolay bir şekilde işleyebiliyoruz. Kullanımı ise $(“form”).serializeArray(); şeklinde.

Her iki yönetimi form elementi kullanmadan diğer html elementleri içinede uygulamamız mümkün. Ekstradan yapmamız gereken tek şey * karakterini kullanarak element içindeki tüm elemanları belirtmek. Yani $(“div *”).serialize() gibi.. diyelim ki formumuz daki sadece input elementlerini serileştirmek istiyoruz bu seferde seçicimize sadece input ibaresini ekliyoruz $(“div input”).serialize()

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script><script type="text/javascript">// <![CDATA[
            $(document).ready(function(){

                $("form.seri button").click(function(){
                    var seriForm = $("form.seri").serialize();
                    $(this).parent().find("span").text(seriForm);
                });

                $("div.seri button").click(function(){
                    var seriForm = $("div.seri *").serialize();
                    $(this).parent().find("span").text(seriForm);
                });

                $("div.seriArray button").click(function(){
                    var seriForm = $("div.seriArray *").serializeArray();
                    var t = $(this).parent().find("span");
                    t.empty();

                    $.each(seriForm, function(i,item){
                        t.append(item.name +"="+ item.value);
                    });
                });

            })

// ]]></script>
</pre>
<form class="seri">
<h3>Form Serileştirme</h3>
 <input type="text" name="alan1" />
 <input type="text" name="alan2" />
 <input type="text" name="alan3" />
<select name="select1"> <option>test1</option></select>
<select name="select1"> <option>test2</option></select>
<select name="select1"> <option>test3</option></select>

 <button type="button">serileştir</button>
 </form>
<div class="seri">
<h3>Div Serileştirme</h3>
 <input type="text" name="alan1" />
 <input type="text" name="alan2" />
 <input type="text" name="alan3" />
<select name="select1"> <option>test1</option></select>
<select name="select1"> <option>test2</option></select>
<select name="select1"> <option>test3</option></select>

 <button type="button">serileştir</button></div>
<div class="seriArray">
<h3>Div Array olarak Serileştirme</h3>
 <input type="text" name="alan1" />
 <input type="text" name="alan2" />
 <input type="text" name="alan3" />
<select name="select1"> <option>test1</option></select>
<select name="select1"> <option>test2</option></select>
<select name="select1"> <option>test3</option></select>

 <button type="button">serileştir</button></div>
<pre>

Serileştirme, çok zahmetli işleri kolayca ve hızlı bir şekilde yapmamıza olanak sağlıyor ;) Örneklerin çalışır haline buradan bakabilirsiniz.

Burada dünya kadar hakaret ve sizin sinir olduğunuz şeylerin yazılı olduğunu varsayın. Okuduklarınız sinirinizi bozsun, akşam başınızı yastığınıza koyduğunuzda buradaki hayal ettiğiniz yazıları düşünün ve uyumayın. Herkesin eğlendiği bir durumda bu yazılar aklınıza gelsin ve siz eğlenemeyin.

İşte uzun zamandır içinde bulunduğum durum bundan ibaret, sadece düşünüyorum ve sinirlerim bozuluyor.

Başlıktan bir şey anlamamış olabilirsiniz ama eğer Ado.Net Entity ile ilgiliyseniz bu yazı çok hoşunuza gidecek ;)

3-5 dakika önce Google Reader dan Code First Migrations: Walkthrough of August 2011 CTP başlığıyla gördüğüm yazıyı hemen sizlerle paylaşmak istedim.

Bildiğiniz üzere eğer modelinizi code-first yaklaşımıyla oluşturmuşsanız ve projenizi çalıştırmışsanız veritabanı otomatik olarak oluşuyor ve sonrasında modelinizde yaptığınız değişikliği veritabanına uygulamak için context inizin içine “System.Data.Entity.Database.SetInitializer(new System.Data.Entity.DropCreateDatabaseIfModelChanges<Test.Models.TestContext>());” ifadesini ekleyerek modeldeki güncellemeyi veritabanımıza uyguluyorduk. Fakat bu yöntemde istenmeyen bir durum oluşuyor ve eğer veritabanında bilgi varsa bilgilerde gidiyordu çünkü bu kod veritabanını komple kaldırıp yeniden oluşturarak güncelleme işini yapıyordu. Artık bu can sıkıcı durumdan kurtuluyoruz !

Yapmamız gereken tek şey projemize “EntityFramework.SqlMigrations” paketini eklemek. Sonrasında yeni bir alanı güncellemek için paket yönetici konsoluna “Update-Database” komutunuı yazıp çalıştırmamız yeterli oluyor. Eğer varolan bir alanın adını güncellemek istiyorsak “Update-Database -Renames:”kullanici.Email=>kullanici.EmailAddress”” komutunu çalıştırmamız yeterli. SqlMigrations’ un diğer özelliklerine buradan bakabilirsiniz. Bu işlemler yapılırken veritabanı içindeki bilgi kaybolmuyor sadece ilgili değişiklikler yapılıyor.

Bu mekanızma sayesinde önemli bir açığın kapandığını düşünüyorum, yukarda da belirttiğim gibi can sıkıcı bir durumdu ve iki türlü iş ile uğraşıyorduk. Biraz alel acele yazmak zorunda kaldım fakat durum sanıyorum anlaşılmıştır :)

Türkiye’ de yapılacak olan ilk olimpik oyunlar, Trabzon 2011 Avrupa Gençlik Olimpik Oyunları olacak. Bu durum beni hem Türkiye’ m hemde Trabzon’ um adına çok mutlu ediyor vede heyecanlandırıyor.

Biz Sözenler Bilgisayar olarak yanlışta hatırlıyor olabilirim, portalı yapmaya başladığımızda sayacımızda 500 küsür gün yazıyordu, bugün ise sadece 6 gün yazıyor. Sürecin hemen hemen başından beri bu organizasyonda bir rol almak bizi gerçekten gururlandırıyor. Bu durumun bilincinde olarak elimizden gelen tüm gayreti göstermeye çalışıyoruz.

Son 6-7 gündür organizasyonun yönetim merkezinde bulunan basın binasının 3. katında, Olimpiyatların tüm bilişim teknoloji alt yapısının ihalesini alan, Türkiye’ nin en önemli bilişim şirketlerinden biri olan Innova ile birlikte çalışıyorum. Ahmet arkadaşımla birlikte portaldan sorumluyuz.

Bu ekipte görev almaktan son derece mutluyum, çok sıcak bir çalışma ortamımız var. Yöneticisinden çalışanına kadar herkesle çok kısa bir zamanda kaynaştık, hepsi süper insanlar. Günlerin çok yoğun geçmesine rağmen ufflayan kimseye rastlamadım, herkes sorumluluğunun bilincinde elinden gelenin en iyisini yapmaya çalışıyor.

Her gün yeni bir şey öğrendiğim bu ortamda, çok büyük bir tecrübe kazandığımı, kazanacağımı düşünüyorum. Bana yazılım geliştirme anlamında fazla bir katkısı olmasa da, yeni insanlar tanıma, çalışma ortamı, iş bölümü, işlerin işleyişi, çalışanın motivasyonu, projenin her açıdan analiz edilmesi, farklı kavramlar ve aynı iş dilini farklı dillerde konuşan onlarca insanın bir arada olmasının getirdikleri gibi.. bir sürü tecrübeye sahip oluyorum. Olimpiyat sırasında ise bizi nelerin beklediğini tahmin bile edemiyorum, inşallah Allah yüzümüzü kara çıkartmaz da Türkiye‘ mize Trabzon‘ umuza yakışır bir iş çıkartırız.

Olimpiyat ile ilgili tecrübelerimi fırsat buldukça paylaşmaya çalışacağım. Durmak yok çalışmaya devam :)

ADO.Net Entity’ e başlangıç yapmak için faydalı olacağına inandığım bir eKitap yazdım. Umarım konuya ilgi duyan arkadaşların işine yarayan bir kaynak olmuştur. Gelen istekler üzerine sürekli güncellemeye çalışacağım bu kitabı buradan indirebilirsiniz. Olumlu olumsuz görüşlerinizi belirtirseniz çok mutlu olurum ;)

Başlık biraz karışık oldu sanırım, biraz açayım. Profil sayfası kişiselleştirme dediğim; Twitter, FriendFeed gibi sayfalarda arkaplan resmini, konumunu ve renkleri isteğimize göre düzenleyebiliyoruz, yani profilimizi kişiselleştirebiliyoruz. ComplexType ise ilk konudan bir hayli alakasız aynı zamanda ComplexType olayını anlamak için çok alakalı. En kaba tabirle; modelimizde ki belirli özellekleri kümelediğimiz ve kod yazarken bize çok büyük kolaylık sağlayan bir yaklaşım.

Öncelikle modelimizi oluşturalım ve ComplexType nedir ona bir bakalım. Senaryo şu şekilde. Kullanıcılarımız sayfalarını istedikleri gibi kişiselleştirebiliyor. Bu sebepten dolayı ilgili bilgileri veritabanında tutmamız gerekiyor. Öte yandan kullanıcıya ait ana bilgileride veritabanında tuttuğumuzu düşünürsek karışıklık olmasın diye bu iki tabloyu birbirinden ayrı ve ilişkilendirilmiş bir şekilde tasarlamamız olası bir durum. ComplexType ile birlikte bu karmaşayı ortadan kaldırabiliyoruz. Tablonun içinde tüm alanlar bulunuyor fakat kod yazarken kümelediğimiz isim üzerinden ilgili alanlara ulaşabiliyoruz. Örneğin bu kullanıcının adres bilgileri de aynı tabloda olsaydı, oldukça karmaşık bir durum söz konusu olacaktı. Aşağıda ki modelde kullanici isimli sınıfın içine kisisel adında bir ComplexType tanımlıyoruz ve kod yazarken kullanici yazıp noktaya bastığımızda, kisisel adında bir özellik görüyoruz, bu özelliğin içinde ise kisisel sınıfı içindeki alanlara erişebiliyoruz. Bu durumda veritabanımız şu şekilde oluşuyor;

Gördüğünüz gibi kisisel_ ön ekiyle birlikte alanlarımız oluşmuş oldu. Buradaki isimlendirmeyi Fluent Api ile birlikte düzenlememiz de mümkün. Eğer adres bilgilerinide kümelediğimiz bir ComplexType ımız olsaydı aynı tablo içinde adres_ ön ekiyle ve kullanıcı modelini kullanırken kullanici.adres.* şeklinde ilgili alanlara erişebilecektik, bu sayede kod yazarken adresle ilgili bilgilerin adresin altında, kişiselleştirme ile ilgili bilgilerin kisiselin altında olduğunu anlayacaktık ;) Konuyla ilgili uygulama yaparsanız çok daha iyi anlayacaksınız.

Projemizde kullanacağımız modelimiz aşağıdaki gibi olacak..

    public class kullanici
    {
        public kullanici() {
            kisisel = new kisisel();
        }

        public int id { get; set; }
        public string kullaniciAdi { get; set; }
        public string eposta { get; set; }
        public string sifre { get; set; }
        public kisisel kisisel { get; set; }
    }

    public class kisisel
    {
        public string bgColor { get; set; }
        public string bgImage { get; set; }
        public string bgPosition { get; set; }
        public string bgStyle { get; set; }
    }

Modelimizi oluşturduktan sonra işin zevkli kısmına geçebiliriz. Modelimize ait kontrollerimizide oluşturduktan sorna, Edit.cshtml sayfasına girip ilgili düzenlemeleri yapıyoruz. Kişiselleştirme için arkaplan rengini düzenleyeceğimizden bir renk seçme paletine ihtiyacımız var, ben farbtastic i kullandım. Mevcut Edit.cshtml sayfasına farbtastic in dosyalarını ekliyoruz ve şu şekilde değiştiriyoruz.

@model profilKisisellestirme.Models.kullanici

@{
    ViewBag.Title = "Edit";
}

<h2>Edit</h2>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/farbtastic.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Content/farbtastic.css")" rel="stylesheet" type="text/css" />

 <script type="text/javascript" charset="utf-8">
     $(document).ready(function () {
         var f = $.farbtastic('#picker');
         var p = $('#picker').hide();
         var selected;
         $('.colorwell')
          .focus(function () {
              if (selected) {
                  $(selected).removeClass('colorwell-selected');
              }
              f.linkTo(this);
              p.show();
              $(selected = this).addClass('colorwell-selected');
          });

         $("input[name=bgPosition]").change(function () {
             var s = $(this).attr("checked");
             var b = $("body");
             if (s) {
                 b.css({ backgroundAttachment: 'scroll', backgroundRepeat: 'repeat repeat' });
             }
             else {
                 b.css({ backgroundAttachment: 'fixed', backgroundRepeat: 'no-repeat no-repeat' });
             }
         });

     });
 </script>

@using (Html.BeginForm("Edit","kullanici",FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    string strColor = "#5c87b2";

    if (!string.IsNullOrEmpty(Model.kisisel.bgColor))
    {
        strColor = Model.kisisel.bgColor;
    }

    string strPosition = "";

    if (!string.IsNullOrEmpty(Model.kisisel.bgPosition))
    {
        if (Model.kisisel.bgPosition.Contains("scroll"))
        {
            strPosition = "checked";
        }
    }    

    @Html.ValidationSummary(true)
    <fieldset>
        <legend>kullanici</legend>

        @Html.HiddenFor(model => model.id)

        <div class="editor-label">
            @Html.LabelFor(model => model.kullaniciAdi)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.kullaniciAdi)
            @Html.ValidationMessageFor(model => model.kullaniciAdi)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.eposta)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.eposta)
            @Html.ValidationMessageFor(model => model.eposta)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.sifre)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.sifre)
            @Html.ValidationMessageFor(model => model.sifre)
        </div>
        <hr />

        <div style="width:500px">

            <div class="editor-label">
                <strong>Kişiselleştirme</strong>
            </div>

            <div class="editor-label">Arka resmi</div>
            <div class="editor-field">
                <input type="file" name="bgImageFile"/>

                @if (!string.IsNullOrEmpty(Model.kisisel.bgImage))
                {
                    <br />
                    <a href="?bgClear=true"><strong>Arkaplanı kaldır</strong></a>
                }

                <input type="hidden" name="bgImage" value="@Model.kisisel.bgImage" />

                <p style="margin-top:10px;color:Gray">
                    Yükleyeceğiniz fotoğraf en fazla <strong>750kb</strong> ve uzantısı <strong>jpg, png</strong> olabilir.
                </p>
            </div>

            <div id="picker" style="float: right;"></div>
            <div class="editor-label">Arka plan rengi</div>
            <div class="editor-field">
                <input type="text" name="bgColor" class="colorwell" value="@strColor" />
            </div>

            <div class="editor-label">
            Arkaplan tekrar etsin <input type="checkbox" name="bgPosition" @strPosition />
            </div>

        </div>

        <p>
            <input type="submit" value="Save" />
        </p>
    </fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

Son olarakda _Layout.cshtml içindeki tagını <body style=”@Session["bgStyle"]“> şeklinde değiştiriyoruz.

Mekanızmanın mantığından biraz bahsetmek istiyorum. Öncelikle anlık renk değişimi ve arkaplanın pozisyonunu nasıl ayarladığımızdan bahsedeyim. Aslında bahsedecek çok fazlada bir şey yok, jQuery ile ilgili değişikliklerin olduğu form elemanlarını yakalayıp ilgili değişiklikleri sayfaya uyguluyoruz. Renk değişimini uygulamak içinse farbtastic.js içine 247. satıra $(“body”).css(“backgroundColor”,fb.color); kodunu ekliyoruz, diğer kodlar şu şekilde;

 $(document).ready(function () {
         var f = $.farbtastic('#picker');
         var p = $('#picker').hide();
         var selected;
         $('.colorwell')
          .focus(function () {
              if (selected) {
                  $(selected).removeClass('colorwell-selected');
              }
              f.linkTo(this);
              p.show();
              $(selected = this).addClass('colorwell-selected');
          });

         $("input[name=bgPosition]").change(function () {
             var s = $(this).attr("checked");
             var b = $("body");
             if (s) {
                 b.css({ backgroundAttachment: 'scroll', backgroundRepeat: 'repeat repeat' });
             }
             else {
                 b.css({ backgroundAttachment: 'fixed', backgroundRepeat: 'no-repeat no-repeat' });
             }
         });

     });

Geri kalan kısımda ise veritabanına bilgi ekliyoruz ve fotoğraf yüklüyoruz. Ben bu örnekte kullanıcının kişiselleştirilmiş style bilgisini Session da tuttum, kullanıcı sisteme giriş yaptığında bu bilgiyi güncellemek yeterli. Siz kendi yapınızda nasıl kullanmak istiyorsanız o şekilde kullanabilirsiniz. Projenin çalışır halini ve kodlarını incelediğinizde esasında olayın çok basit olduğunu fark edeceksiniz. Umarım faydalı bir yazı olmuştur :)

Uyarı: Bu mekanızma tamamen eğitsel amaçlıdır, kullanımdan doğacak güvenlik problemlerinden beni sorumlu tutmay

Projenin çalışır haline buradan bakabilir, buradan indirebilirsiniz.