Categories
Archive
Recent comments

İçerik Ara



Yasal Uyarı
Bu sitede sunulan tüm bilgi ve dökümanlar Turgay Sahtiyan tarafından yazılmaktadır. Yazıların kaynak göstermek şartıyla kullanılması serbesttir.

© Copyright 2009-2011
Takvim
<<  May 2012  >>
MoTuWeThFrSaSu
30123456
78910111213
14151617181920
21222324252627
28293031123
45678910
Blogroll
Keywords

SQL Server 2011 Denali - SQL Server Developer Tool (SSDT) Code-Named “Juneau”

turgay sahtiyan , 25. March 2011, 14:10

Bugün size SQL Server 2011 Denali ile beraber gelecek olan yeni bir tool’dan bahsetmek istiyorum. Juneau kod adıyla anılan bu tool’un açık adı SQL Server Developer Tool (SSDT). Bu yeni tool vasıtasıyla, developer’lar, SSMS (SQL Server Management Studio) kullanma ihtiyacı duymadan bütün işlemlerini bu yeni tool ile karşılayabilecektir.

More...

Tags: ,
Kategori: ! SQL Server | Development | ! SQL Server 2012 | SSDT
E-mail   |     |   Comments (0)   |   Trackback

SQL Server 2011 “Denali” – Code Snippets

turgay sahtiyan , 29. January 2011, 08:00

SQL Server 2011 “Denali” ile gelen bir diğer özellik ise Code Snippets yani code parçacıklarını template olarak kaydedip kullanabilme. Ufak bir özellik gibi görünmesine rağmen, code snippets kullanımı çok fazla kod geliştiren developerların işlerini oldukça hızlandırmakta.

More...

Tags: ,
Kategori: ! SQL Server | ! SQL Server 2012 | Development | SS2012 Genel
E-mail   |     |   Comments (3)   |   Trackback

Change Default Session Time Out (Varsayılan Zaman Aşımını Değiştirmek)

turgay , 29. September 2009, 11:16

Merhaba arkadaşlar,

.Net ile yaptığımız projelerde sıkça kullandığımız Session nesnesi için default session time out 20 dakikadır. Projenin şekline göre bu değerde değişiklik yapmamız gerekebilir.

Bu işlemi yapabilmemiz için birden fazla yöntem bulunmaktadır.Bunlar;

1. web.config dosyası üzerinde session time out verebiliriz.

    <system.web>
    <sessionState timeout="60"/>
	<!--
		....
		....
	-->
</system.web>


2. Direk IIS üzerinden session time out ayarlayabiliriz.

İngilizce windows için; Control Panel | Administrator Tools | Internet Information Services | Default Web Site | Properties | Home Directory | Configuration | Options | Enable Session State | Session timeout 20

Türkçe windows için; Denetim Masası | Yönetimsel Araçlar | Internet Hizmet Yöneticisi | Varsayılan Web Sitesi | Özellikler | Giriş Dizini | Yapılandırma | Uygulama Seçenekleri | Oturum Durumunu Etkinleştir | TimeOut ataması yap

 

3. Global.asax dosyasında Session_Start methodunda Session.Timeout=x dakika ataması yapılabilir.

 

4. Herhangi bir asp web sayfasında Session.Timeout=x dakika ataması yapılabilir.

 

Kolay gelsin

Turgay Sahtiyan

Tags:
Kategori: Development | ASP.NET
E-mail   |     |   Comments (1)   |   Trackback

JQuery ile div e tıklamaca :)

turgay , 5. July 2009, 20:09

Merhaba arkadaşlar,

JQuery animasyon olayları ile çalışırken çok eskilerden kalma uygulamayı yapmayı düşündüm:)

Uygulamamız basit. Ekrandaki “tıkla” yazılı div e tıklamaya çalışıyoruz.

Denemek için burayı tıklayabilirsiniz.

Source kod aşağıda;

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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 src="jquery-1.3.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var left = 20;
        var top = 10;
        $(document).ready(function() {
            $(".block").mouseenter(function() {
                leftOld = left;
                topOld = top;

                left = Math.floor(Math.random() * 500);
                if ((left >= leftOld) && (left - leftOld <= 35)) {
                    left += 35 - (left - leftOld);
                }
                if ((left < leftOld) && (leftOld - left <= 35)) {
                    left -= 35 - (leftOld - left);
                }
                if (left < 0) left = 100;
                top = Math.floor(Math.random() * 500);
                if ((top >= topOld) && (top - topOld <= 20)) {
                    top += 20 - (top - topOld);
                }
                if ((top < topOld) && (topOld - top <= 20)) {
                    top -= 20 - (topOld - top);
                }
                if (top < 0) top = 100;
                $(".block").animate({ "left": left, "top": top });
            });
        });
    </script>
  <style>
      div { 
        position:absolute; 
        background-color:#abc; 
        left:20px;
        width:135px; 
        height:120px;
        top:10px;
        margin:5px; 
      }
  </style>
    
</head>
<body>
    <div class="block" onclick="alert('efferim')">Tıkla</div>
</body>
</html>

Gerçi biraz kasılırsa tıklanabiliyor. Artık onuda siz optimize edersiniz:)

Kolay gelsin

Turgay Sahtiyan

Tags: , ,
Kategori: Development | JQuery
E-mail   |     |   Comments (0)   |   Trackback

JQuery de Efekt Fonksiyonları (Effects)

turgay , 28. June 2009, 19:00

Merhaba arkadaşlar,

Bu yazımızda JQuery de ki efekt fonksiyonlarını göreceğiz.

show() – Saklı olan bir nesne veya nesneleri görünür yapmaya yarar. Mesela loaderGif id li img i show etmek için $(“#loaderGif”).show();

show( speed, [callback] )  - Show işlemini istediğimiz hızda yapmamızı yarar. Speed değeri olarak slow,normal yada fast değeri alabilir. Yada milisaniye cinsinden de değer vermek mümkündür. Mesela sayfada ki paragrafları hızlı biçimde show yapalım. $("p").show("slow");

hide() – Görünür olan bir nesne veya nesneleri saklamaya yarar. Mesela loaderGif id li img i hide etmek için $(“#loaderGif”).hide();

hide( speed, [callback] )  - Hide işlemini istediğimiz hızda yapmamızı yarar. Speed değeri olarak slow,normal yada fast değeri alabilir. Yada milisaniye cinsinden de değer vermek mümkündür. Mesela sayfada ki paragrafları hızlı biçimde hide yapalım. $("p").hide("slow");

toggle() – Saklı olan bir nesneyi göstermeye, görünür olan bir nesneyi saklamaya yarar. Misal bir butona basıldığında loaderGif saklansın, tekrar basıldığında görünür hale gelsin. 

    $("#button1").click(function () {
      $("#loaderGif").toggle();
    });

toggle( switch ) – Switch değeri true ise elemanlar hide olur, false ise elemanlar show olur.

toggle( speed, [callback] )  - Toggle işlemini hide veya show da ki gibi belli bir hızla yapmaya yarar. Gene hız değeri olarak slow,normal yada fast değeri alabilir. Örneğin loaderGif i yavaş bir biçimde toggle layalım. $(“loaderGif”).toggle(“slow”);

slideDown( speed, [callback] ) – Verilen hızda istenen nesneleri aşağıya doğru açılarak göstermeye yarar. Örneğin $("#loaderGif").slideDown("slow");

slideUp( speed, [callback] ) – Verilen hızda istenen nesneleri yukarıya doğru kapanarak saklamaya yarar. Örneğin $("#loaderGif").slideUp("slow");

slideToggle( speed, [callback] ) – Verilen hızda nesneyi slide olarak toggle yapmaya yarar. Toggle ile çalışma mantığı aynı şekildedir. Örneğin $("#loaderGif").slideToggle("slow");

fadeIn( speed, [callback] ) – Verilen hızda istenen nesneleri opacity lerini arttırarak göstermeye yarar. Örneğin $("#loaderGif").fadeIn("slow");

fadeOut( speed, [callback] ) – Verilen hızda istenen nesneleri opacity lerini azaltarak saklamaya yarar. Örneğin $("#loaderGif").fadeOut("slow");

fadeTo( speed, opacity, [callback] )  - Verilen hızda istenen nesnelerinin opacity lerini verilen değer yapar. Örneğin $("#loaderGif").fadeTo("slow",0.33);

jQuery.fx.off – Bütün animasyonları disable etmeye yarar. disable etmek için jQuery.fx.off = true;, tekrar enabled etmek için jQuery.fx.off = false;

 

Jquery de Efekt fonksiyonları bu şekilde.

Daha fazla bilgi için JQuery Effects sayfasını inceleyebilirsiniz.

Kolay gelsin

Turgay Sahtiyan

Tags: , ,
Kategori: Development | JQuery
E-mail   |     |   Comments (0)   |   Trackback

Gridview de Sıralama (Sorting)

turgay , 27. June 2009, 21:33

Merhaba arkadaşlar

Bu yazımda gridView da sorting nasıl yapılacağını göstereceğim.

İlk önce sort yapmak istediğimiz kolonların SortExpression özelliklerine neye göre sort etmek istediğimizi belirtiyoruz.

aspx dosyasından; 

<asp:BoundField DataField="code" HeaderText="Kodu" SortExpression="code"/>
<asp:BoundField DataField="name" HeaderText="Adı" SortExpression="name"/>

koddan;

BoundField bf = new BoundField();
bf.DataField = "CariKod";
bf.HeaderText = "Cari Kodu";
bf.SortExpression = "CariKod";
GridView1.Columns.Add(bf);

Daha sonra gridView in event leri altında ki sorting e çşift tıklayarak sorting esnasında ki kodumuzu yazıyoruz. 

    protected void GridView1_Sorting(object sender, GridViewSortEventArgs e)
    {
        string sortType = "";
        if (GridViewSortDirection == SortDirection.Ascending)
        {
            GridViewSortDirection = SortDirection.Descending;
            sortType = " DESC";
        }
        else
        {
            GridViewSortDirection = SortDirection.Ascending;
            sortType = " ASC";
        }   

        DataTable dataTable = GridView1.DataSource as DataTable;
        if (dataTable != null)
        {
            DataView dataView = new DataView(dataTable);
            dataView.Sort = e.SortExpression + " " + sortType;

            GridView1.DataSource = dataView;
            GridView1.DataBind();
        }
    }

Önceki sıralama tipini set ve get ettiğimiz fonksiyon olan GridViewSortDirection ın kodu ise;

    public SortDirection GridViewSortDirection
    {
        get
        {
            if (ViewState["sortDirection"] == null)
                ViewState["sortDirection"] = SortDirection.Ascending;
            return (SortDirection)ViewState["sortDirection"];
        }
        set { ViewState["sortDirection"] = value; }
    }

Sormak istediğiniz bir şey olursa yorum kısmından sorabilirsiniz.

Kolay gelsin

Turgay Sahtiyan

Tags: , , , , ,
Kategori: ASP.NET | Development
E-mail   |     |   Comments (2)   |   Trackback

ASP.Net te Form Doğrulama İşlemleri (Validation)

turgay , 27. June 2009, 13:25

Merhaba arkadaşlar,

Bu yazımda ASP.NET in kendi komponentleri ile form doğrulama (validation) işlemlerinin nasıl gerçekleştirildiğini anlatacağım.

Form lar vasıtasıyla kullanıcılar bilgi almak istediğimizde form submit esnasında bazı alanları kontrol etmek isteriz. Mesela ad-soy ad girişmiş mi,şifre1 ve şifre 2 birbirinin aynı mı , e mail adresi formata uygun girilmiş mi vs.

Bunları post ettikten sonra kontrol etmemiz mümkün. Ama biz post etmeden sayfa tekrar yüklenmeden kontrol etmek istiyoruz.

Bunun içinde ToolBox ta ki validation komponentleri kullanacağız.

valid1

Komponentlerin kullanım yerleri;

RequiredFieldValidator Bir form elemanının boş olup olmadığını kontrol edebiliriz.
RangeValidator Bir form elemanının değerini kontrol edebiliriz. Mesela girilen yaş 18-99 aralığında mı gibi.
RegularExpressionValidator Bir form elemanının formatını kontrol edebiliriz. Mesela girilen e-mail adresi formata uygun mu gibi.
CompareValidator 2 form elemanını karşılıştırıp aynı olup olmadıklarını kontrol edebiliriz. Mesela şifre1 ve şifre2 birbirinin aynı mı gibi.
CustomValidator Kendimize özel bir validate formatı yazabiliriz.
ValidationSummary Validate işleminden sonra hata var ise bunu komponent in yanında değil de altta bir özet olarak göstermek için kullanılır. 2. örneğimizde göreceğiz.

Evet işlemlerimize başlayalım.

Önce bir form tasarlıyoruz. Formun içine ad-soyad-email-yaş-şifre1 ve şifre 2 alanları koyalım.

valid2

Şimdi validator ları koyalım.

  • Ad ve soyadın doluluğunu kontrol etmek için RequiredFieldValidator
  • email in formatını kontrol etmek için RegularExpressionValidator
  • Şifre1 ve 2 nin birbirine aynı olup olmadığını kontrol etmek için CompareValidator
  • Girilen yaşı kontrol etmek için RangeValidator kullanacağız.

Koyduğumuz validator lere validate başarısız olursa vereceği hata mesajını ErrorMessage kısmından yazıyoruz.

Şimdi her validator için set ettiğimiz özellikleri yazalım.

RequiredFieldValidator

  • Errormessage giriyoruz.
  • ControlToValidate kısmından hangi kontrolu validate edeceğini seçiyoruz.

RegularExpressionValidator

  • Errormessage giriyoruz.
  • ControlToValidate kısmından hangi kontrolu validate edeceğini seçiyoruz.
  • Validationexpression kısmına e mail kontrolü yapacağımız için şu formatı yazıyoruz. "\w+\w*\@\w+\w+\w*\.(com|edu|org|gov|com.tr|org.tr|net|net.tr)"

RangeValidator

  • Errormessage giriyoruz.
  • ControlToValidate kısmından hangi kontrolu validate edeceğini seçiyoruz.
  • minimumValue kısmına 19,maximumValue kısmınada 99 yazıyoruz.
  • type seçeneğini integer seçiyoruz.

CompareValidator

  • Errormessage giriyoruz.
  • ControlToValidate kısmına txtSifre1, ControlToCompare kısmına da txtSifre2 yi seçiyoruz.

Ayarlarımız bu kadar. Şu anda sayfamızı çalıştırdığımızda istediğimiz sonucu alacağız. Çalışan örneğe buradan erişebilirsiniz.

Şimdi ikinci örneğemize geçelim. Bu örneğimiz de ValidationSummary kullanacağız. Aynı zamanda bu örneğimize de aynı sayfaya koyduğumuz için ValidationGroup u inceleyeceğiz.

ValidationGroup, hangi butona basıldığında hangi validationların işleme alınacağını belirtmek için kullanılır. Örneğimizde ilk form için bütün validationGroup ları 1,ikinci formumuz için 2 yapacağız. Bu şekilde her form kendi içinde çalışmış olacak.

Şimdi ilk formumuzu kopyalayıp aşağıya yapıştıralım.input name leri ve controlToValidate leri ayarlayalım. Aynı zamanda validationGroup ları set edelim.

Daha sonra butonların altında bir ValidationSummary koyalım. Hata mesajlarının validate lerde değilde validationGroup ta çıkması için validate lerin display özelliklerini none yapalım.

Ayarlarımız bu kadar. Şu anda sayfamızı çalıştırdığımızda istediğimiz sonucu alacağız. Çalışan örneğe buradan erişebilirsiniz.

ASP.Net te Validation işlemlerimiz bu şekilde. Sormak istediğiniz bir şey olursa yorum kısmını kullanabilirsiniz.

Örneklerin tamamına buradan erişebilirsiniz.

Kolay gelsin

Turgay Sahtiyan

Tags: , , , ,
Kategori: ASP.NET | Development
E-mail   |     |   Comments (1)   |   Trackback

ASP.NET GridView Footer da Alt Toplamlar (Sum in Gridview Footer)

turgay , 25. June 2009, 22:18

Merhaba arkadaşlar

Kullandığımız gridview lerde miktarsal kolonların en altında toplamlarının olmasını isteyebiliriz. Aşağıda ki örnekte ki gibi;

sum1

Bununla alakalı internet te örnek ararken aşağıda ki kodu buldum. Kaynak göstermeden kullanmak olmaz:)

http://www.dotnetspider.com/resources/5228-Sum-In-Gridview-Footer.aspx

protected void dgSummary_RowDataBound(object sender, GridViewRowEventArgs e)
        {           
            try
            {
             if (e.Row.RowType == DataControlRowType.DataRow)
                {
                    ColumnTotal += Convert.ToDecimal(DataBinder.Eval(e.Row.DataItem, "Amount"));                                                         
                }
                else if (e.Row.RowType == DataControlRowType.Footer)
                {
                    e.Row.Cells[6].Text = "Total Rs:";
                    // for the Footer, display the running totals
                    e.Row.Cells[8].Text = ColumnTotal.ToString();
                    e.Row.Cells[8].HorizontalAlign = HorizontalAlign.Right;               
                    e.Row.Font.Bold = true;
                }                
            }
            catch (Exception ex)
            {        
            }
        }

Tabi biz bu kodda baya bir değişiklik yapacağız..:)

İlk olarak ekleyeceğimiz birden fazla kolon için alt toplam yazdırmak.

Ayrıca yazdıracığımız kolonları bir list te tutarak döngüyle erişeceğiz.

Birde format ekledik mi tamamdır.:)

Kod aşağıda ki gibidir. Açıklamaları kodun içinde vermeye çalıştım. Sormak istediğiniz bir şey olursa yorum kısmında sorabilirsiniz.

public partial class YoneticiRapor : System.Web.UI.Page
{
    //kolon toplamlarını bu listede tutacağız.
    List<double> Toplamlar = new List<double>();
    //hangi kolonların toplamını almak istiyorsak bu listeye indexlerini yazıyoruz.
    List<int> Toplanacaklar = new List<int>();

    protected void Page_Load(object sender, EventArgs e)
    {
	     //toplamak istediğimiz kolonların indexlerini atıyoruz.
                Toplanacaklar.Add(2);
                Toplanacaklar.Add(3);
                Toplanacaklar.Add(4);

	      //bu toplamları sıfırlıyoruz
                 for (int i = 0; i <= Toplanacaklar.Count-1; i++)
                       Toplamlar.Add(0);
    }

    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        try
        {
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                int i=0;
                foreach (int top in Toplanacaklar)
                {
                    //her toplanacak için toplama yapıyoruz.
                    Toplamlar[i] += Convert.ToDouble(((DataRowView)e.Row.DataItem).Row.ItemArray[top].ToString());
                    i++;
                }
            }
            else if (e.Row.RowType == DataControlRowType.Footer)
            {
                int i=0;
                foreach (int top in Toplanacaklar)
                {
                    //footer a yazıyoruz.
                    e.Row.Cells[top].Text = Toplamlar[i].ToString("N2");
                    e.Row.Cells[top].HorizontalAlign = HorizontalAlign.Right;
                    i++;
                }
                e.Row.Font.Bold = true;
            }
        }
        catch (Exception ex)
        {
        }
    }

Kolay gelsin

Turgay Sahtiyan

Tags: , , , , , ,
Kategori: Development | ASP.NET
E-mail   |     |   Comments (1)   |   Trackback

JQuery de Olaylar (Events)

turgay , 25. June 2009, 16:44

Merhaba arkadaşlar

Bu yazımda JQuery de ki olayları yani event ları anlatacağım.

ready(fn)

İlk göreceğimiz event ready event i. Bunu hemen hemen her jqeury işleminde görmeniz mümkün. Bir DOM element load edildiğe anda gerçekleşir. Mesela sayfamız da bir image olsun ve biz sayfa yüklendiğinde bu image i hide edelim. 

$(document).ready(function() {
        $("#loaderGif").hide();
});

Bunun gibi event bind işlemlerinide ready nin altında yapabilirsiniz. Mesela sayfada ki tbFiyat diye biten bütün textbox ların focus event ine alert koyalım.

$(document).ready(function() {
        $("form input:text[id$=tbFiyat]").focus(function() {
            alert("aaa");
        });
});

bind( type, [data], fn )

Bir DOM elemana bir event i bind etmeye yarar. Mesela sayfada ki paragraflara tıklandığında alert vermesi için 

$("p").bind('click', function(e){
	alert("aaa");
});

unbind( [type], [fn] )

bind işleminin tersini yapar. Mesela paragraflara bind ettiğimiz click event ini unbind edelim

$("p").unbind('click');

one( type, [data], fn )

Bir DOM elemana event bind etmeye yarar. bind dan farkı bir kere çalışır. Mesela sayfada ki paragralara tıklandığında alert verelim ama bu tıklama sadece bir kere yapılabilsin. 

$("p").one("click", function(e){
	alert("aaa");
});

trigger( event, [data] )

İstenilen DOM elemanın istenilen event ini tetiklemeye yarar. Mesela buton 1 e click event i atıyalım. buton 2 nin click event in de de buton1 in click event ini tetikleyelim. 

$("#button1").click(( function(){
	alert("aaa");
});

$("#button2").click(( function(){
	$("#button1").trigger('click');
});

hover( over, out )

Bir DOM elemanın üstüne gelindiğinde ve mouse üzerinden gittiğinde çalışacak fonksiyonları set etmeye yarar. Örneğin tüm table td leri için şöyle bir hover olayı yazabiliriz. 

$("td").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);

toggle( fn, fn2, [fn3,fn4,...] )

Bir DOM elemanına her tıklamada hangi fonksiyonun çalışmasını istiyorsak set edebiliriz. Fonksiyonlar her tıklamada sırasıyla çalışır. Bitince en başa döner.

Bu toggle ı kaldırmak için unbind(‘click’) metodunu kullanabiliriz.

Mesela bir paragrafa tıklandığında sırasıyla çalışacak toggle fonksiyonları için 

    $("li").toggle(
      function () {
        $(this).css({"list-style-type":"disc", "color":"blue"});
      },
      function () {
        $(this).css({"list-style-type":"disc", "color":"red"});
      },
      function () {
        $(this).css({"list-style-type":"", "color":""});
      }
    );

blur

Bir eleman focus özelliğini kaybettiğinde blur özelliği çalışır. Bunu tetiklemek için mesela $(“#button1”).blur() şeklinde kullanabiliriz. Set etmek için ise

    $("input").blur(function () {
         $(this).next("span").css('display','inline').fadeOut(1000);
    });

Aşağıdaki diğer event lerin kullanım şekli blur gibidir. O yüzden sadece ne zaman tetiklendiklerini yazmakla yetineceğim.

blur Eleman focus özelliğinde kaybettiğinde çalışır.
change Eleman focus özelliğini kaybettiğinde ve içeriği değiştiği zaman çalışır.
click Eleman tıklandığında çalışır.
dblclick Eleman çift tıklandığında çalışır.
error Eleman hata verdiğinde çalışır.
focus Eleman focus olduğunda çalışır.
keydown Bir tuşa basıldığı zaman çalışır.
keypress Bir tuşa basılı tutulduğu sürece çalışır.
keyup Bir tuştan parmak çekilince çalışır.
load Eleman yüklendiğinde çalışır.
mousedown Elemanın üstündeyken mouse basıldığı zaman çalışır.
mouseup mouse un basılma tuşu bırakıldığı zaman çalışır.
mouseenter mouse elemanın üzerine geldiğinde çalışır.
mouseleave mouse elemanın üzerinden gittiğinde çalışır. Elemanın içinde ki elemana geçiş yapıldığında çalışmaz.
mousemove mouse elemanın üzerinde gezinirken çalışır.
mouseout mouse elemanın üzerinden gittiğinde çalışır. Elemanın içinde ki elemana geçiş yapıldığında çalışır.
mouseover mouse elemanın üzerine geldiğinde çalışır.
resize Elemanın eni veya boyu değiştirildiğinde yani resize edilidğinde çalışır.
scroll Eleman scroll edildiğinde çalışır.
select Eleman seçildiğinde çalışır. Mesela bir textbox ın içinde ki bir kısım veri mouse ile seçildiğinde çalışır.
submit Eleman submit edildiğinde çalışır
unload Eleman unload ediliğinde çalışır.


JQuery de Events yani olaylar bu şekilde.

Daha fazla bilgi almak JQuery Events sayfasını inceleyebilirsiniz.

Sormak istediğiniz bir şey olursa yorum kısmını kullanabilirsiniz.

Kolay gelsin

Turgay Sahtiyan

Tags: , ,
Kategori: Development | JQuery
E-mail   |     |   Comments (0)   |   Trackback

ASP.Net te Web Service e AJAX ile Erişim (ServiceReference)

turgay , 24. June 2009, 11:42

Merhaba arkadaşlar

Bu yazımda basit bir web service yazıp bu servise AJAX ile nasıl erişileceğini anlatacağım.

DortIslem adında bir web service imiz olsun. Bu servisimizde topla diye bir fonksiyonumuz olsun ve verdiğimiz 2 rakamı toplayıp sonucu döndürsün.

Kodları yazmadan evvel dikkat etmemiz gereken bir kaç konu var. 1. si web servis dosyamızda ki 

[System.Web.Script.Services.ScriptService]

satırını command halden çıkarmamız gerekiyor. Çünkü biz bu metodumuza AJAX yoluyla erişeceğiz.

Diğer bir konuda web servis dosyamızda namespace kullanımı. Bu şekilde daha düzenli bir kod yapısı oluşmakta.

Bir diğer önemli nokta AJAX ile çaıracağımız web servis internal olmalı. Yani aynı domain de bulunmalı. Eğer external bir çağırım yapmak istiyorsak internal yazacağımız web service external dan bilgiyi toplamalı ve biz AJAX ile bu internal web service den bilgiyi almalıyız.

Kodlarımız aşağıdaki gibi. Açıklamalar kodların içinde yazılı.

DortIslem.asmx 

<%@ WebService Language="C#" Class="myMath.DortIslem" %>

DortIslem.cs 

using System;
using System.Web;
using System.Web.Services;
using System.Xml;
using System.Web.Services.Protocols;
using System.Web.Script.Services;

namespace myMath
{
    /// <summary>
    /// Summary description for DortIslem
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
    // bu web servise ajax ile ulaşmak istiyorsak aşağıdaki comment i açmamız gerekmekte
    [System.Web.Script.Services.ScriptService]
    public class DortIslem : System.Web.Services.WebService
    {
        [WebMethod]
        //ajax ile erişeceğimiz fonksiyon
        public string Topla(int sayi1,int sayi2)
        {
            int toplam;
            toplam = sayi1 + sayi2;
            return toplam.ToString();
        }
    }

}

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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 id="Head1" runat="server">
    <title></title>
    <script type="text/javascript">
        //butona bastığımız da çağrılan fonksiyon
        //bu fonksiyon web service e bağlanıp istenen fonksiyonu çağırmakta.
        function butonClick() {
            var sayi1 = document.getElementById("tbSayi1");
            var sayi2 = document.getElementById("tbSayi2");
            myMath.DortIslem.Topla(sayi1.value, sayi2.value
                , onComplete
                );                
        }

        //web service de ki fonksiyon problemsiz tamamlanınca çağrılan fonksiyon
        //bu fonksiyonla dönen değeri sonuç a yazıyoruz.
        function onComplete(result) {
            var sonuc = document.getElementById("sonuc");
            sonuc.innerHTML = result;
        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>  
        <asp:ScriptManager ID="ScriptManager1" runat="server">
            <Services>
                <asp:ServiceReference Path="DortIslem.asmx" />
            </Services>
        </asp:ScriptManager>  
        <asp:Label ID="sayi1" runat="server" Text="1.Sayı"></asp:Label>
        <asp:TextBox ID="tbSayi1" runat="server"></asp:TextBox>
        <br />
        <br />
        <asp:Label ID="sayi2" runat="server" Text="2.Sayı"></asp:Label>
        <asp:TextBox ID="tbSayi2" runat="server"></asp:TextBox>
        <br />
        <br />
        <input id="Button1" type="button" value="Topla" OnClick="butonClick();"/>
        <br />
        <br />
        <asp:Label ID="Label3" runat="server" Text="Sonuç:"></asp:Label>
        <span id="sonuc"></span>    
    </div>
    </form>
</body>
</html>

Sormak istediğiniz bir şey olursa yorum kısmında sorabilirsiniz.

Kolay gelsin

Turgay Sahtiyan

Tags: , , , , ,
Kategori: Development | Ajax | ASP.NET
E-mail   |     |   Comments (0)   |   Trackback

Visual Studio 2008 Ajax Kontrolleri Kullanımı (UpdatePanel - ScriptManager)

turgay , 23. June 2009, 14:51

Merhaba arkadaşlar

Bu makalemde Visual Studio 2008 ile beraber gelen ajax kontrollerini kullanmayı anlatacağım.

Basit bir uygulama ile hiç bir javascript kodu yazmadan ajax kullanmayı göreceğiz.

Örneğimiz şu şekilde olsun. Sayfamızda bir tarih nesnesi olsun ve tarih nesnesinde tarih seçtiğimizde seçilen tarihi ajax ile updatepanel kullanarak label a yazsın. Ajax ile yazıp yazmadığınıda pageload da anlık saati yazdığımız diğer bir label ile kontrol edelim.

Sayfamızın görüntüsü şu şekilde.

ajax1

Şimdi kodlarımıza bakalım.

Defaul.aspx dosyası

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
        <br />
        <br />
        <asp:Button ID="Button1" runat="server" Text="postback yap" />
        <br /> 
        <br />          
    </div>    
    <hr />
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Calendar ID="Calendar1" runat="server" 
                    onselectionchanged="Calendar1_SelectionChanged"></asp:Calendar>
                <br />
                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

 

default.aspx.cs dosyası

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {
        //page load esnasında label 2 ye şu an ki saati atıyoruz.
        Label2.Text = DateTime.Now.ToLongTimeString();
    }
    protected void Calendar1_SelectionChanged(object sender, EventArgs e)
    {
        //calendar da tarih seçtiğimiz de bunu label 1 e atıyoruz
        Label1.Text = Calendar1.SelectedDate.ToShortDateString();
    }
}

Örneğimizi inceleyecek olursak sayfa postback olmasına rağmen label2 nin içeriğinin değişmediğini göreceksiniz. Bunu sağlayanda updatepanel dir. Sayfa postback olmasına rağmen sadece updatepanel in içeriği güncellenmektedir.

Bu arada ek bir bilgi vermek istiyorum. Ajax kontrollerini kullanabilmek için sayfamızda scriptmanager olmak zorunda.

ScriptManager ve UpdatePanel kontrollerine ToolBox ta Ajac Extensions kısmından erişebilirsiniz.

Sormak istediğiniz bir şey olursa yorum kısmında sorabilirsiniz.

Kolay Gelsin

Turgay Sahtiyan

Tags:
Kategori: Development | Ajax | ASP.NET
E-mail   |     |   Comments (0)   |   Trackback

ASP.Net te Gridview Üzerinde Toplu Kayıt Güncelleme

turgay , 15. June 2009, 20:16

Merhaba arkadaşlar

Bu yazımda size gridview kullanarak bir tabloda ki verileri toplu halde güncellemeyi göstereceğim.

default.aspx dosyası

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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>
    <link href="Main.css" rel="stylesheet" type="text/css" />
    <link href="Tables.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
                <asp:Panel ID="pn_butons" runat="server">
                    <asp:Button ID="btnEdit" runat="server" OnClick="btnEdit_Click" Text="Değiştir" Width="60px" CssClass="buttons"/>
                    <asp:Button ID="btnUpdate" runat="server" OnClick="btnGuncelle_Click" 
                        Text="Güncelle" Enabled="False" CssClass="buttons"/>
                    <asp:Button ID="btnCancel" runat="server" OnClick="btnVazgec_Click" 
                        Text="Vazgeç" Enabled="False" CssClass="buttons"/>
                </asp:Panel>
                <br />
                <asp:Panel ID="Pn_Guncelle" runat="server">
                    <asp:GridView ID="gridView" runat="server" CellPadding="4" 
                        AutoGenerateColumns="False" CssClass="gridView" GridLines="Vertical" 
                        >
                        <AlternatingRowStyle CssClass="gridViewAlternatigRow" />
                        <EditRowStyle CssClass="gridViewEditRow" />
                        <EmptyDataRowStyle CssClass="gridViewEmptyDataRow" />
                        <FooterStyle CssClass="gridViewFooter" />
                        <HeaderStyle CssClass="gridViewHeader" />
                        <PagerStyle CssClass="gridViewPager" HorizontalAlign="Center" />
                        <PagerSettings FirstPageText="İlk Sayfa" LastPageText="Son Sayfa" 
                            Mode="NumericFirstLast" />
                        <RowStyle CssClass="gridViewRow" />
                        <SelectedRowStyle CssClass="gridViewSelectedRow" />
                        <Columns>
                            <asp:TemplateField HeaderText="ID">
                                <ItemStyle HorizontalAlign="Left" />
                                <ItemTemplate>
                                    <asp:Label ID="lEmp_ID" runat="server" Text='<%# Eval("emp_id") %>'></asp:Label>
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="Ad">
                                <ItemStyle HorizontalAlign="Left" />
                                <ItemTemplate>
                                    <asp:Label ID="lFName" runat="server" Visible='<%# !IsInEditMode %>' Text='<%# Eval("fname") %>'></asp:Label>
                                    <asp:TextBox ID="tbFName" runat="server" Visible='<%# IsInEditMode %>'
                                        Text='<%# Eval("fname") %>' ></asp:TextBox>   
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="Soyad">
                                <ItemStyle HorizontalAlign="Left" />
                                <ItemTemplate>
                                    <asp:Label ID="lLName" runat="server" Visible='<%# !IsInEditMode %>' Text='<%# Eval("lname") %>'></asp:Label>
                                    <asp:TextBox ID="tbLName" runat="server" Visible='<%# IsInEditMode %>'
                                        Text='<%# Eval("lname") %>' ></asp:TextBox>   
                                </ItemTemplate>
                            </asp:TemplateField>
                        </Columns>
                    </asp:GridView>			
                </asp:Panel>
    </form>
</body>
</html>

default.aspx.cs dosyası

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;

public partial class _Default : System.Web.UI.Page 
{
    private bool isEditMode = false;
    DataTable dataTable = new DataTable();

    //saynın edit mod da olup olmadığını kontrol eden değişken
    protected bool IsInEditMode
    {
        get
        {
            return this.isEditMode;
        }

        set
        {
            this.isEditMode = value;
        }
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            //verileri yukle
            GetVeri();
        }
    }

    //verileri gridview e yüklüyoruz
    protected void GetVeri()
    {
        SqlConnection sqlConnection = new SqlConnection("Initial Catalog=pubs;Data Source=TURGAY;User ID=sa;Password=");
        sqlConnection.Open();
        
        try
        {
            SqlCommand sqlCommand = new SqlCommand("Select emp_id,fname,lname from employee",sqlConnection);
            SqlDataAdapter sqlDataAdapter = new SqlDataAdapter(sqlCommand);
            sqlDataAdapter.Fill(dataTable);
            gridView.DataSource = dataTable;
            gridView.DataBind();

            btnEdit.Enabled = true;
            btnUpdate.Enabled = false;
            btnCancel.Enabled = false;
        }
        finally
        {
            sqlConnection.Close();
        }
    }

    //Değiştir butonu
    protected void  btnEdit_Click(object sender, EventArgs e)
    {
        //edit mode u true yapıyoruz ki textbox lar gözüksün
        isEditMode = true;
        //verileri tekrar alıyoruz
        GetVeri();
        //butonların enable larını ayarlıyoruz
        btnEdit.Enabled = false;
        btnUpdate.Enabled = true;
        btnCancel.Enabled = true;
    }

    //guncelle butonu
    protected void  btnGuncelle_Click(object sender, EventArgs e)
    {
        SqlConnection sqlConnection = new SqlConnection("Initial Catalog=pubs;Data Source=TURGAY;User ID=sa;Password=");
        SqlCommand sqlCommand = new SqlCommand();
        sqlConnection.Open();
        sqlCommand.Connection = sqlConnection;
        try
        {
            sqlCommand.CommandText = "update employee set fname=@fname,lname=@lname where emp_id=@emp_id";

            sqlCommand.Parameters.Add("fname", SqlDbType.NVarChar);
            sqlCommand.Parameters.Add("lname", SqlDbType.NVarChar);
            sqlCommand.Parameters.Add("emp_id", SqlDbType.NChar);
            
            //rowları tek tek dönüyoruz
            foreach (GridViewRow row in gridView.Rows)
            {
                sqlCommand.Parameters["fname"].Value = ((TextBox)row.FindControl("tbFName")).Text;
                sqlCommand.Parameters["lname"].Value = ((TextBox)row.FindControl("tbLName")).Text;
                sqlCommand.Parameters["emp_id"].Value = ((Label)row.FindControl("lEmp_ID")).Text;
                //update i yapıyoruz
                sqlCommand.ExecuteNonQuery();
            }
            //butonları ayarlıyoruz
            btnUpdate.Enabled = false;
            btnCancel.Enabled = false;
            btnEdit.Enabled = true;
            //verileri tekrar çekiyoruz
            GetVeri();
        }
        finally
        {
            sqlConnection.Close();
        }
    }

    //vazgec butonu
    protected void  btnVazgec_Click(object sender, EventArgs e)
    {
        //butonları ayarlıyoruz
        btnUpdate.Enabled = false;
        btnCancel.Enabled = false;
        btnEdit.Enabled = true;
        //verileri cekiyoruz
        GetVeri();
    }
}

Herhangi bir şey sormak isterseniz yorum bölümünü kullanabilirsiniz.

Uygulamayı buradan indirebilirsiniz. TopluGuncelle.zip (5,21 kb)

Kolay gelsin

Turgay Sahtiyan

Tags: , , , ,
Kategori: ASP.NET | Development
E-mail   |     |   Comments (2)   |   Trackback

JQuery de CSS ve Posizyon İşlemleri

turgay , 15. June 2009, 18:52

Merhaba arkadaşlar

Bu yazımda JQuery de CSS ve Posizyon fonksiyonlarını anlatacağım.

Yazıyı 3 ana başlıkta toplayacağız. Bunlar

  • CSS işlemleri
  • Posizyon İşlemleri
  • Yükseklik ve Genişlik İşlemleri

 

JQuery de CSS İşlemleri

css(name) – Belirtilen elemanın name adlı özelliğinin değerini verir. Mesela button1 id li buton un background-color değerini almak için $(“#button1”).css(“background-color”)

css(properties) – Belirtilen elemanın istenen özelliklerini değiştirmek için kullanılır. Mesela button1 idli butonun background-color ve font-weight ini değiştirmek için
$(“#button1”).css({‘background-color’:’yellow’,’font-weight’:’bolder’})

css(key,value) – Belirtilen objenin key value mantığında css özelliğini değiştirmeye yarar. Mesela button1 id li button un background-color unu değiştirmek için
$(“#button1”).css(“background-color”,”yellow”)

 

JQuery de Posizyon İşlemleri (Position)

offset() – Belirtilen objenin ana dökümana göre left ve top ını öğrenmek için kullanılır. Örneğin button1 id li buton un sayfaya göre left ini bulmak için $(“#button1”).offset().left

position() – Belirtilen objenin üst parent ına göre left ve top ını öğrenmek için kullanılır. Örneğin button1 id li buton un üst parent ına göre left ini bulmak için $(“#button1”).position().left

scrollTop() – Belirtilen objenin eğer scroll u varsa scroll un yükselik olarak hangi posizyonda olduğunu verir.
$(“p:first”).scrollTop()

scrollTop(val) – Belirtilen objenin eğer scroll u varsa val değeri ile scroll un yükselik olarak posizyonu set edilir.
$(“div:first”).scrollTop(250)

scrollLeft() – Belirtilen objenin eğer scroll u varsa scroll un left olarak hangi posizyonda olduğunu verir.
$(“p:first”).scrollLeft()

scrollLeft(val) – Belirtilen objenin eğer scroll u varsa val değeri ile scroll un left olarak posizyonu set edilir.
$(“div:first”).scrollLeft(250)

 

JQuery de Yükselik ve Genişlik İşlemleri (Height - Width)

height() – Belirtilen objenin yükseliğini verir. $(“#button1”).height()

height(value) – Belirtilen objenin yükseliğini set etmeye yarar. $(“#button1”).height(100)

width() – Belirtilen objenin genişliğini verir. $(“#button1”).width()

width(value) – Belirtilen objenin genişliğini set etmeye yarar. $(“#button1”).width(100)

innerHeight() – Belirtilen objenin border ve padding gibi özelliklerinin eklenmiş yükseliğini verir. $(“#p1”).height()

innerwidth() – Belirtilen objenin border ve padding gibi özelliklerinin eklenmiş genişliğini verir. $(“#p1”).width()

 

Anlatacağımız fonksiyonlar bu kadar.

Daha fazla bilgi ve örneğe JQuery sayfasından erişebilirsiniz.

Kolay gelsin

Turgay Sahtiyan

Tags: , , ,
Kategori: JQuery | Development
E-mail   |     |   Comments (0)   |   Trackback

ASP.Net te Recursive Fonksiyon Kullanarak TreeView Doldurma

turgay , 15. June 2009, 18:49

Merhaba arkadaşlar.

Bu makalemde recursive (kendini çağıran) fonksiyon kullanarak bir TreeView nasıl doldurulur bunu göstereceğim.

Örneğimizde şunu yapacağız. İçi dolu olan bir treeview de ki bütün verilerip alıp diğer treeview e yazacağız.

tv1

Kodumuz şu şekilde olacak.

    protected void bt_Kopyala_Click(object sender, EventArgs e)
    {
        //2.tree de ki bütün node ları siliyoruz.
        TreeView2.Nodes.Clear();
        //ilk tree mizde ki ana node ları geziyoruz.
        foreach (TreeNode tn in TreeView1.Nodes)
        {
            //ana node u 2.tree ye ekliyoruz.
            TreeNode tnx = new TreeNode(tn.Text.ToString(),tn.Value.ToString());
            TreeView2.Nodes.Add(tnx);

            //ana node un alt node u varsa GetNode metod una giriyoruz.
            if (tn.ChildNodes.Count > 0)
                GetNode(tn,tnx);
        }
        //2.tree de ki bütün node ları açıyoruz
        TreeView2.ExpandAll();
    }
    protected void GetNode(TreeNode tn, TreeNode tnx)
    {
        //gelen node un altında ki node ları dönüyoruz.
        foreach (TreeNode tnCek in tn.ChildNodes)
        {
            //node ları 2. tree ye ekliyoruz.
            TreeNode tnEkle = new TreeNode(tnCek.Text.ToString(),tnCek.Value.ToString());
            tnx.ChildNodes.Add(tnEkle);

            //eğer node un alt node u varsa tekrar GetNode metod unu çağırıyoruz.
            if (tnCek.ChildNodes.Count > 0)
                GetNode(tnCek, tnEkle);                
        }
    }

Verileri veritabanından da çekip tree ye doldurabilirsiniz. Mantık aynı şekilde.

Sormak istediğiniz bir şey olursa yorum kısmında sorabilirsiniz.

Uygulamayı buradan indirebilirsiniz. TreeView.zip (7,87 kb)

Kolay Gelsin

Turgay Sahtiyan

Tags: , , , ,
Kategori: ASP.NET | Development
E-mail   |     |   Comments (2)   |   Trackback

ASP.NET te MasterPage Kullanımı (Template Kullanımı)

turgay , 15. June 2009, 18:45

Merhaba arkadaşlar,

Hepimiz sayfalarımızda kendi yaptığımız yada web den hazır olarak bulduğumuz template ler kullanmaktayız. Çoğunlukla bu templet lerde de top,left ve bottom kısımları olmakta.

ASP de geliştirme yaparken bu kısımları ayrı ayrı dosyalar yapıp her dosyamızda include ediyoduk. Ama ana şablonda bir değişiklik yapmak bazen oldukça güç oluyordu.

Visual studio da ise bunun için kullanabileceğimiz MasterPage şablonu var. Bu makalemizde MasterPage i nasıl kullanacağımızı göreceğiz.

Önce yeni bir web site başlatıyoruz. Daha sonra Add New Item bölümünde aşağıda gördüğünüz gibi Master Page i seçiyoruz ve bir isim vererek kaydediyoruz.

mp1

Master page in kodunda göreceğiniz 

        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
        
        </asp:ContentPlaceHolder>

kısmı sayfalarımızın geleceği kısım. Bunu baz alarak masterpage i istediğimiz gibi düzenliyoruz.

Masterpage şu şekilde olsun.

mp2

Şimdi yeni bir sayfa yapalım ve bu sayfanın masterpage inin bizim masterpage imizi olduğunu gösterelim.

Bunun için Add New Item dan Web Form seçiyoruz ve Select Master Page yazısının yanında ki tiki tikliyoruz. Add e bastığımızda bizi hangi masterpage i seçmek istediğimizi soruyor. Burada kendi masterpage imizi seçiyoruz ve ok e basıyoruz. Bu sayfadayken design e geçtiğimizde daha design aşamasında bile masterpage in sayfaya etkisini görebiliyoruz. Bu şekilde daha design ederken sayfamızın ne şekilde görüneceğini görebiliyoruz.

mp3

ASP.Net te MasterPage kavramı bu şekilde. Sormak istediğiniz bir şey olursa yorum bırakabilirsiniz.

İlgili uygulamayı buradan indirebilirsiniz. MasterPage.zip (4,55 kb)

Kolay Gelsin

Turgay Sahtiyan

Tags: , , , ,
Kategori: ASP.NET | Development
E-mail   |     |   Comments (3)   |   Trackback

JQuery de DOM Elemanları Manipule Etmek (JQuery Manipulation)

turgay , 13. June 2009, 22:34

Merhaba arkadaşlar. Bu makalemde size JQuery de DOM elemanların nasıl manipule edileceğini, manipule ederken kullanılan fonksiyonların açıklamalarını anlatmaya çalışacağım.

Fonksiyonları 3 başlık altında gruplayacağım. Bunlar

  • JQuery de DOM Eleman İçeriği Değiştirme
  • JQuery de DOM Elemanlara Ekleme Yapma
  • Diğer Fonksiyonlar (Replace, Remove, Copy)

 

JQuery de DOM Eleman İçeriği Değiştirme

Bu kısımda text yada div gibi elemanlarının html ve text içeriklerinin nasıl okunacağını ve değiştirileceğini göreceğiz.

html() - Belirtilen objenin html içeriğini almaya yarar. Örneğin p1 id li paragrafın html içeriğini almak için $("#p1").html()

html(val) - Belirtilen objenin html içeriğine val ı set etmeye yarar. Örneğin p1 id li paragrafın html içeriğini p2 id li paragrafa atamak için $("#p2").html($("#p1").html())

text() - Belirtilen objenin text içeriğini almaya yarar. Örneğin p1 id li paragrafın text içeriğini almak için $("#p1").text()

text(val) - Belirtilen objenin text içeriğine val ı set etmeye yarar. Örneğin p1 id li paragrafın text içeriğini p2 id li paragrafa atamak için $("#p2").text($("#p1").text())

 

JQuery de DOM Elemanlara Ekleme Yapma

Bu bölümde div p dropdownlist gibi DOM elemanlarına ekleme yapmayı göreceğiz. Eklemelerimiz 3 değişik şekilde olacak. Elemanın içine, dışına ve etrafına eklemek.

DOM Elemanların İçine Ekleme Yapma

append(content) – İstenilen DOM elemana content i eklemeye yarar. Mesela dropDownList1 e yeni bir eleman eklemek için $(“#dropDownList1”).Append(<option value='99'>Turgay</option>)

appendTo(selector) – Selector olarak verilen DOM elemana seçilen elemanları eklemeye yarar. Mesela button1 id li butonu bütün paragraflara append yapalım. (“#button1”).appendTo(“p”)

prepend(content) – İstenilen DOM elemana content i en başa ekler. Mesela bütün paragrafların içeriğinin en başına Merhaba yazalım. $(“p”).append(“<b>Merhaba</b>”)

prependTo(selector) – Selector olarak verilen DOM elemanın en başına seçilen elemanları eklemeye yarar. Mesela button1 id li butonu bütün paragraflara prepend yapalım. (“#button1”).prependTo(“p”)

DOM Elemanların Dışına Ekleme Yapma

after(content) – Content diye verilen eleman veya içeriği istenen eleman yada elemanlardan sonra eklemeye yarar. Mesela button1 id li butondan sonra solda bir buton var diye yazmak için $(“#button1”).after(“Solda bir buton var”)

before(content) – Content diye verilen eleman veya içeriği istenen eleman yada elemanlardan önce eklemeye yarar. Mesela sayfada ki bütün p lerden evvel paragraf başlangıcı yazalım. $(“p”).before(“<b>Parafraf başlangıcı</b><br>”)

insertAfter(selector) – After ile aynı işe yapar. Sadece değişkenlerin yazılma yeri farklıdır. Örneğin $(“#button1”).after(“p”) ye denk gelen insertAfter kodu $(“p”).insertAfter(“#button1”) dir.

insertBefore(selector) – Before ile aynı işe yapar. Sadece değişkenlerin yazılma yeri farklıdır. Örneğin $(“#button1”).before(“p”) ye denk gelen insertBefore kodu $(“p”).insertBefore(“#button1”) dir.

DOM Elemanların Etrafına Ekleme Yapma

wrap(html) – İstenilen objelerin etrafına html olarak verilen content i ekler. Mesela bütün paragrafların her birinin etrafına bir div ekleyelim. $(“p”).wrap(“<div></div>”)

wrap(eleman) – İstenilen objelerin etrafına eleman olarak verilen elemanı ekler. Mesela bütün paragrafların her birinin etrafına bir div ekleyelim. $(“p”).wrap(document.createElement(“div”))

wrapAll(html) – İstenilen objelerin etrafına html olarak verilen content i ekler. Mesela bütün paragrafların her birinin etrafına değil tamamının etrafına bir div ekleyelim. $(“p”).wrapAll(“<div></div>”)

wrapAll(eleman) – İstenilen objelerin etrafına eleman olarak verilen elemanı ekler. Mesela bütün paragrafların her birinin etrafına değil tamamının etrafına bir div ekleyelim. $(“p”).wrapAll(document.createElement(“div”))

wrapInner(html) – İstenilen objelerin içindeki veriyi html olarak verilen content ile çevreler. Mesela bütün paragrafların her birinin içeriğini bold yapalım. $(“p”).wrapInner(“<b></b>”)

wrapInner(eleman) – İstenilen objelerin içindeki veriyi verilen eleman ile çevreler. Mesela bütün paragrafların her birinin içeriğini bold yapalım. $(“p”).wrapInner(“document.createElement(“b”)”)

 

Diğer Fonksiyonlar (Replace, Remove, Copy)

replaceWith(content) – İstenilen objelerin yerine content diye verilen bilgiyi koyar. Mesela button1 id li butonun yerine yazı yazalım. $(“#button1”).replaceWith(“Eskiden burda bir buton vardı. Hey gidi günler hey!!”)

replaceAll(selector) – Replace ile aynıdır. Elemanların yazılma şekli farklıdır. Mesela sayfada ki bütün p lerin yerine “paragraf” yazalım. $(“paragraf”).replaceAll(“p”)

empty() – Verilen objenin içinde ki bütün child nodes ları siler. Mesela dropdownlist in içeriğini boşaltalım. $(“#dropDownList1”).empty()

remove([expr]) – Verilen objeleri silmeye yarar. Mesela sayfada ki bütün p leri silelim. $(“p”).remove()

clone() – Verilen objeyi kopyalar ve seçer

 

JQuery de Manipulation işlemleri olarak anlatacaklarım bu kadar.

Daha fazla bilgi ve örneğe JQuery sayfasından erişebilirsiniz.

Kolay Gelsin

Turgay Sahtiyan

Tags: , , , ,
Kategori: Development | JQuery
E-mail   |     |   Comments (0)   |   Trackback

ASP.NET te JQuery ile Yazıcı Dostu Sayfa Yazdırmak

turgay , 12. June 2009, 23:53

Merhaba arkadaşlar,

Bir çoğumuz sayfalarımızda masterpage, template ve bolca resim kullanmaktayız. Sayfalarımızı yazdırmak istediğimizde ise bunların çıkmamasını ve sadece content in yazdırılmasını isteriz.

İşte bu tarz durumlarda yazıcı dostu sayfalar hazırlayıp bunları yazdırmak isteriz.

Bu makalemizde bu yazıcı dostu sayfaları nasıl hazırlayacağımızı göreceğiz.

Bu işlem için bir javascript fonksiyonu kullanacağız. Butona basınca bu javascript çalışacak ve yeni sayfa açarak istediğimiz id li elemanı yazıcı dostu bir şekilde ekrana getirecek.

Mesela şu yapıda bir aspx.dosyamız olduğunu varsayalım.

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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>Yazıcı Dostu Sayfa Yazdırmak..Turgay Sahtiyan</title>
    <link href="myCss.css" rel="stylesheet" type="text/css" />
    <script src="jquery-1.3.2.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="yazdir.js"></script>        
</head>
<body>
    <form id="form1" runat="server">
    <div id="divMain">    
    <div id="divForm">    
        Form 1
        <br />
        <table style="width: 210px" border=1>
            <tr>
                <td class="style2">
                    <asp:Label ID="Label1" runat="server" Text="Ad"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="TextBox1" runat="server" Text="Turgay"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td class="style2">
                    <asp:Label ID="Label2" runat="server" Text="Soyad"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="TextBox2" runat="server" Text="Sahtiyan"></asp:TextBox>
                </td>
            </tr>
        </table>
        <asp:Button ID="Button1" runat="server" Text="Gönder" />
        <asp:Button ID="Button2" runat="server" Text="Vazgeç" />
        <br /><br />
    </div>
    <div id="divTable1" class="yazdirma">    
    Tablo 1
    <br />
    <table style="width: 210px" border=1>
        <tr>
            <td class="style2">
                1-1</td>
            <td>
                1-2</td>
        </tr>
        <tr>
            <td class="style2">
                2-1</td>
            <td>
                2-2</td>
        </tr>
    </table>
    <br />
    </div>
    <div id="divTable2">    
    Tablo 2<br />
    <table border=1>
        <tr>
            <td class="style3">
                a</td>
            <td class="style4">
                b</td>
            <td class="style5">
                c</td>
        </tr>
        <tr>
            <td class="style3">
                d</td>
            <td class="style4">
                e</td>
            <td class="style5">
                f</td>
        </tr>
        <tr>
            <td class="style3">
                g</td>
            <td class="style4">
                h</td>
            <td class="style5">
                ı</td>
        </tr>
    </table>
    </div>
    <br /><br />
    </div>
    
    <asp:Button ID="print" runat="server" Text="Sayfayı Yazdır" OnClientClick="yazdir('divMain');false;"/>                 
    </form>
</body>
</html>

Gördüğünüz gibi div ler için id kullandık. Çünkü bu id leri kullanarak istediğimiz id li elemanı yazdırabileceğiz.

Aynı zamanda göreceğiniz gibi divTable1 id li div de yazdirma diye bir class kullandık. Ve bu class sayesinde bu div yazdırılacak kısımın içinde olsa bile bunu yazdırmamayı sağlayabileceğiz.

Yani demek istediğim şu. Bir divin tamamını yazdırmak istiyoruz ama onun için de bir kısmı yazdırmak istemiyoruz. İşte bunu class ataması sayesinde halledeceğiz.

Sayfamızın yapısını şu şekilde tekrar basitçe hatırlayacak olursak.

<div id=”divMain”>
	<div id="divForm">
	</div>
           <div id="divTable1" class="yazdirma"> 
	</div>
           <div id="divTable2">    
	</div>
</div>

Buton a atayacağımız kod ise şu şekilde olacak.

    <asp:Button ID="print" runat="server" Text="Sayfayı Yazdır" OnClientClick="yazdir('divMain');false;"/>

Butona basıldığında divMain içeriğinin tamamı yazılacak. Ama divTable1 yazılmayacak çünkü onun class atamasında yazdırma seçili. Bu şekilde yazdırmak istemediklerimize class ataması yapabiliriz.

Mesela sadece divTable2 yi yazdıralım

    <asp:Button ID="print" runat="server" Text="Sayfayı Yazdır" OnClientClick="yazdir('divTable2');false;"/>

Şimdi yazdırma işini üstlenen javascript kodumuzu inceleyelim.

function yazdir(yazdirilacakBolum) {
    //Yeni bir sayfa create ediyoruz. Yazdırılacak veriyi yeni sayfada açacağız.
    var pp = window.open();
    //Yeni sayfaya HTML ve Head taglarını açıyoruz.
    pp.document.writeln('<HTML><HEAD><title>Yazdır</title></HEAD>');
    //css imizi ekliyoruz
    pp.document.writeln('<LINK href=myCss.css  type="text/css" rel="stylesheet">');
    //head tag ını kapatıyoruz.
    pp.document.writeln('</HEAD>');
    //Body tag ı ekliyoruz
    pp.document.writeln('<body bottomMargin="0" leftMargin="0" topMargin="0" rightMargin="0">');
    //Form tag ı ekliyoruz
    pp.document.writeln('<form  method="post">');
    //yazdır ve kapat diye 2 tane buton ekliyoruz.
    pp.document.writeln('<TABLE width=100%><TR><TD></TD></TR>');
    pp.document.writeln('<TR><TD align=right>');
    pp.document.writeln('<INPUT ID="PRINT" type="button" value="Yazdır" ');
    pp.document.writeln('onclick="javascript:location.reload(true);window.print();">');
    pp.document.writeln('<INPUT ID="CLOSE" type="button" value="Kapat" ');
    pp.document.writeln('onclick="window.close();">');
    pp.document.writeln('</TD></TR><TR><TD></TD></TR></TABLE>');
    //yazdırılıcak bölümü sayfaya yazıyoruz.
    //Görüldüğü gibi yazdırılacak bölümün önce child elemanlarına erişiyoruz.
    //Daha sonrada bu child elemanlardan yazdirma class ı içermeyenleri alıp
    //objeler adında bir değişken listesinde topluyoruz.
    objeler = $("#" + yazdirilacakBolum).children().not(".yazdirma");
    //objeler değişken listesine map fonksiyonu ile erişip bunları array e dönüştürüyoruz
    //array dönüşen kısmında her bir elemanı için html() fonksiyonu ile
    //html içeriğini alıyoruz. Bunuda documan a yazdırıyoruz.
    pp.document.writeln(objeler.map(function() {
                    return $(this).html();
                }).get().join(" ") );
    //form,body ve html taglarını kapatıyoruz.
    pp.document.writeln('</form></body></HTML>');
}

Evet işlemimiz bu kadar. Umarım açıklayıcı olmuştur.

Kafanıza takılan veya sormak istediğiniz herhangi bir şey olursa yorum kısmında sorabilirsiniz. En kısa sürede cevap vermeye çalışırım.

Projeyi buradan indirip inceleyebilirsiniz. YaziciDostu.zip (23,87 kb)

Kolay Gelsin

Turgay Sahtiyan

Tags: , , ,
Kategori: ASP.NET | Development | Javascript | JQuery
E-mail   |     |   Comments (3)   |   Trackback

JQuery de Traversing (Düğümlere ve Düğüm Elemanlarına Erişmek)

turgay , 11. June 2009, 17:37

Merhaba arkadaşlar,

Bu yazımızda JQuery de traversing yani düğümlere ve düğüm elemanlarına erişmeyi işleyeceğim.

Düğüm nedir. Daha önce ki yazılarımızda görmüştük. Mesela sayfamızda ki bütün dvileri seçmek için $(“div”) komutunu kullanabiliyoduk. Peki bu divleri seçtik ama bu divlerden ilkini yada belirli filtrelere uyanlara erişmek istiyoruz. İşte bu alt elemanlara düğüm erişme işlemine de traversing deniyor.

Bu bölümde işleyeceğim JQuery fonksiyonlarını 2 ana başlık altında anlatacağım. Bunlar

  • Filtreleme Yöntemi ile Erişim
  • Bulma Yöntemi ile Erişim
  • Diğer Fonksiyonlar

 

Filtreleme (Filtering)

eq(index) – Belirtilen index te ki objeyi döndürür. index 0 dan başlar. Mesela div lerimizden 3. süne erişmek için $(“div”).eq(2)

slice(start, [end]) – eq ile 1 elemana erişiyoduk. slice ile ise start tan başlayıp end e kadar olan elemanlara erişebiliriz. Yada end değerini vermezsek start tan başlayıp son elemana kadar erişebiliriz. Mesela sayfamızda ki divlerden 3 ile 7 sıra arasında olanlar için $(“div”).slice(2,6), yada sayfamızda ki divlerden index numarası 3 ten büyük olanlar için $(“div”).slice(2)

filter(expr) – Belirtilen özelliğe uyan elemanları döndürür. Mesela sayfamız da ki divlerden class ı my class olanları bulmak için $(“div”).filter(“.myClass”)

not(expr) – Belirtilen özelliğe uymayan elemanları döndürür. Mesela sayfamız da ki divlerden class ı my class olmayanları bulmak için $(“div”).not(“.myClass”)

Bu arada birden fazla özelliği arka arkaya kullanabiliriz. Mesela myClass olmayan ve id si myDiv olmayan div ler için $(“div”).not(“.myClass, #myDiv”)

is(expr) – Seçili öğenin expr ile verilen özelliği olup olmamasını sınar. Mesela sayfamızda ki divlerden 3.div in class özelliği myClass mı diye bakalım.

if $(“div”).eq(2).is(“.myClass”) {
    //doğru
}

map(callback) – Bir grup elemanı array e dönüştürmeye yarar. Mesela sayfamızda ki textboxların içinde ki değerleri virgülle ayrıştırıp id si sonuc olan paragrafa yazalım.

 $("#sonuc").append( $("input").map(function(){
      return $(this).val();
    }).get().join(", ") );

Bulma (Finding)

add(expr) – Seçili olan eleman listesine daha fazla eleman eklemeye yarar. Mesela sayfamız daki div lerin border ını değiştirdikten sonra bütün paragrafları ekleyip hepsinin background unu değiştirelim.

$("div").css("border", "2px solid red")
           .add("p")
           .css("background", "yellow");

children([expr]) – Bir elemanın alt elemanlarına erişmeye yarar. Mesela bir div içinde ki bütün elemanları başka bir değişkene atalım. var $altEleman=$(“div”).eq(0).children();

find(expr) – Bir eleman listesi içinde ki başka bir eleman listesine erişmeye yarar. Mesela sayfamızda ki divler içinde ki span lara erişmek için $(“div”).find(“span”)

next([expr]) – Bir elemandan sonraki elemanı işaret eder. Mesela button1 id li bir butonun yanında ki span a soldaki bir butondur yazdıralım. $(“#button1”).next().text(“Soldaki bir butondur”)

nextAll([expr]) – Bir elemandan sonraki bütün elemanları işaret eder. Mesela 3.div den sonraki bütün divlere class ataması yapalım. $(“div”).eq(2).nextAll().addClass(“myClass”);

prev([expr]) – Bir elemandan önceki elemanı işaret eder. Mesela button1 id li bir butonun yanında ki span a sağdaki bir butondur yazdıralım. $(“#button1”).prev().text(“Sağdaki bir butondur”)

prevAll([expr]) – Bir elemandan önceki bütün elemanları işaret eder. Mesela 3.div den önceki bütün divlere class ataması yapalım. $(“div”).eq(2).prevAll().addClass(“myClass”);

parent([expr]) – Belirtilen elemanın parent ına erişmek için kullanılır. Mesela sayfamız da ki button1 id li button un parent inin tipini öğrenelim. $(“#button1”).parent().get(0).tagName;

parents([expr]) – Bir elemanın bütün parentlarını bulmaya yarar. Mesela button1 id li elemanın parentlarını bulalım ve bunları virgülle ayırarak sonuc id li paragrafa yazalım.

var parentEls = $("#button1").parents()
                          .map(function () { 
                                return this.tagName; 
                              })
                          .get().join(", ");
    $("b").append("<strong>" + parentEls + "</strong>");

 

Diğer Fonksiyonlar

addSelf() – Geçerli seçimin üstüne bir önceki seçimi ekler. Mesela aşağıda ki örnek te div ve p lerin border ı değişirken sadece p lerin background u değişmektedir.

    $("div").find("p").andSelf().addClass("border");
    $("div").find("p").addClass("background");

end() – Geçerli filtrelemeyi iptal etmeye yarar. Mesela div ilkine class ataması yapıp daha sonra tamamına background atayalım.

$("div")
	.eq(0)
	.addClass("myClass")
	.end()
	.css("background", "yellow");

Traversing anlatımımız bu kadar.

Daha fazla bilgi ve örneğe JQuery Traversing sayfasından erişebilirsiniz.

Kolay Gelsin

Turgay Sahtiyan

Tags: , ,
Kategori: Development | JQuery
E-mail   |     |   Comments (0)   |   Trackback

ASP.Net te Ajax,JQuery ve JSON Kullanarak İl-İlçe-Semt Uygulaması

turgay , 10. June 2009, 22:31

Merhaba arkadaşlar

Bu yazımda daha önce Ajax, JQuery ve WebMethod kullanarak yaptığımız il-ilçe-semt uygulamasını şimdi remote bir dosya ve JSON kullanarak yapacağız. Önceki makaleye buradan erişebilirsiniz.

DataTableToJSon metoduyla alakalı makaleye de buradan erişebilirsiniz.

Açıklamalar kod üzerindedir.

ilce_semt.aspx. ilçe ve semt bilgilerini getiren aspx dosyası.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Text;
using System.Data;
using System.Data.SqlClient;

public partial class ilce_semt : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        string tip = Request["tip"].ToString();
        string id = Request["id"].ToString();

        //bağlantılar
        SqlConnection sqlConnection = new SqlConnection(System.Configuration.ConfigurationSettings.AppSettings["connectionString"]);
        DataTable dataTable = new DataTable();
        SqlCommand sqlCommand = new SqlCommand();
        SqlDataAdapter sqlAdapter = new SqlDataAdapter();

        sqlConnection.Open();
        try
        {
            if (tip == "ilce")
            {
                sqlCommand = new SqlCommand("Select * from ilceler where IlID=@ID", sqlConnection);
            }
            else if (tip == "semt")
            {
                sqlCommand = new SqlCommand("Select * from semtler where IlceID=@ID", sqlConnection);
            }

            sqlCommand.Parameters.Add("ID", SqlDbType.NVarChar);
            sqlCommand.Parameters["ID"].Value = id;

            sqlAdapter = new SqlDataAdapter(sqlCommand);
            sqlAdapter.Fill(dataTable);

            if (tip == "ilce")
                Response.Write(DataTableToJSon("0", dataTable, "IlceID,Ad"));
            else if (tip == "semt")
                Response.Write(DataTableToJSon("0", dataTable, "SemtID,Ad"));
        }
        catch
        {
            Response.Write("");
        }
        finally
        {
            sqlConnection.Close();
        }
    }

    /// <summary>Verilen datatable'ı JSON string olarak döndürür.</summary>
    /// <param name="type">"0" ise kolon adlarıyla dönüş yapar."1" ise row-col şeklinde dönüş yapar.</param>
    /// <param name="dt">JSON'a dönüştürülecek DataTable.</param>
    /// <param name="allowCols">İstenilen kolonlar.Virgül ile ayrılarak yazılacak.</param>
    /// <returns>JSON String.</returns>
    public string DataTableToJSon(string type, DataTable dt, string allowCols)
    {
        //allowCols string ini indexof kullanabilmek için List e atıyoruz
        List<string> listCols = new List<string>();
        if (allowCols != null)
        {
            foreach (string s in allowCols.Split(','))
            {
                listCols.Add(s);
            }
        }

        //dönüş string i
        StringBuilder JsonString = new StringBuilder();
        if (dt != null && dt.Rows.Count > 0)
        {
            if (type == "0")
            {
                JsonString.Append("{ ");
                JsonString.Append("\"Head\":[ ");
            }
            else
            {
                JsonString.Append("{ ");
                JsonString.Append("\"TABLE\":[{ ");
                JsonString.Append("\"ROW\":[ ");
            }
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                if (type != "0")
                    JsonString.Append("\"COL\":[ ");

                JsonString.Append("{ ");
                for (int j = 0; j < dt.Columns.Count; j++)
                {
                    //allowCols null sa veya bu colon allowCols ta var ise
                    if ((allowCols == null) || (listCols.IndexOf(dt.Columns[j].ColumnName.ToString()) > -1))
                    {
                        if (j < dt.Columns.Count - 1)
                        {
                            if (type == "0")
                                JsonString.Append("\"" + dt.Columns[j].ColumnName.ToString() + "\":" + "\"" + dt.Rows[i][j].ToString() + "\",");
                            else
                                JsonString.Append("{" + "\"DATA\":\"" + dt.Rows[i][j].ToString() + "\"},");
                        }
                        else if (j == dt.Columns.Count - 1)
                        {
                            if (type == "0")
                                JsonString.Append("\"" + dt.Columns[j].ColumnName.ToString() + "\":" + "\"" + dt.Rows[i][j].ToString() + "\"");
                            else
                                JsonString.Append("{" + "\"DATA\":\"" + dt.Rows[i][j].ToString() + "\"}");
                        }
                    }
                }
                if (i == dt.Rows.Count - 1)
                {
                    if (type == "0")
                        JsonString.Append("} ");
                    else
                        JsonString.Append("]} ");
                }
                else
                {
                    if (type == "0")
                        JsonString.Append("}, ");
                    else
                        JsonString.Append("]}, ");
                }
            }
            if (type == "0")
                JsonString.Append("]}");
            else
                JsonString.Append("]}]}");
            return JsonString.ToString();
        }
        else
        {
            return null;
        }
    }
}

Default.aspx dosyası

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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>ASP.Net te Ajax ve JQuery Kullanarak İl-İlçe-Semt Uygulaması</title>
    <meta name="coder" content="Turgay SAHTİYAN" />
    <script src="JS/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
    //sayfa çalıştığında yapılan işlemler
    $(document).ready(function() {
        //ilçe ve semt in yanında ki yükleniyor gif lerini sayfa çalıştığında hide yapıyoruz.
        $("#loaderGif1").hide();
        $("#loaderGif2").hide();

        //ilçe ve semt dropdown larının içini sayfa çalıştığında set ediyoruz.
        $("#ddl_ilce").html("<option value=''>Önce İl Seçiniz</option>");
        $("#ddl_semt").html("<option value=''>Önce İlçe Seçiniz</option>");

        //il dropdown u change olduğunda çalışacak fonksiyon
        $("#ddl_il").change(function() {
            ilChange();
        })

        //ilçe dropdown u change olduğunda çalışacak fonksiyon
        $("#ddl_ilce").change(function() {
            ilceChange();
        })
    });

    //il dropdown u change olduğunda çalışacak fonksiyon
    function ilChange() {
        //ilçenin yanında ki yükleniyor gif ini show yapıyoruz.
        $("#loaderGif1").show();
        //ilçe ve semt dropdown larının içini sayfa çalıştığında set ediyoruz ve disabled yapıyoruz.
        $("#ddl_ilce").attr("disabled", "true").html("<option value=''>Önce İl Seçiniz</option>");
        $("#ddl_semt").attr("disabled", "true").html("<option value=''>Önce İlçe Seçiniz</option>");
        //il dropdown unda ki seçili öğenin değerini alıyoruz.
        var ilID = $("#ddl_il").val();

        $.getJSON("ilce_semt.aspx", { tip: "ilce", id: ilID },
            function (JSON) {
                //ilçenin içini boşaltalım.
                $('#ddl_ilce').empty();
                //ilk item olarak ilçe seçiniz yazısını ekleyelim
                $("#ddl_ilce").append("<option value=''>İlçe Seçiniz</option>");
                //json datamızı dönerek ilçe nin içini dolduralım
                $.each(JSON.Head, function(i, data) {
                    $("#ddl_ilce").append("<option value='" + data.IlceID + "'>" + data.Ad + "</option>");
                });
                //ilçenin yanında ki yükleniyor gif ini hide yapıyoruz.
                $("#loaderGif1").hide();
                //ilçenin disabled özelliğini kaldırıyoruz.
                $("#ddl_ilce").removeAttr("disabled");
                //semt in disabled özelliğini kaldırıyoruz.
                $("#ddl_semt").removeAttr("disabled");
            }        
        );
        
        return false;
    }

    //ilçe dropdown u change olduğunda çalışacak fonksiyon
    function ilceChange() {
        //semtin yanında ki yükleniyor gif ini show yapıyoruz.
        $("#loaderGif2").show();
        //semt dropdown larının içini sayfa çalıştığında set ediyoruz ve disabled yapıyoruz.
        $("#ddl_semt").attr("disabled", "true").html("<option value=''>Önce İlçe Seçiniz</option>");
        //ilçe dropdown unda ki seçili öğenin değerini alıyoruz.
        var ilceID = $("#ddl_ilce").val();

        $.getJSON("ilce_semt.aspx", { tip: "semt", id: ilceID },
            function(JSON) {
                //semtin içini boşaltalım.
                $('#ddl_semt').empty();
                //ilk item olarak ilçe seçiniz yazısını ekleyelim
                $("#ddl_semt").append("<option value=''>Semt Seçiniz</option>");
                //json datamızı dönerek semtin içini dolduralım
                $.each(JSON.Head, function(i, data) {
                    $("#ddl_semt").append("<option value='" + data.SemtID + "'>" + data.Ad + "</option>");
                });
                //semtin yanında ki yükleniyor gif ini hide yapıyoruz.
                $("#loaderGif2").hide();
                //semt in disabled özelliğini kaldırıyoruz.
                $("#ddl_semt").removeAttr("disabled");
            }
        );

        return false;
    }
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <table>
            <tr>
                <td>
                    il</td>
                <td>
                    <asp:DropDownList ID="ddl_il" runat="server" >
                    </asp:DropDownList>
                </td>
            </tr>
            <tr>
                <td>
                    ilçe</td>
                <td>
                    <asp:DropDownList ID="ddl_ilce" runat="server" >
                    </asp:DropDownList>
                    <img id="loaderGif1" alt="" src="Images/loader.gif" style="width: 16px; height: 16px" /></td>
            </tr>
            <tr>
                <td>
                    semt</td>
                <td>
                    <asp:DropDownList ID="ddl_semt" runat="server">
                    </asp:DropDownList>
                    <img id="loaderGif2" alt="" src="Images/loader.gif" style="width: 16px; height: 16px" /></td>
            </tr>
        </table>
        <br />
    </div>
    </form>
</body>
</html>

Default.aspx.cs dosyası

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Web.Services;
using System.Text;

public partial class _Default : System.Web.UI.Page 
{

    protected void Page_Load(object sender, EventArgs e)
    {
        //bağlantılar
        SqlConnection sqlConnection = new SqlConnection(System.Configuration.ConfigurationSettings.AppSettings["connectionString"]);
        DataTable dataTableIl = new DataTable();
        SqlCommand sqlCommand = new SqlCommand();
        SqlDataAdapter sqlAdapter = new SqlDataAdapter();

        sqlConnection.Open();
        try
        {
            sqlCommand = new SqlCommand("Select * from iller", sqlConnection);

            sqlAdapter = new SqlDataAdapter(sqlCommand);
            sqlAdapter.Fill(dataTableIl);

            //il dropdown unu dolduruyoruz
            ddl_il.DataSource = dataTableIl;
            ddl_il.DataTextField = "Ad";
            ddl_il.DataValueField = "IlID";
            ddl_il.DataBind();
            ListItem li = new ListItem("İl Seçiniz", "");
            ddl_il.Items.Insert(0, li);
        }
        finally
        {
            sqlConnection.Close();
        }
    }
}

 

Dikkat etmemiz gereken bir nokta ilce_semt.aspx dosyasında sadece JSON verisi olmalı. Yoksa JSON fonksiyonu çalışmaz.

Örneği buradan indirebilirsiniz. Ajax_JSon_il_ilce_semt.zip (1,80 mb)

Kolay Gelsin

Turgay Sahtiyan

Tags: , , , , , , , ,
Kategori: Development | Ajax | ASP.NET | JQuery | JSon
E-mail   |     |   Comments (2)   |   Trackback

ASP.NET te DataTable ı JSON a Çevirmek (DataTable Convert to JSON)

turgay , 9. June 2009, 23:54

Merhaba arkadaşlar,

Ajax ve JSON ile İl-İlçe-Semt uygulama makalemi hazırlarken DataList i JSON a dönüştürecek bir fonksiyona ihtiyacım oldu. Web de arayınca aşağıda ki sayfaya eriştim.

http://www.codeproject.com/KB/aspnet/ASPNET_DataTable_to_JSON.aspx

Burdaki fonksiyonları kullanarak tek bir fonksiyon hazırladım ve bir de allowCols yani istenilen kolonlar parametresini ekleyip yeni bir fonksiyon yaptım.

Güzel bir fonksiyon oldu. Umarım işinize yarar.

    /// <summary>Verilen datatable'ı JSON string olarak döndürür.</summary>
    /// <param name="type">"0" ise kolon adlarıyla dönüş yapar."1" ise row-col şeklinde dönüş yapar.</param>
    /// <param name="dt">JSON'a dönüştürülecek DataTable.</param>
    /// <param name="allowCols">İstenilen kolonlar.Virgül ile ayrılarak yazılacak.</param>
    /// <returns>JSON String.</returns>
    public string DataTableToJSon(string type,DataTable dt,string allowCols)
    {
        //allowCols string ini indexof kullanabilmek için List e atıyoruz
        List<string> listCols = new List<string>();
        if (allowCols != null)
        {
            foreach (string s in allowCols.Split(','))
            {
                listCols.Add(s);
            }
        }

        //dönüş string i
        StringBuilder JsonString = new StringBuilder();
        if (dt != null && dt.Rows.Count > 0)
        {
            if (type=="0")
            {
                JsonString.Append("{ ");
                JsonString.Append("\"Head\":[ ");
            }
            else
            {
                JsonString.Append("{ ");
                JsonString.Append("\"TABLE\":[{ ");
                JsonString.Append("\"ROW\":[ ");
            }
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                if (type!="0")
                    JsonString.Append("\"COL\":[ ");

                JsonString.Append("{ ");
                for (int j = 0; j < dt.Columns.Count; j++)
                {
                    //allowCols null sa veya bu colon allowCols ta var ise
                    if ((allowCols==null) || (listCols.IndexOf(dt.Columns[j].ColumnName.ToString())>-1))
                    {
                        if (j < dt.Columns.Count - 1)
                        {
                            if (type=="0")
                                JsonString.Append("\"" + dt.Columns[j].ColumnName.ToString() + "\":" + "\"" + dt.Rows[i][j].ToString() + "\",");
                            else
                                JsonString.Append("{" + "\"DATA\":\"" + dt.Rows[i][j].ToString() + "\"},");
                        }
                        else if (j == dt.Columns.Count - 1)
                        {
                            if (type=="0")
                                JsonString.Append("\"" + dt.Columns[j].ColumnName.ToString() + "\":" + "\"" + dt.Rows[i][j].ToString() + "\"");
                            else
                                JsonString.Append("{" + "\"DATA\":\"" + dt.Rows[i][j].ToString() + "\"}");
                        }
                    }
                }
                if (i == dt.Rows.Count - 1)
                {
                    if (type=="0")
                        JsonString.Append("} ");
                    else
                        JsonString.Append("]} ");
                }
                else
                {
                    if (type=="0")
                        JsonString.Append("}, ");
                    else
                        JsonString.Append("]}, ");
                }
            }
            if (type=="0")
                JsonString.Append("]}");
            else
                JsonString.Append("]}]}");
            return JsonString.ToString();
        }
        else
        {
            return null;
        }
    }

Kullanımı

TextBox1.Text = DataTableToJSon("0", dataTableIlce, "IlceID,Ad");

Dönen değer

{ "Head":[ 
	{ "IlceID":"117","Ad":"Ardanuç"}, 
	{ "IlceID":"118","Ad":"Arhavi"}, 
	{ "IlceID":"119","Ad":"Borçka"}, 
	{ "IlceID":"120","Ad":"Hopa"}, 
	{ "IlceID":"121","Ad":"Merkez"}, 
	{ "IlceID":"122","Ad":"Murgul"}, 
	{ "IlceID":"123","Ad":"Şavşat"}, 
	{ "IlceID":"124","Ad":"Yusufeli"} 
]}

 

Kullanım 2

TextBox1.Text = DataTableToJSon("1", dataTableIlce, null);

Dönen değer

{ "TABLE":[
	{ "ROW":
		[ 
		"COL":[ {{"DATA":"117"},{"DATA":"10"},{"DATA":"Ardanuç"}]}, 
		"COL":[ { {"DATA":"118"},{"DATA":"10"},{"DATA":"Arhavi"}]}, 
		"COL":[ { {"DATA":"119"},{"DATA":"10"},{"DATA":"Borçka"}]}, 
		"COL":[ { {"DATA":"120"},{"DATA":"10"},{"DATA":"Hopa"}]}, 
		"COL":[ { {"DATA":"121"},{"DATA":"10"},{"DATA":"Merkez"}]}, 
		"COL":[ { {"DATA":"122"},{"DATA":"10"},{"DATA":"Murgul"}]}, 
		"COL":[ { {"DATA":"123"},{"DATA":"10"},{"DATA":"Şavşat"}]}, 
		"COL":[ { {"DATA":"124"},{"DATA":"10"},{"DATA":"Yusufeli"}]} 
	]}
]}

Kolay Gelsin

Turgay Sahtiyan

Tags: , , , ,
Kategori: ASP.NET | Development | JSon
E-mail   |     |   Comments (0)   |   Trackback