Ana Sayfa
Microsoft Ajax Toolkit ile Data İşlemleri - 1
Merhaba arkadaşlar, bu makalemizde Microsoftun Ajax Toolkit kütüphanesini kullanarak Database işlemlerine giriş yapacağız. Giriş niteliğinde olan bu makalede Javascript ve C# bildiğiniz varsayılmaktadır.
Senaryo : Kişisel blogumuz için admin paneli yapacağız. Makalelerimizi görüntüleyecek, silecek, ekleyecek ve güncelleyeceğiz. Tamamen HTML kontroller kullanarak geliştireceğiz projemizi. Nedeni ise, HTML kontrollerin Server side kontrollere göre daha hızlı ve Valid(XHTML) olmasıdır.
Gereksinimler :
- Visual Studio 2008 veya Visual Web Developer
- .Net Framework 3.5
- Ajax Toolkit 3.5
Visual Studio 2008 imizi yada Visual Web Developer 2008 imizi açarak New Web Project ile yeni web projesi açıyoruz. Sonra Projemize Article.cs adında yeni bir Class dosyası ekliyoruz. İçeriğini aşağıdaki gibi düzenliyoruz.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
///
/// Summary description for Article
///
[Serializable]
public class Article
{
public Article(int articleID, string articleTitle)
{
this.intArticleID = articleID;
this.strArticleTitle = articleTitle;
}
public Article() { }
private int intArticleID;
private string strArticleTitle;
public int ArticleID
{
get { return intArticleID; }
set { intArticleID = value; }
}
public string ArticleTitle
{
get { return strArticleTitle; }
set { strArticleTitle = value; }
}
}
Yukarıda yaptığımız işlemi anlatmayacağım. Çünkü C# bildiğiniz varsayılarak anlatılmaktadır makale. Eğer takılanlar olursa web sitemden mail atmaları yeterli olacaktır. Yukarıdaki gibi classımızı düzenledikten sonra projemize ArticleService adında yeni bir web service ekliyoruz. Onunda içeriğini aşağıdaki gibi düzenliyoruz.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Web.Script.Services;
///
/// Summary description for ArticleService
///
[WebService(Namespace = http://tempuri.org/)]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService] // AJAX ATTRIBUTE
public class ArticleService : System.Web.Services.WebService
{
private string strConn = String.Empty;
public ArticleService()
{
}
[WebMethod]
public Article[] GetArticles()
{
List<Article> list = new List<Article>();
list.Add(new Article(1, "Ajax İle Süper Şeyler 1"));
list.Add(new Article(2, "Ajax İle Süper Şeyler 2"));
list.Add(new Article(3, "Ajax İle Süper Şeyler 3"));
list.Add(new Article(4, "Ajax İle Süper Şeyler 4"));
list.Add(new Article(5, "Ajax İle Süper Şeyler 5"));
list.Add(new Article(6, "Ajax İle Süper Şeyler 6"));
list.Add(new Article(7, "Ajax İle Süper Şeyler 7"));
return list.ToArray();
}
}
Web servisimizde ilk olarak bir adet web method tanımladık. Article Tipinde array döndüren bu methodumuz Select Görevi görecek. Kod tarafında tüm işlemlerimizi tamamladık. Şimdide HTML ve Javascript tarafındaki düzenlemeleri yapacağız. Makalemizde yoğunlaşacağımız alan JAVASCRIPT kısmı olduğu için bu kısımlara özellikle dikkat etmenizi öneriyorum. Yeni bir AJAX Web Form açın ve içerisini aşağıdaki gibi düzenleyin.
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>title>
<script type="text/javascript">
function pageLoad() {
CallWebMethod("select");
}
function CallWebMethod(methodType) {
switch (methodType) {
case "select":
ArticleService.GetArticles(FillArticleList, ErrorHandler, TimeOutHandler);
break;
}
}
function FillArticleList(result) {
var select = document.getElementById("Article");
for (var i = 0; i < result.length; i++) {
var option = new Option(result[i].ArticleTitle, result[i].ArticleID);
select.options.add(option);
}
}
function TimeOutHandler(result) {
alert("Timeout :" + result);
}
function ErrorHandler(result) {
var msg = result.get_exceptionType() + " ";
msg += result.get_message() + " ";
msg += result.get_stackTrace();
alert(msg);
}
function AlertMethod() {
var select = $get("Article");
alert(select.options[select.selectedIndex].value);
}
script>
head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="ArticleService.asmx" />
Services>
asp:ScriptManager>
<select id="Article" onchange="AlertMethod()">
select>
form>
body>
html>
Yukarıda bulunan kod satırlarını teker teker anlatmaya başlayalım. Dikkatli ve tekrar tekrar okumanızı tavsiye ediyorum. Karışık olduğu için kafanız karışabilir. (Tecrübeyle Sabittir.).
function pageLoad() {
CallWebMethod("select");
}
İlk olarak javascript kısmından başalayarak devam edelim.
function pageLoad()Metodumuzda sayfamız yüklenirken CallWebMethod adındaki Javascript Metodumuzu çağırıyoruz.
function CallWebMethod(methodType) {
switch (methodType) {
case "select":
ArticleService.GetArticles(FillArticleList, ErrorHandler, TimeOutHandler);
break;
}
}
function CallWebMethod(methodType)adındaki metodumuzun sayfa yüklenirken çalıştığını yukarıda belirtmiştim. Bu method verilen olaya göre hangi işlemin yapılacağını belirler. Örneğin
CallWebMethod(?select?) yazarsak select metodunu çalıştırır. Bu metod en önemli metodlarımdan dersek yanlış olmaz tüm işimizi bu method hallediyor. Ben ilk olarak select işlemi için kod yazdım daha sonra ekleyerek birlikte hepsini bitireceğiz. CallWebMethod içerisinde switch sözcüğü ile hangi işlemin yapılacağını seçtik select geldi. Select seçildiğinde karşımıza aşağıdaki kod satırı geliyor.
ArticleService.GetArticles(FillArticleList, ErrorHandler, TimeOutHandler);
Bu satırın açıklaması gayet net aslında. ArticleService servisimizin adı. GetArticles ise web methodumuzun adı. Aldığı parametrelere dikkat etmenizi tavsiye ederim. Aldığı ilk parametre FillArticleList adındaki metodumuz. Servisin çalışması bittiğinde bu metod çalışacaktır. Daha sonra bu metod nasıl çalışıyor onuda inceliyor olacağız. İkinci parametremiz ErrorHandler, bu parametremizde eğer servisin çalışması sırasında herhangi bir hata ile karşılaşılırsa ErrorHandler metodumuz çalışacak. Son ve üçüncü parametremiz ise zaman aşımı olunca çalışacak olan metodumuzun adıdır TimeOutHandler.
Şimdi sırayla parametre olarak verdiğimiz metodlarımızı inceleyelim.
Birinci Parametre Methodu
function FillArticleList(result) {
var select = document.getElementById("Article");
for (var i = 0; i < result.length; i++) {
var option = new Option(result[i].ArticleTitle, result[i].ArticleID);
select.options.add(option);
}
}
İlk parametre olarak verdiğimiz FillArticleList metodu result adında bir parametre alıyor. Bu parametre Web servisten sonuç olarak dönen değeri temsil eder. Array olarak döndürmemizin sebebini şimdi daha iyi anlamışsınızdır. String döndürseydik gelen tüm verileri split etmek zorunda kalacaktık sonra onların uzunluğu kadar dönecektik. Uzun iş yani. Metodun içerisinde girdiğimizde html alanında tanımladığımız select elementini select değişkenine attık. Sonra Metodumuzun aldığı parametrenin değer uzunluğu kadar dönecek bir döngü yarattık. Döngümüzün yaptığı iş basit. Htmlde bulunan select elemeninin içerisine option element ekleyecek ve eklenen option elementinin value ve text ine verdiğimiz değerleri yazacak. Verdiğimiz değerlere dikkat ediniz. ArticleID ve ArticleTitle bizim ilk başta yarattığımız classın Propertylerinden başka bir şey değil ?.En son olarak yarattığımız option elementi select içerisine dahil ediyoruz.
İkinci Parametre Methodu
function ErrorHandler(result) {
var msg = result.get_exceptionType() + " ";
msg += result.get_message() + " ";
msg += result.get_stackTrace();
alert(msg);
}
İkinci parametre olarak verdiğimiz ErrorHandler metodu da result adında bir parametre alıyor. Bu parametre de gelen değeri alıyor. Eğer bir hata oluşursa result bu hata nesnesini alacaktır. Metod içerisine girdiğimizde ilk önce msg adında bir değişken tanımlıyoruz ve değer olarak dönen hata nesnesinin get_exceptionType() metodu ile hata tipini atıyoruz. Ayrıca her hata tipini bir satır aşağı atıyoruz ki birbiri içine girmesin. Birden fazla hatada oluşabilir. Sonraki satırda msg değişkenine hata mesajını ekliyoruz. Sonra hata detaylarını ekliyoruz. En son olarak hata mesajını MessageBox yardımı ile kullanıcıya aktarıyoruz.
Üçüncü Parametre Methodu
function TimeOutHandler(result) {
alert("Timeout :" + result);
}
Üçüncü parametre olarak verdiğimiz TimeOutHandler metodu da result adında bir parametre alıyor. Bu parametre de gelen değeri alıyor. Bu metod kısacık bi iş yapıyor gelen değeri kullanıcıya MessageBox içerisinde gösteriyor.
Projemizi çalıştırmadan önce yapmamız gereken bir kaç küçük ayar daha var. Script Manager kontrolümüze yazdığımızı scripti tanıtmak gibi.
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="ArticleService.asmx" />
Services>
asp:ScriptManager>
Yukarıda script manager içerisine Services tagı ekledik ve onunda içerisine ServiceReferance adında bir kontrol daha ekledik. Path yolarakta servisimizin bulunduğu yolu belirttik. En son işlem ise html select elementimize onchange olduğunda bir metodu çalıştırmasını söyleyeceğiz. O metodda aşağıda belirtildi.
function AlertMethod() {
var select = $get("Article");
alert(select.options[select.selectedIndex].value);
}
Yukarıdaki metod select elementinin selectedvalue değerini almak için kullanılıyor. Gelen değer kullanıcıya message olarak belirtiliyor.
<select id="Article" onchange="AlertMethod()">
select>
Select elementimizide ayarladıktan sonra projemizi test edebiliriz. Tamamen Ajax ile geldi verirlerimiz. Bu örneği geliştirmek sizin elinizde. Örneğin Progress bar eklemeyi deneyebilirsiniz. Sonraki makalelerimizde Insert, Update ve Delete işlemlerini inceliyor olacağız.
Örnek Projeyi İndir
Test Et
Word Dosyasını İndir