Ziyaretçilerinizin web sitenizi önemsemesini istiyorsanız, siz de onlara önem verdiğinizi göstermelisiniz. Birçok sitede bulunan iletişim formları, kullanıcıların öneri, istek  ve şikayetlerini hızlı bir şekilde ilgililere iletebilmesine imkan tanır. Bizde bu ay ASP.NET Ajax’ın yeteneklerinden faydalanarak şık ve hızlı çalışan bir iletişim formu oluşturacağız. Genel olarak kullanıcıların yazdıklarını belirlenen bir kişiye mail atarak ulaştıran iletişim formları, bizim yapacağımız örnekte bir adım öteye giderek bu işlemin hatasız bir biçimde sonlanmasını sağlayacak.

Senaryoyu biraz daha genişletip, iletişime geçilecek insan sayısını arttırmak da mümkün. Biz örneğimizde dergimiz yazarlarının listesine sahip bir formda kullanıcının istediği yazara hitap edebileceği bir uygulama dizayn edeceğiz. Buradaki problem yazarların aldığı eleştirilere cevap verebilmesi için mesajı yazan kullanıcının iletişim bilgilerinin de iletilmesi gerekliliği. Mesaj göndermek isteyen kullanıcının kendisine cevap verilebilmesi için adı, soyadı ve e-mail adresi gibi bilgilerinin mutlaka girilmesini bekliyoruz. ASP.NET’in formlardaki alanları kontrol edip geçerliliğini onaylayan bazı “Validator” nesneleri bu konuda bize yardım edebilirler.  Bu nesneler bir yazı kutusunun (text-box) boş bırakılmaması gerektiğini, yada girilen e-mail adresinin formata uymadığını kullanıcıya hoş bir dille hatırlatıp iletişim problemleri yaşanmasını engelliyorlar.

Blogumu takip eden yada Ajax ile ilgilenen biriyseniz, salt ASP.NET formlarının ne kadar can sıkıcı olduğunu  düşünebilirsiniz. Özellikle alanların hatalarını kontrol eden bir form olduğu için, böyle durumlarda sayfanın yenilenmesi ve bilgilerin kaybolması gibi sorunlar sizinle iletişime geçmek isteyen kullanıcınız için iyi bir deneyim olmayacaktır. Ajax ile klasik formları daha interaktif hale getirmek için yapmanız gereken ilk iş kullandığınız Visual Studio 2005 yada Web Developer Express Edition’a gereken http://ajax.asp.net adresindeki “Ajax Extensions” paketini indirerek kurmak. Eğer VS 2008 versiyonuna terfi ettiyseniz, ilgili kütüphaneler hazır geldiği için bir sonraki adıma geçebilirsiniz.

Form Hazırlıkları

Hazırlayacağımız formdaki bütün elemanların Ajax ile yenilenme (postback) işlemine tabi tutulmadan güncellenebilmesi için, araç kutusundaki ScriptManager ve UploadPanel nesnelerinizi sayfaya eklemeyi unutmayın. UploadPanel içerisinde bulunan nesnelerin Ajax ile desteklendiğini, yine de bazı elemanların AutoPostBack özelliğini “True” yaparak uyum sağlaması gerektiğini hatırlatarak, formumuzu oluşturmaya başlayalım. Örneğimizde, iki sütuna ayrılmış bir tablo oluşturarak, içinde dergi yazarlarının isimleri ve mail adreslerinin tutulduğu bir DropDownList’i ekliyoruz. Bu listenin altına kullanıcının bilgilerini girmesini istediğimiz Ad-Soyad, E-mail adresi, ve opsiyonel bir veri olarak URL alanını ekliyoruz. Formun en altına, mesaj ve konu alanları için TextBox nesneleri yerleştiriyoruz. Buradaki mesaj alanının TextMode özelliğini “MultiLine” ve row sayısını 10 olarak belirlersiniz, kullanıcılarınıza mesaj yazmaları için geniş bir alan yaratmış olursunuz. Son olarak bir gönder butonu, ve bu butonun altına gönderme işleminin sonuçlandığını bildirecek olan bir Label nesnesi ekleyerek formu tamamlıyoruz.

Alanların Kontrolü

İletişim formumuzun hedeflerinden biri de doldurulması zorunlu olan alanların dinamik kontrolü ve hatalı olanların kullanıcıya bildirilmesiydi. Bu işlem için araç kutusunun Validation bölümündeki araçları kullanacağız. Çeşitli Validator nesnelerini alanlara bağlayarak bu alanların doldurululduğunu (RequiredFieldValidator), aldığı değerlerin belirli bir aralıkta olduğunu (RangeValidator) veya belirli bir formata uymasını (RegularExpressionValidator) kontrol edebilirsiniz. Örneğimizde, doldurulması zorunlu olan yazar seçimi, isim, e-mail, konu ve mesaj alanları için RequiredFieldValidator nesnelerini sayfamıza ekliyoruz. Her bir nesnenin ControlToValidate özelliğinde hangi alanı kontrol etmesini istiyorsak bunu seçerek ilişkilendirmesini yapmamız lazım. Ayrıca “ErrorReport” ve “Text” özelliklerine yazdığımız hata mesajları ile kullanıcının nerede hata yaptığını görmesini sağlayabiliriz.


Validation nesnesini formdaki alanlardan birine bağlamalısınız.

Yazarlarımızın kullancılara cevap verebilmesi için E-Mail alanı son derece önemli. Kullanıcının girdiği adresin düzgün yazılıp yazılmadığını yine validator nesneleri ile kontrol etmemiz mümkün. Araç kutusundan sayfamıza ekleyeceğimiz bir RegularExpressionValidator nesnesi, bağlandığı alana istenen formatta yazı girilmesini denetliyor. Sayfamızdaki e-mail alanında bu nesneyi kullanabilmek için ControlToValidate özelliğinden ilgili TextBox nesnesini seçmeli, ErrorReport ve Text özelliklerine hata mesajlarını yazmalı ve ValidationExpression özelliğine tıkladığınızda çıkan menüden  “Internet E-mail Address” seçeneğini işaretlemeliyiz. Bu eklentiyle formdaki e-mail alanı kontrol edilecek ve düzgün bir e-mail adresi girilmediğinde (ör: boşluklu veya @ karakteri olmayan) kullanıcıya hata mesajı döndürülecek.


RegularExpressionValidator değişik türlerdeki alanları denetliyebiliyor.


Validation nesneleri eklendikten sonra dizayn sayfamızın görüntüsü.

Email Gönderimi

Farkındaysanız Ajax tabanlı ve birçok denetimin kullanıldığı bir form oluşturduk ve tek satır kod yazmadık! Visual Studionun bizlere sunduğu araçlar ile kısa sürede hazırladığımız formumuzun e-mail gönderebilmesi için özlediğimiz kod ekranına girebiliriz. Bu noktada .Net Framework altındaki Mail sınıfının fonksiyonları bize yardımcı olacak, ama önce kod sayfasının en üstünde

using System.Net.Mail;

deklerasyonunu yaparak bu sınıf altındaki metodları sayfamıza dahil etmeliyiz. Daha sonra mail göndermek için gereken kodları Gönder butonunun click olayınının içerisine yazabiliriz. Dizayn ekranında butona çift tıklayınca bu kod bloğu sizin için oluşturulacaktır. Önce validator nesnelerinin isValid özelliklerini kontrol edip, formdaki bütün alanlar denetimden geçebilmiş mi diye bakıyoruz.
Sonraki aşama gerekli verileri alıp maili göndermek olacaktır. Yazmamız gereken kod bu şekilde:


protected void Button1_Click(object sender, EventArgs e)
{
        //Doldurulması zorunlu alanların kontrolü:
        if (RequiredFieldValidator1.IsValid && RequiredFieldValidator2.IsValid && RegularExpressionValidator1.IsValid && RequiredFieldValidator4.IsValid && RequiredFieldValidator5.IsValid)
        {
            /*Yeni mail nesnesi yaratıp, kullanıcının mail adresini ve sectigi yazarin DropDownList'ten dönen mail adresini ekliyoruz */
            MailMessage MyMail = new MailMessage(TextBox2.Text, DropDownList1.SelectedItem.Value);

            //Mailin konusunu ekliyoruz.
            MyMail.Subject = TextBox4.Text;

            /*Maile yazılacak mesajın üst kısmına kullanıcının isim ve url bilgilerini ekliyoruz */
            string gonder = "İsim: " + TextBox1.Text + "\nUrl: " + TextBox3.Text + "\nMesaj:\n" + TextBox5.Text;
            MyMail.Body = gonder;

            /*Yeni bir mail client yaratıp, sunucumuzdan maili ilgili kişiye gönderilmesini sağlıyoruz */
            try
            {
                SmtpClient MyClient = new SmtpClient("localhost", 25);
                MyClient.Send(MyMail);
            }
            catch (Exception ex)
            {
   /*Mail gönderme işlemi sırasında oluşan sunucu hatalarını kullanıcıya bilgilendirmeliyiz.*/
                Label2.Text = "Sunucudaki bir hata nedeniyle mail gönderilemedi.";
                return;
            }

            //Kullanıcıya işlemin tamamlandığına dair bir yazı gösteriyoruz.
            Label2.Text = "Mesajınız Gönderilmiştir!..";

            //Yeni bir mesaj için formdaki bütün alanları temizliyoruz.
            DropDownList1.SelectedIndex = 0;
            TextBox1.Text = "";
            TextBox2.Text = "";
            TextBox3.Text = "";
            TextBox4.Text = "";
            TextBox5.Text = "";

        }
    }


İletişim formumuz tepkisiz kullanıcılara isyan ediyor J

Toolkit Araçlarını Kullanmak

Tebrikler, artık elimizde kullanabileceğimiz başarılı bir iletişim formumuz var. Ancak yapabileceklerimiz bunlarla sınırlı değil. Önceki workshoplarda bahsettiğimiz control toolkit elemanlarını sayfamıza ekleyerek, kullanıcıların aldığı statik hata mesajlarını görsel açıdan daha güzel bir hale getirebiliriz. Bir hatırlatma yaparsak, Ajax Extensions ortaya çıktıktan sonra yayınlanan control toolkit kütüphanesi, internette yaygın bir şekilde kullanılan ajax uygulamalarını mevcut altyapının üzerine inşa edilen çeşitli araçlarla ASP.NET projelerimize eklememize imkan tanıyordu. Bu araçları kurmak için toolkit kütüphanesini http://www.codeplex.com/AtlasControlToolkit adresinden indirmeniz gerekmekte. Ardından Visual Studio araç kutusunda yeni bir sekme yaratıp, sağ tuş ile “Choose Items” komutuna tıkladıktan sonra açılan arayüzdeki Browse tuşuna tıklamalı, indirdiğiniz dosyalar arasında yer alan AjaxControlToolkit.dll dosyasını eklemelisiniz.


ControlToolkit araçlarıyla sayfamız daha interaktif bir görünüme kavuştu.

Artık dizayn sayfamıza geri dönebiliriz. Eklediğimiz toolkit araçları içerisindeki ValidationCalloutExtender, sayfamızda bulunan Validation nesnelerinin görünümünü değiştirecek özelliklere sahip. Bu aracı sürükleyerek sayfada kullandığımız her Validation nesnesinin yanına bir tane ekleyelim. Önceden denetimden geçemeyen alanların yanında kırmızı bir uyarı çıkaran Validation nesneleri, bu toolkit aracıyla birlikte kullanıcıya popup uyarılar göstererek iletişim formumuza profesyonel bir görünüm katacak. Bütün denetleyicilerin yanına bir ValidationCalloutExtender ekledikten sonra bu nesnelerin “TargetControlID” özelliğinden bir denetleyici seçerek birbirleriyle ilişkilendirin. Artık Validation nesneleri uyarı göstermek istediğinde, bağlı olduğu ValidationCalloutExtender çalışarak şık görünümlü bir popup uyarı gösterecek.  Öte yandan önceki tasarımımızda Validation nesnelerimizin Text özelliklerine yazdığımız yazılar hala gözükmeye devam edecektir. Yazı ve popup uyarılarının aynı anda ortaya çıkması güzel bir görüntü oluşturmayacağı için, validation nesnelerinin Text özelliğindeki yazıyı silebilir, yada bir * karakteriyle küçük bir uyarı vermeye devam etmesini sağlayabilirsiniz. Extender nesneleri ise Validation objelerinin ErrorMessage özelliğinde bulunan yazıyı okuyacaklar.


ValidationCalloutExtender nesneleri eklendikten sonra dizayn sayfamızın görünümü.

İletişime Geçin

Planladığımız iletişim formunu Ajax’ın imkanları ile tasarlayıp, Control Toolkit araçlarıyla görsel açıdan güzel bir hale getirdik. Hazırladığımız interaktif sayfa, ziyaretçileriniz ile daha iyi iletişim kurabilmenize olanak sağlarken, sitenizin prestijini arttıracaktır. Çeşitli araçlara sahip olan toolkit’i ASP.NET Ajax ile yaptığınız bütün projelerde gözden geçirmenizi tavsiye ederim.

p.s. Bu yazi Nisan 2008 tarihli PC Magazine makalemden derlenmistir; kullandigim IDE ve toolkitlerin yeni sürümlerini takip etmenizi tavsiye ederim :)

Related posts:

  1. ASP.NET Ajax Kullanarak Facebook Uygulamasi Gelistirmek
  2. ASP.NET AJAX ile dinamik RSS okuyucu hazirlamak