"/>"/>
Yazılım Dilleri
Asp.Net 4.5 Kitabı
Skip Navigation Links

Asp.Net ve JQuery ile ListBoxlar Arası Veri Taşıma

Asp.Net ve jQuery ile iki listBox kontrolü arasında veri taşıma işlemini gerçekleştireceğiz.

 Asp.Net içerisinde iki ListBox kontrolleri içerisindeki verileri birbirleri arasında aktarmak isteyebilirsiniz.

 

Örneğin bir kariyer sitesi geliştiriyorsunuz. Bu sitede kişinin yetkinliklerini seçmesini isteyeceksiniz. İşlemi gerçekleştebilmek için iki adet ListBox kontrolü yerleştirdiğinizi düşünelim. Soldaki kontrolde sistemde yer alan programlama dilleri bulunsun. Kullanıcının, soldaki listeden bir dili seçip sağdaki kontrole ekleyebileceği bir yapı oluşturmanız gerekmektedir.
 
listboxlar arası veri taşıma
 
Bu işlemi sunucu taraflı kodlarla gerçekleştirebilirsiniz. Sayfaya ScriptManager ekleyip kontrolleri Update Panel içerisine yerleştirebilir, sunucu tarafında yapacağınız kodlama ile bu işlemi tanımlayabilirsiniz. Bu tür basit bir işlem için sürekli sunucuya gitmek (farklı kontroller ya da işlemler yapılmayacaksa) çok mantıklı olmayacaktır. Bunun yerine işlemleri istemci tarafında gerçekleştirmek hem sunucu tarafındaki iş yükünü azaltacak hem de işleminizin daha hızlı gerçekleşmesini sağlayacaktır.
 
Jquery.com sitesinden Jquery’nin son sürümünü indiriniz ve projenize ekleyiniz.
 
listboxlar arası jquery ile veri taşıma
 
  •  Form içerisine iki adet ListBox ekleyip soldaki listbox kontrolünde programlama dillerini listeleyelim.
  • İki adet input button kontrolü yerleştirelim. Bu kontrollerden biri ile (btSagaAktar) soldaki ListBox’ta yer alan seçili değeri sağa aktarımı gerçekleştireceğiz. Diğer kontrol (btSolaAktar) ile de sağdaki ListBox’ta yer alan seçili değeri sola aktarımı gerçekleştireceğiz.
  • Kullanıcının herhangi bir veri girişi yapmadığını düşünerek sağdaki ListBox kontrolünü (lsbSag) boş bırakalım.
 
<formid="form1"runat="server">
    <div>
        <asp:ListBoxID="lsbSol"runat="server"Height="150">
            <asp:ListItemText="Asp.Net"Value="1"></asp:ListItem>
            <asp:ListItemText="Ajax"Value="2"></asp:ListItem>
            <asp:ListItemText="C#"Value="3"></asp:ListItem>
            <asp:ListItemText="Delphi"Value="4"></asp:ListItem>
            <asp:ListItemText="HTML"Value="5"></asp:ListItem>
            <asp:ListItemText="Java"Value="6"></asp:ListItem>
            <asp:ListItemText="Javascript"Value="7"></asp:ListItem>
            <asp:ListItemText="PHP"Value="8"></asp:ListItem>
            <asp:ListItemText="VB.Net"Value="9"></asp:ListItem>
        </asp:ListBox>
 
        <inputid="btSolaAktar"type="button"value="<<"/>
        <inputid="btSagaAktar"type="button"value=">>"/>
 
        <asp:ListBoxID="lsbSag"runat="server" Height="150"></asp:ListBox>
    </div>
</form>
 
Şimdi asıl önemli olan noktaya geldik: Jquery ile ListBox kontrollerine erişip seçili değeri diğer ListBox’a aktarma.
Bu işlem için öncelikle jquery.js dosyasını sayfaya dahil edelim.
 
<scriptsrc="jquery.js"type="text/javascript"></script>
 
Şimdi kodlarımızı yazalım.
 
<scripttype="text/javascript">
    $(function () {
        var lsbSol = $('#lsbSol');
        var lsbSag = $('#lsbSag');
        $("#btSagaAktar").click(function () {
            lsbSol.find('option:selected').appendTo(lsbSag);
        });
        $("#btSolaAktar").click(function () {
            lsbSag.find('option:selected').appendTo(lsbSol);
        });
 
    });
</script>
 
  • lsbSol değişkeninde, formda yer alan lsbSol isimli kontrolü ( $('#lsbSol')) tutuyoruz.
  • lsbSag değişkeninde, formda yer alan lsbSag isimli kontrolü ( $('#lsbSag')) tutuyoruz.
  • btSagaAktar isimli butonun click eventını tanımlıyoruz. $("#btSagaAktar").click(function ());
  • btSagaAktar > Click olayında lsbSol kontrolünde seçili (lsbSol.find('option:selected') ) olan kaydı alıp lsbSag kontrolüne aktarmaktayız. ( .appendTo(lsbSag) ).
  • btSolaAktar isimli butonun click eventını tanımlıyoruz. $("#btSolaAktar").click(function ());
  • btSolaAktar > Click olayında lsbSag kontrolünde seçili (lsbSag.find('option:selected') ) olan kaydı alıp lsbSol kontrolüne aktarmaktayız. ( .appendTo(lsbSol) ).
  • Projeyi çalıştırınız ve soldaki listeden bir eleman seçip >> okuna tıklayınız. Seçili eleman soldaki listeden silinip sağdaki listeye eklenecektir.
listboxlar arası aktarma
 
Sağdaki listeden bir eleman seçip << okuna tıklayınız. Seçili eleman sağdaki listeden silinip soldaki listeye eklenecektir.
 
listboxlar arası veri aktarımı
 
 
Yepyeni makalelerde görüşmek dileğiyle :)
 
Veysel Uğur KIZMAZ
Bilgisayar Mühendisi
veysel@ugurkizmaz.com
 

Yorumlar (0)

Yorum Yap

Mail listesine katılmak için tıklayınız

Hakkımdaki son bilgilere anlık erişmek için mail listesine katılabilirsiniz.