Makale Özeti

İnşallah hepimize yararlı olur. Makalemizin konusu her zamanki gibi Microsoft AJAX (ATLAS). Makalemiz orta seviye kullanıcılar için düzenlenmiş ve Proje açma kapatma çalıştırma gibi kısımlar atlanmıştır. Ayrıca JavaScript bildiğinizde varsayılmaktadır. Klasik Ajax ile çeşitli taklalar atarak yaptığımız XMLHTTPRequest nesnemizi sıkça kullandığımız ve güvenlikten ödün verdiğimiz işlemlere değiniyor olacağız. Nedir bu işlemler ?. Tabii ki INSERT,UPDATE ve DELETE işlemleri. Projelerimizde sıkça kullandığımız ve başımızın belası olan bir o kadarda güzel olan AJAX canımızı bu kısımda biraz sıkıyordu. Fakat Microsoft alın size ATLAS dedi ve hayatımıza renk kattı. Bu kısımdan Sonra ATLAS'a AJAX olarak hitap edeceğiz ve Klasik AJAX içinde aynen Klasik Ajax diyeceğiz. AJAX ile gelen en güzel özelliklerden birisi PageMethod lardır. PageMethodlar Server tarafında çalıştırdığımız kodlara Javascript ile erişmemizi sağlıyor. Yani Javascript ile Server-Side(Server Taraflı) kodlarımızı istemci(client) tarafında çalıştırabiliyoruz. Bu makalede sadece Insert kısmını inceleyeceğiz. Diğer makalelerimizde kendi yazmış olduğumuz özel nesne tipleri ile çalışıyor olacağız. Bu durumda select ve update kısımlarını es geçiyorum. Çünkü insert ile aynı mantığa sahip olduklarını düşünerek ve sizlerin hayal gücünüzü zorlamanıza da yardımcı oluyorum.

Makale

Merhabalar;

Uzun süredir yoğunluktan dolayı elime yazdığım makaleleri yayınlama fırsatı bulamamıştım. Fakat bundan sonra tam gaz makale yazmaya devam edeceğim. İlk olarak önceden yazdığım bir makaleyi daha fazla genişleterek ve düzenyerek yayınlamak istedim. İnşallah hepimize yararlı olur.

Makalemizin konusu her zamanki gibi Microsoft AJAX (ATLAS). Makalemiz orta seviye kullanıcılar için düzenlenmiş ve Proje açma kapatma çalıştırma gibi kısımlar atlanmıştır. Ayrıca JavaScript bildiğinizde varsayılmaktadır. Klasik Ajax ile çeşitli taklalar atarak yaptığımız XMLHTTPRequest nesnemizi sıkça kullandığımız ve güvenlikten ödün verdiğimiz işlemlere değiniyor olacağız. Nedir bu işlemler ?. Tabii ki INSERT,UPDATE ve DELETE işlemleri. Projelerimizde sıkça kullandığımız ve başımızın belası olan bir o kadarda güzel olan AJAX canımızı bu kısımda biraz sıkıyordu. Fakat Microsoft alın size ATLAS dedi ve hayatımıza renk kattı. Bu kısımdan Sonra ATLAS'a AJAX olarak hitap edeceğiz ve Klasik AJAX içinde aynen Klasik Ajax diyeceğiz. AJAX ile gelen en güzel özelliklerden birisi PageMethod lardır. PageMethodlar Server tarafında çalıştırdığımız kodlara Javascript ile erişmemizi sağlıyor. Yani Javascript ile Server-Side(Server Taraflı) kodlarımızı istemci(client) tarafında çalıştırabiliyoruz. Bu makalede sadece Insert kısmını inceleyeceğiz. Diğer makalelerimizde kendi yazmış olduğumuz özel nesne tipleri ile çalışıyor olacağız. Bu durumda select ve update kısımlarını es geçiyorum. Çünkü insert ile aynı mantığa sahip olduklarını düşünerek ve sizlerin hayal gücünüzü zorlamanıza da yardımcı oluyorum. Kısa tanımlamadan ve ön bilgiden sonra, öncelikle kendimize bir senaryo belirleyelim ve ardından malzeme listemizi verelim.

Senaryo: Bir şirkette bulunan personelimizin listesini tutacağız. Bunun için gerekli olan tablo yapısı aşağıda verilmiştir.

Malzeme Listesi

  1. 1 Adet Visual (Studio 2005, Studio 2008, Express Sürümleri)
  2. Ajax Toolkit yüklü 1 adet bilgisayar.
  3. SQL 2000 veya üzeri bir sürüm. (Fakat siz farklı bir yönetim sistemide kullanabilirsiniz).
  4. Son olarak bu makaleyi sonuna kadar okumak.

İlk olarak yapacağımız işlem kendimizi bir adet Web Projesi oluşturmak. Ben projemi oluşturdum ve AjaxPageMethodSample adını verdim. Page Method ları kullanabilmemiz için bir kaç ön ayar yapmamız gerekiyor. Sayfamızın en tepesinde(tepesinde derken Form etiketinin içerisinde) kesinlikle bir adet Script Manager bulunmalı. Script Manager'ınızı ekledikten sonra "EnablePageMethods" özelliğini "True" olarak ayarlıyoruz. Aşağıda kod parçası verilmiştir.

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" />

Yukarıda gördüğünüz gibi EnablePageMethods özelliği aktif edilmiş. Varsayılan değeri False olarak belirlenmiştir. Şimdi sıra geldi formumuzu diyazn etmeye. Yapacağımız ilk işlem Personel ekleme formu yapmak. Ben sizin için formu diyazn ettim. Aynen alıp kopyalayabilir veya kendi formunuzu yapılandırabilirsiniz. Ayrı bir sayfa oluşturmadım çünkü INSERT,UPDATE ve DELETE işlemlerimizi aynı sayfa üzerinde yapacağız. İsterseniz daha sonra siz ayrı ayrı yapabilirsiniz. Hayal gücünüze bağlı :).

<table cellpadding="3">

        <tr>

            <td style="background-color: #eee;" colspan="3">

                Personel Ekleme Formu

            </td>

        </tr>

        <tr>

            <td>

                Adı

            </td>

            <td>

                :

            </td>

            <td>

                <asp:TextBox ID="txt_Name" runat="server"></asp:TextBox>

            </td>

        </tr>

        <tr>

            <td>

                Soyadı

            </td>

            <td>

                :

            </td>

            <td>

                <asp:TextBox ID="txt_LastName" runat="server"></asp:TextBox>

            </td>

        </tr>

        <tr>

            <td>

                &nbsp;

            </td>

            <td>

                &nbsp;

            </td>

            <td>

                <asp:Button ID="btn_Save" runat="server" Text="Kaydet" OnClientClick="insertPerson(); return false;"/>

            </td>

        </tr>

    </table>

Personel Ekleme formumuzda 2 adet TextBox kontrolü ve bir adette Button kontrolümüz var. İlk olarak yapacağımız işlem Code-Behind tarafında PageMethod tanımlamak olacak. Sonra JavaScript tarafını yazmak olacak. Aşağıda PageMethod'umuzu yazdım ve şimdi de sizlerle hayati noktaları inceleyelim.

static string cnstr = "Data Source=192.168.0.2\\SQL2008EXPRESS;Initial Catalog=sample;User Id=sa;Pwd=77117722;";

        static string InsertString = "Insert Into Person (PersonName, PersonLastName) VALUES (@PName,@PLName)";

 

        [System.Web.Services.WebMethod]

        public static bool InsertPerson(string name, string lastname)

        {

            int affectedRows = 0;

            using (System.Data.SqlClient.SqlConnection connection = new System.Data.SqlClient.SqlConnection(cnstr))

            {

                using (System.Data.SqlClient.SqlCommand command = new System.Data.SqlClient.SqlCommand(InsertString, connection))

                {

                    System.Data.SqlClient.SqlParameter nameParam = new System.Data.SqlClient.SqlParameter("PName", name);

                    System.Data.SqlClient.SqlParameter lastNameParam = new System.Data.SqlClient.SqlParameter("PLName", lastname);

                    command.Parameters.Add(nameParam);

                    command.Parameters.Add(lastNameParam);

                    connection.Open();

                    affectedRows = command.ExecuteNonQuery();

                    connection.Close();

                }

            }

 

            if (affectedRows <= 0)

                return false;

            else

                return true;

 

        }

Dikkat ederseniz bildiğimiz public static method tanımladık. Tek değişik olan şey Üst kısımda bulunan metodun bir web method olduğunu belirten Attribute değişik. Eğer bunu PageMethodunuzun başına eklemezseniz istemci tarafından erişemezsiniz. Ayrıca diğer dikkat edilmesi gereken hususta metodun public ve static olması. Yine aynı şekilde public static olmazsa istemci tarafından erişmemiz mümkün olmaz. Bunlar haricinde her şey bildiğiniz gibi. Geri gönüş tipini isterseniz .Net içerisindeki veri tiplerinden veya nesnelerden döndürürsünüz isterseniz kendi yazmış olduğunuz tiplerden döndürürsünüz. Bu kısım tamamen sizin isteğinize bırakılmıştır. Sıra İstemci tarafındaki atraksiyonlara geldi. Javascript yazarak InsertPerson adlı methodumuzu istemci tarafından çalıştıracağız ve dönen sonuca göre kullanıcıya alert (Uyarı Kutusu) göstereceğiz. İstemci tarafında daha fazla duracağız çünkü bu kısım diğer kısımdan daha önemli. Neden derseniz, Code-Behind kısmında mantık hatası dışındaki hataları derleyici uyarı vererek programın çalışmasını engeller. Fakat Javascipt tarafındaki kısımlar dikkate alınmaz bu nedenle daha dikkatli ve uzmanca kod yazmak gerekir. Javascipt tarafındaki kodumuz aşağıdaki gibidir. Kodu sizler kısa bir süre inceledikten sonra bende satır satır ne yaptık ne amaçla yaptık anlatacağım. Görüşmek üzere :).

<script type="text/javascript">

        function insertPerson() {

            var txtName = $get("txt_Name");

            var txtLastName = $get("txt_LastName");

            PageMethods.InsertPerson(txtName.value, txtLastName.value, onComplete, onFailed);

        }

 

        function onComplete(args) {

            if (args)

                alert('İşlem Başarılı Oldu');

            else

                alert('İşlem Başarısız Oldu. Yeniden Deneyiniz...');

        }

 

        function onFailed(error) {

            alert('Yapılan işlem sırasında aşağıdaki hata(lar) oluştu.\n\r' + error.get_message());

        }

    </script>

İncelemeyi bitirdiğinize göre açıklamalara başlayalım. Görüğünüz gibi 3 adet fonksiyon tanımladık. İlk açıklamamız gereken Javascript fonksiyonumuz insertPerson(). Asıl işi bu fonksiyonumuz başlatıyor ve yürütüyor. Fomumuzda bulunan button kontrolünün OnClientClick Özelliği ile çalıştırılıyor.

var txtName = $get("txt_Name");

var txtLastName = $get("txt_LastName");

Yukarıdaki kısımlarda AJAX kütüphanesinin bize sunduğu nimetlerden birisi olan Selector yapılarını kullandık. $get metodu bir adet string parametre alıyor ve bunun sonucunda Html sayfasında bulunan nesneyi döndürüyor. Eski yöntemle karşılaştıracak olursak aslında arkasında tam olarak şöyle bir şey var document.getElementByID('elemenID'). bu kadar uzun bir şeyi kim yazmak isterki :). Ben istemem şahsen. Nesnenin id sini veriyorsunuz ve size o html elementini geri döndürüyor. Oldukça yararlı bir kısaltma. Geldik işin en önemli kısmına.

PageMethods.InsertPerson(txtName.value, txtLastName.value, onComplete, onFailed);

Yukarıdaki satır insert işlemini icra eden satırımız. PageMethods. yazarak "Ben PageMethod kullanacağım hazır ol." diyoruz. Ardından Server tarafında (Code-Behind) yazdığımız Web Method'un ismini yazıyoruz. PageMethods.InsertPerson sonucu ile yola devam ediyoruz. Hemen bir "(" açıyoruz ve InsertPerson adlı WebMethod'umuzun aldığı parametrelerin değerlerini veriyoruz. Biz bu değerleri textboxlardan aldığımız için bunların değerlerini veriyoruz yani Value'larını (Mutlaka biliyorsunuzdur ama ben hatırlatayım ASP.NET içerisinde kullanılan tüm kontroller çalışma zamanında HTLM kontrollerine çevirilirler). Method'umuzun aldığı değerleri verdikten sonra iki tane fonksiyon giriyoruz bunlardan ilki onComplete fonsiyonu. Bu fonksiyon PageMethod'un işlemi bittikten sonra çalışır. ve geriye Web Methodumuzun döndürdüğü değeri döndürür. bizim methodumuz Boolean bir değer döndürdü için biz direk olarak if ile değeri kontrol ettik ve işlem ne durumda mesaj verdik kullanıcımıza. Sonuç olarak aşağıdaki görüntüyü alıyoruz.

Mehmet KURT

İkinci verdiğimiz fonksiyon ise işlemler sırasında bir hata oluşursa çalışması gereken fonksiyondur. Bu fonksiyonda yine hatayı döndürür ve değişken.get_message() şekilde hata alınır ve uygun bir yerde kullanılır.

Bizim yaptığımız bu işlem tamamen basite indirgenmiştir. Hayal gücünüzü zorlayarak inanılmaz derecede esnek ve hızlı yapılar ortaya çıkartabilirsiniz. Projenin örneğini eklerde bulabilirsiniz.

 

Mehmet KURT
www.mehmetkurt.net

Cross Site Scripting

ASP.NET Spiced: AJAX

Ajax Toolkit Page Methods Örneği