Makale Özeti

Bu yazımda XML in HTML içinde kullanımı sağlayan bir ActiveX Kontrolden bahsedeceğim: Microsoft.XMLDOM

Makale

XMLDOM

Bu yazımda XML in HTML içinde kullanımı sağlayan bir ActiveX Kontrolden bahsedeceğim: Microsoft.XMLDOM.

Bilindiği üzere XML önemli bir dönemeçti iletişim dünyası için. XML hiyararşi getirdi, okunma kolaylığı getirdi, standart getirdi vs vs. XML faydalı bir teknoloji işte Bu yazıda XML in faydasını anlatmayacağım. Bu faydalı teknolojinin javascriptte kullanım yollarından biri olan XMLDOM dan ve bunun ASP.NET içerisinde kullanımından bahsedeceğim size.

XMLDOM aslında Microsoft tarafından sunulmuş bir ActiveX kontroldür. Bu teknoloji  aslında AJAX metodunun kullanım yollarından biridir. AJAX (Asynchronous JavaScript and XML) metodu; asenkron(eş zamanlı olmayan) olarak JavaScript ve XML'i kullanan bir kaç teknolojinin ortak çalışmasıyla ortaya çıkmış bir metoddur.

Peki niye bu kontrolü kullanmalıyız? Çünkü ben bir kullanıcı olarak sayfanın olur olmaz her yerde post edilmesini sevmiyorum. Bu hem yavaslık hemde kötü bir görüntü sergiliyor. Örneğin aşağıda konuyla ilgili yaptığım örnekte olduğu gibi il ve ilçeleri listeleyen 2 DropDownList düşünün. Burada ili seçiyosun ve sırf sayfada ilçe  DropDownList Kontrolü değişecek diye bütün sayfa post ediliyor. Bunu engellemek için bile bu XMLDOM kullanılır bence.

XMLDOM u kavramsal olarak açıklamaya çalıştım. Şimdi örnek bir uygulama yaparak konuyu açmayı hedefliyorum. Bu uygulamada il ve ilçeleri, XMLDOM nesnesi kullanarak, iki adet dropdownlist içine yerleştireceğiz.

Bunun için önce yeni bir Web uygulaması açalım. İsmini XMLDOMIlIlceCombo verelim.

İlk olarak verileri xml olarak alacağımız bir sayfa yapmamız gerekiyor. Bunun için ismine XMLDOMYukle.aspx vereceğemiz yeni bir aspx sayfasını projemize ekleyelim. Bu sayfa XMLDOM nesnesi tarafından kullanılacak bir aracı sayfa olacaktır. Bu sayfanın çıktısı XML şeklinde olacaktır. Bu nedenle öncelikle oluşturduğumuz bu sayfanın HTML kısmına geçerek tüm HTML taglerini silelim. Sayfamızın HTML kısmı Şekil 1 deki gibi olacaktır.

Şekil 1 - XMLDOMYukle.aspx Sayfasının HTML Görünümü

Daha sonra kod kısmına geçerek gerekli kodu yazacağız. Ben bu projede il ve ilçe bilgilerini http://tckimlik.nvi.gov.tr/kpspublic.asmx isimli Web Servisinden aldım. Ama istenirse bir veritabanından da yapılabilir(Şekil 2).

Private Sub Page_Load( ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load 
    Dim serv As New tckimlik.KPSPublicWebService 
    Dim ds As New DataSet("root") 
    If IsNothing(Request.QueryString("IlValue")) Then 
        Dim tckil() As tckimlik.IlBilgisi 
        Dim dt As New DataTable("Il") 
        dt.Columns.Add("Ad") 
        dt.Columns.Add("Kod") 
        tckil = serv.IlListesiGetir 
        For i As Integer = 0 To tckil.Length - 1 
            Dim dr As DataRow 
            dr = dt.NewRow 
            dr("Ad") = tckil(i).Ad 
            dr("Kod") = tckil(i).Kod 
            dt.Rows.Add(dr) 
        Next 
        ds.Tables.Add(dt) 
    Else 
        Dim tckilce() As tckimlik.IlceBilgisi 
        Dim dt As New DataTable("Ilce") 
        dt.Columns.Add("Ad") 
        dt.Columns.Add("Kod") 
        tckilce = serv.IleBagliIlceListesiGetir( CInt(Request.QueryString("IlValue"))) 
        For i As Integer = 0 To tckilce.Length - 1 
            Dim dr As DataRow 
            dr = dt.NewRow 
            dr("Ad") = tckilce(i).Ad 
            dr("Kod") = tckilce(i).Kod 
            dt.Rows.Add(dr) 
        Next 
        ds.Tables.Add(dt)   
    End If   
    Response.ContentType = "text/xml" 
    Response.Write("<?xml version=""1.0"" encoding=""utf-8"" ?>") 
    Response.Write(ds.GetXml)
End Sub

Şekil 2 - XMLDOMYukle.aspx Sayfasının Kod Görünümü

Kod incelendiğinde görüldüğü üzere XMLDOMYukle.aspx sayfası bir IlValue QueryStringine sahipse  ilçeler XML olarak gelecek. Sayfa çağrıldığında böyle bir QueryString yoksa iller XML olarak gelecek.

Artık verileri getiriyoruz. Yani ilk aşama bitti. Şimdi asıl konumuza geliyoruz. Şimdiki bölümde bu verileri XMLDOM nesnesini kullarak 2 DropdownList içinde göstereceğiz.

Öncelikle var olan WebForm1.aspx sayfamızı açıp içine cmb_Il ve cmb_Ilce isimli iki adet DropdownList nesnesi yerleştiriyoruz(Şekil 3).

Şekil 3 - cmb_Il ve cmb_Ilce İsimli 2 DropdownList Nesnesinin Ekrana Eklenmesi

 

Şimdi WebForm1.aspx sayfasının HTML kısmına geçerek gerekli javascriptleri koda ekleyeceğiz. Şekil 4 de WebForm1.aspx sayfasının bütünüyle HTML bölümü yeralıyor. Daha sonraki bölümde ilgili satırları açıklamaya çalışacağım.

<%@ Page Language="vb" AutoEventWireup="false" Codebehind="WebForm1.aspx.vb" Inherits="XMLDOMIlIlceCombo.WebForm1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
            <HEAD>
                        <title></title>
                        <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
                        <meta content="Visual Basic .NET 7.1" name="CODE_LANGUAGE">
                        <meta content="JavaScript" name="vs_defaultClientScript">
                        <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
                        <script language="javascript">
                        var ozetDoc,dosya,timerId;
                        var IlId;
                        var param=0;
                       
                        //param=0 da iller listelenecek
                        //param=1 de ilçeler listelenecek
                        ozetDoc=new ActiveXObject("Microsoft.XMLDOM");
                        ozetDoc.async=true;                 
                        
                        function getir(){
                                   if (param==0){
                                               dosya="XMLDOMYukle.aspx";
                                   }else if(param==1){
                                               dosya="XMLDOMYukle.aspx?IlValue=" + IlId;
                                   }                        
                                   ozetDoc.load(dosya);  
                                   timerId=setInterval("Kontrol();",50);               
                        }         
                       
                        function Kontrol(){
                                   if(ozetDoc.readyState==4){
                                      clearInterval(timerId);
                                      goster();                                
                                    }
                        }
                       
                        function goster()
                        {
                                   var obj=ozetDoc.documentElement;
                                   var i=0;
                                   var metin="";
                                   var ad,kod
                                              
                                   if (param==0)
                                   {         
                                               metin="<SELECT id=cmb_il name=cmb_il onChange='TakeCity(this);getir();'>";
                                               for(i=0;i<obj.childNodes.length;i++)
                                              
                                                          ad=obj.childNodes[i].firstChild.text; 
                                                          kod=obj.childNodes[i].lastChild.text; 
                                                          metin+="<OPTION value="+ kod + ">" + ad + "</OPTION>";                                           
                                               }                                            
                                               metin+="</SELECT>";
                                               document.getElementById('cmb_Il').outerHTML=metin;
                                               TakeCity(document.getElementById('cmb_Il'));
                                               getir(); 
                                   }
                                   else if(param==1)
                                   {
                                               metin="<SELECT id=cmb_ilce name=cmb_ilce>";
                                               for(i=0;i<obj.childNodes.length;i++)
                                              
                                                          ad=obj.childNodes[i].firstChild.text; 
                                                          kod=obj.childNodes[i].lastChild.text; 
                                                          metin+="<OPTION value="+ kod + ">" + ad + "</OPTION>";                                           
                                               }                                            
                                               metin+="</SELECT>";
                                               document.getElementById('cmb_Ilce').outerHTML=metin; 
                                   }                                
                       
                        
                         function TakeCity(obj)
                        {          
                                   param=1;
                                   IlId=obj.options[obj.selectedIndex].value;                              
                        }
                        </script>
            </HEAD>
            <body onload="getir()">
                        <form id="Form1" method="post" runat="server"> 
                                    <asp:dropdownlist id="cmb_il" runat="server"></asp:dropdownlist><asp:dropdownlist id="cmb_ilce" runat="server"></asp:dropdownlist></form>
            </body>
</HTML>

Şekil 4 - XMLDOM Nesnesinin Kullanımını Örnekleyen Kod Bölümü

Herşey Body taginin onload olayında gösterildiği gibi getir() ismini verdiğim javascript fonksiyonu ile başlıyor.
param isimli değişken değeri, kodda da belirttiğim gibi, 0 ise  iller, 1 ise ilçelerin getirilmesini sağlayacak. İlk başta bu değişkenin değeri 0 oldugundan dosya değişkeni "XMLDOMYukle.aspx" sayfasına(Daha doğrusu string ine) set ediliyor. Dikkat edilirse bu sayfanın sonunda IlValue isimli QueryString olmadığı için sayfa illeri XML olarak geri döndürecektir.

XMLDOM un tanımlanması ozetDoc=new ActiveXObject("Microsoft.XMLDOM");  şeklindeki kod bloğu ile yapılmaktadır. ozetDoc daha önce tanımlanmış bir değişkendir. Daha sonra bu nesnenin Load olayını kullanarak verileri bu nesne üzerine (yani ozetDoc değişkeni üzerine) yüklüyoruz( ozetDoc.load(dosya);).

Şuana kadar il verilerini Web Servisi ile aldık ve XMLDOM değişkeni olarak oluşturduğumuz ozetDoc değişkeninin içine bu verileri yükledik. Şimdi bu veriyi cmb_Il isimli DropdownList içine yüklemek gerekiyor. Bunun için JavaScript te goster() isimli bir fonksiyon kullandım.
Burada verileri almak için önce XML i çözmek gerekiyor. Bunu da javascript ile halledebiliyoruz. Bir for ve ozetDoc.documentElement.childNodes[] dizisi ile XML in herbir Noduna teker teker ulaşabiliyoruz. Bu ikiliyi kullanarak Ad ve Kod değişkenlerinin içini doldurup DropDownListleri Javascript ile oluşturabiliriz. Ve oyle de yapıyoruz.  

Varolan cmb_Il DropDownList kontrolünü tekrar düzenleyerek oluşturduk. Bunu yaparken onChange olayına onChange='TakeCity(this);getir();' kodunu ekliyoruz. TakeCity() fonksiyonu cmb_Il DropDownList kontrolünde seçili olan ilin değerini bir değişkene atıyor ve param değişkenini 1 olarak belirtiyor. Böylece daha sonra çalışacak olan getir() fonksiyonu ilçeleri değeri belirtilmiş ile göre getirecek.

Ve öylede oluyor. Çalıştırdığımızda artık 2.DropDownList 1. DropdownListe göre doluyor ve önemli olan sayfa hiç refresh olmuyor.(Şekil 5).

Şekil 4 - XMLDOM Nesnesini Kullanarak Yapılan Örneğin Çalışan Kodu

Başta da bahsettiğim gibi aslında bu XMLDOMu da içinde barındıran metodun adı AJAX metodudur. Ve bence bu metod dinamik Web Sayfaları oluşturmada yeni bir yoldur ve  bu metod gelecekte daha da önemli olacaktır.

Başka yazılarla görüşmek üzere...

Kadir ERDOĞAN     
kadirerdogan@hotmail.com