Dropdownlist

ASPX WebForm sayfalarında, bir dropdown'daki seçim değiştiğinde başka bir dropdown'ı güncellemek istediğinizde, bu işlemi sayfanın yeniden yüklenmesine neden olmadan yapmak için genellikle AJAX kullanılır. Bu durumda, ilk dropdown'daki (iller) seçimin değiştiği anda ikinci dropdown'ı (ilçeler) güncellemek için bir JavaScript fonksiyonu yazabilir ve bu fonksiyon içerisinde sunucuya (ASPX.CS dosyasına) AJAX isteği gönderebilirsiniz. Bu istek, seçilen il bilgisini içerecek ve sunucu tarafından ilçeler listesi döndürülecektir.

İşte bu işlemi gerçekleştirmek için adım adım bir rehber:

1. JavaScript ve AJAX Fonksiyonunu Yazmak

ASPX sayfanızda, il dropdown'ınızın seçimi değiştiğinde tetiklenecek bir JavaScript fonksiyonu yazın. Bu fonksiyon, AJAX kullanarak sunucuya (ASPX.CS) bir istek gönderir.

html
<script type="text/javascript"> function updateIlceDropdown() { var ilId = $('#<%= ddlIl.ClientID %>').val(); // İl dropdown'ının seçili değerini alır $.ajax({ type: "POST", url: "SayfaAdi.aspx/GetIlceler", // Sunucu tarafındaki metodun yolu data: JSON.stringify({ ilId: ilId }), contentType: "application/json; charset=utf-8", dataType: "json", success: function(response) { // Başarılı yanıt alındığında ilçe dropdown'ını güncelleyin var ddlIlce = $('#<%= ddlIlce.ClientID %>'); ddlIlce.empty(); $.each(response.d, function(key, value) { ddlIlce.append($("<option></option>").val(value.IlceId).html(value.IlceAdi)); }); }, error: function(error) { // Hata durumunda yapılacak işlemler alert("Bir hata oluştu: " + error.responseText); } }); } </script>

EĞER DorpDownListItem gelecekse WebMoehoddan
<script type="text/javascript"> function updateIlceDropdown() { var ilId = $('#<%= ddlIl.ClientID %>').val(); // İl dropdown'ının seçili değerini alır $.ajax({ type: "POST", url: "SayfaAdi.aspx/GetIlceler", // Sunucu tarafındaki metodun yolu data: JSON.stringify({ ilId: ilId }), contentType: "application/json; charset=utf-8", dataType: "json", success: function(response) { // Başarılı yanıt alındığında ilçe dropdown'ını güncelleyin var ddlIlce = $('#<%= ddlIlce.ClientID %>'); ddlIlce.empty(); $.each(response.d, function() { ddlIlce.append($("<option></option>").val(this['Value']).html(this['Text'])); }); }, error: function(error) { // Hata durumunda yapılacak işlemler alert("Bir hata oluştu: " + error.responseText); } }); } </script>

2. İl Dropdown'ında Seçim Değişikliğini Tetiklemek

İl dropdown'ınızın SelectedIndexChanged olayını JavaScript fonksiyonunu çağıracak şekilde ayarlayın.

html
<asp:DropDownList ID="ddlIl" runat="server" onchange="updateIlceDropdown();" AutoPostBack="False"> ... </asp:DropDownList>

3. Sunucu Tarafında Gerekli Metodu Yazmak

ASPX.CS dosyanızda, AJAX isteği tarafından çağrılacak bir web metodunu tanımlayın. Bu metod, seçilen il ID'sine göre ilçeler listesini döndürmelidir.

csharp
[WebMethod] public static List<Ilce> GetIlceler(int ilId) { List<Ilce> ilcelerListesi = new List<Ilce>(); // SQL sorgunuzu burada yazarak, ilçeler listesini doldurun // Örnek: // ilcelerListesi = veritabani.Sorgula(ilId); return ilcelerListesi; } public class Ilce { public int IlceId { get; set; } public string IlceAdi { get; set; } }

Bu yöntem, sayfanın yeniden yüklenmesine neden olmadan, il seçildiğinde ilçe dropdown'ını güncellemenizi sağlar. Unutmayın, AJAX isteğinin çalışması için jQuery kütüphanesinin sayfanıza dahil edilmiş olması gerekir. Bu kütüphaneyi CDN üzerinden veya yerel olarak sayfanıza ekleyebilirsiniz.



Yorumlar

Bu blogdaki popüler yayınlar

VMWare installation solution