Merhaba arkadaşlar,

Bu yazımda web sayfalarında sık sık karşımıza çıkan bir uygulama olan sayfayı reload etmeden ajax ile il-ilçe-semt seçim işleminin nasıl yapıldığını anlatacağım. Bu arada bu örneğimizi WebMethod ile geliştireceğiz. WebMethod aspx.cs dosyalarımızda ki fonksiyonlara javascript içerisinden erişme metodudur.

Daha sonra bu örneğin aynısını json ilede yapacağız.

Kodun tamamı kendi yazdığım bir koddur ve anlaşılması kolay olsun diye pek fazla sıkıştırma yapılmamıştır. Siz kendi isteğinize göre düzenlersiniz.

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();
        //webmethod ile çalışacağımız için path bilgisini alıyoruz.
        var pagePath = window.location.pathname;

        //ajax isteğimiz
        $.ajax({
            type: "POST", //GET veya POST
            url: pagePath + "/ilChange", //hangi fonksiyonu çağıracaz.default.aspx/ilchange
            contentType: "application/json; charset=utf-8",
            data: '{ilID:'+ilID+'}', //gönderdiğimiz parametreler
            dataType: "json",
            success: onSucceeded1, //istek başarılı olduğunda çalışacak fonksiyon
            error: onFailed //istek hatalı olduğunda çalışacak fonksiyon
        });
        return false;
    }

    //istek başarılı olduğunda çalışacak fonksiyon
    function onSucceeded1(result) {
        //ilçenin yanında ki yükleniyor gif ini hide yapıyoruz.
        $("#loaderGif1").hide();
        //ilçe dropdown una gelen bilgiyi atıyoruz. aynı zamanda disabled özelliğini kaldırıyoruz.
        $("#ddl_ilce").removeAttr("disabled").html(result.d);
        //semt in disabled özelliğini kaldırıyoruz.
        $("#ddl_semt").removeAttr("disabled");
    }

    //istek hatalı olduğunda çalışacak fonksiyon
    function onFailed(result) {
        alert(result.d);
    }

    //bu fonksiyonun çalışma mantığıda ilChange gibi
    function ilceChange() {
        $("#loaderGif2").show();
        $("#ddl_semt").attr("disabled", "true").html("<option value=''>Önce İlçe Seçiniz</option>");
        var ilceID = $("#ddl_ilce").val();
        var pagePath = window.location.pathname;

        $.ajax({
            type: "POST",
            url: pagePath + "/ilceChange",
            contentType: "application/json; charset=utf-8",
            data: '{ilceID:' + ilceID + '}',
            dataType: "json",
            success: onSucceeded2,
            error: onFailed
        });
        return false;
    }

    function onSucceeded2(result) {
        $("#loaderGif2").hide();
        $("#ddl_semt").removeAttr("disabled").html(result.d);
    }
</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>
    
    </div>
    </form>
</body>
</html>

Defaul.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;

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();
        }
    }

    //trick nokta burası. Procedure umuzun üstüne WebMethod yazıyoruz ve javascript ten erişiyoruz.
    //bu arada public ve static olarak tanımlıyoruz.
    [WebMethod]
    public static string ilChange(string ilID)
    {
        //yükleniyor giflerini görmek için. Daha sonra kaldırınız.
        System.Threading.Thread.Sleep(2000); 

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

        sqlConnection.Open();
        try
        {
            sqlCommand = new SqlCommand("Select * from ilceler where IlID=@IlID", sqlConnection);

            sqlCommand.Parameters.Add("IlID", SqlDbType.NVarChar);
            sqlCommand.Parameters["IlID"].Value = ilID;

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

            //result ımızı dolduruyoruz.
            result += "<option value=''>İlçe Seçiniz</option>";
            foreach (DataRow dataRow in dataTableIlce.Rows)
            {
                result += "<option value='" + dataRow["IlceId"].ToString() + "'>" + dataRow["Ad"].ToString() + "</option>";
            }
            return result;
        }
        catch(Exception e)
        {
            return (e.ToString());
        }
        finally
        {
            sqlConnection.Close();
        }
    }

    //ilchange ile aynı.
    [WebMethod]
    public static string ilceChange(string ilceID)
    {
        System.Threading.Thread.Sleep(2000);
        SqlConnection sqlConnection = new SqlConnection(System.Configuration.ConfigurationSettings.AppSettings["connectionString"]);
        DataTable dataTableSemt = new DataTable();
        SqlCommand sqlCommand = new SqlCommand();
        SqlDataAdapter sqlAdapter = new SqlDataAdapter();
        string result = "";

        sqlConnection.Open();
        try
        {
            sqlCommand = new SqlCommand("Select * from semtler where IlceID=@IlceID", sqlConnection);

            sqlCommand.Parameters.Add("IlceID", SqlDbType.NVarChar);
            sqlCommand.Parameters["IlceID"].Value = ilceID;

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

            result += "<option value=''>Semt Seçiniz</option>";
            foreach (DataRow dataRow in dataTableSemt.Rows)
            {
                result += "<option value='" + dataRow["SemtId"].ToString() + "'>" + dataRow["Ad"].ToString() + "</option>";
            }
            return result;
        }
        catch (Exception e)
        {
            return (e.ToString());
        }
        finally
        {
            sqlConnection.Close();
        }
    }
}

Projeyi buradan indirebilirsiniz. Ajax_il_ilce_semt.zip (1,80 mb)

Bu arada veritabanı Gökhan http://gokhanbagci.blogcu.com/ dan alınmıştır. Kendisine teşekkür ediyoruz.

 

Aynı örneği bir sonra ki yazımızda json ile geliştireceğiz. Şimdilik hoşçakalın.

Kolay Gelsin

Turgay Sahtiyan