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.
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.
- 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.
Sağdaki listeden bir eleman seçip << okuna tıklayınız. Seçili eleman sağdaki listeden silinip soldaki listeye eklenecektir.
Yepyeni makalelerde görüşmek dileğiyle :)
Veysel Uğur KIZMAZ
Bilgisayar Mühendisi
veysel@ugurkizmaz.com