Recent comments

None


İç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-2013
Takvim
<<  Ekim 2017  >>
PaSaÇaPeCuCuPa
2526272829301
2345678
9101112131415
16171819202122
23242526272829
303112345
Keywords

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

Not : Blog haricinde, faydali gördügüm yazilari ve linkleri twitter adresimden paylasiyorum. Beni twitter'da takip etmek için : twitter.com/turgaysahtiyan


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

Not : Blog haricinde, faydali gördügüm yazilari ve linkleri twitter adresimden paylasiyorum. Beni twitter'da takip etmek için : twitter.com/turgaysahtiyan


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

Not : Blog haricinde, faydali gördügüm yazilari ve linkleri twitter adresimden paylasiyorum. Beni twitter'da takip etmek için : twitter.com/turgaysahtiyan


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

Not : Blog haricinde, faydali gördügüm yazilari ve linkleri twitter adresimden paylasiyorum. Beni twitter'da takip etmek için : twitter.com/turgaysahtiyan


turgay , 9. Haziran 2009, 12:15

Merhaba Arkadaşlar,

Bu yazımda JQuery ile ajax işlemlerini anlatacağım.

Ajax bildiğiniz üzere artık bir web sayfasının olmazsa olmazları arasında. JQuery ile de ajax işlemlerini ek bir kütüphane kullanmadan çok rahat bir şekilde yapabilmekteyiz.

Anlatımı 3 başlık altında yapacağım. Bunlar

  • Ajax istekleri (Ajax Request)
  • Ajax Olayları (Ajax Events)
  • Ajax Yardımcıları (misc.)

Ajax İstekleri

jquery.ajax(options)En temel ajax isteğidir. Bir örnekle gösterelim

 $.ajax({
   type: "POST", 
   url: "deneme.aspx", 
   data: "ad=Turgay&soyad=Sahtiyan",
   success: function(msg){
       alert( "Gelen bilgi" + msg );
   error:function(msg){
       alert("hata" + msg)
   }
 });
  • type = İsteğin şeklini belirler. POST veya GET değeri alabilir.
  • url = İstek yapılacak sayfanın url sidir.
  • data = Eğer sayfaya parametre göndereceksek burada belirtebiliriz.
  • success = İstek başarılı olduğunda çalışacak fonksiyondur.
  • error = İstek başarısız olduğunda çalışacak fonksiyondur.

load(url, [data], [callback]) – Url diye belirtilen sayfadan bilgileri çekip belirttiğimiz elemana atar.

Mesela linkler.aspx dosyasında ki bilgiyi linkler div ine yazmak için.

$("#linkler").load("linkler.aspx");

 

  • url = İsteğin yapılacağı sayfanın url sidir.
  • data = Eğer sayfaya parametre göndereceksek burada belirtebiliriz. Kullanılması zorunlu değildir.
  • callback = İstek tamamlandığında çalışacak fonksiyondur. Kullanılması zorunlu değildir.

jQuery.get( url, [data], [callback], [type] ) – İstenilen sayfayı HTTP Get isteği ile yükler.

Mesela üstte load ile yaptığımız işlemi get ile yapalım. Linkler.aspx sayfamızda ki linktip i sinema olanları alıp linkler id li div e yazıyoruz.

$.get("linkler.aspx",       
           { linkTip: "sinema" },       
           function(data){$(“#linkler”).html(data)}      
           );

 

  • url = İsteğin yapılacağı sayfanın url sidir.
  • data = Eğer sayfaya parametre göndereceksek burada belirtebiliriz. Kullanılması zorunlu değildir.
  • callback = İstek tamamlandığında çalışacak fonksiyondur. Elemana atamayı burda yapıyoruz. Kullanılması zorunlu değildir.
  • type = Dönen data nın tipini belirtmemize yarar. "xml", "html", "script", "json", "jsonp" veya "text" değerini alabilir.

jQuery.getJSON( url, [data], [callback] ) – HTTP Get metodu ile JSON Datası yüklemeye yarar. Parametre kullanımı aynıdır. JSON işlemlerine özel örnekler ileriki yazılarda detaylı anlatılacaktır.

jQuery.getScript( url, [callback] ) – Bir javascript dosyasını yükleyip çalıştırmaya yarar. Kullanımı şu şekildedir.

$.getScript("test.js");

jQuery.post( url, [data], [callback], [type] ) - İstenilen sayfayı HTTP Post isteği ile yükler. Kullanımı Get ile aynıdır.

Ajax Olayları

ajaxComplete( callback ) – Herhangi bir ajax isteği tamamlandığında çalışır. Mesela sayfamızda ki mesaj id li div e bir ajax isteği sonuçlandığında bilgi yazalım.

 $("#mesaj").ajaxComplete(function(event,request, settings){
   $(this).append("<li>İstek Tamamlandı</li>");
 });

ajaxError( callback ) - Herhangi bir ajax isteği hata verdiğinde çalışır. Kullanımı complete ile aynıdır.

ajaxSend( callback ) - Herhangi bir ajax isteği gönderilmeden hemen önce çalışır. Kullanımı complete ile aynıdır.

ajaxStart( callback ) - Herhangi bir ajax isteği başladığında çalışır. Kullanımı complete ile aynıdır.

ajaxStop( callback ) - Herhangi bir ajax isteği sonlandığında çalışır. Kullanımı complete ile aynıdır.

ajaxSuccess( callback ) - Herhangi bir ajax isteği başarılı olduğında çalışır. Kullanımı complete ile aynıdır.

Ajax Yardımcıları

jQuery.ajaxSetup( options ) – Ajax ayarlarını yapmamıza yarar. Sayfamızda kullandığımız ajax isteklerinin tamamında aynı bazı özellikleri kullanıyorsak bunları ajaxSetup ile bir kere yazabiliriz. Mesela bütün ajax isteklerimizde type özelliğini POST, dataType özelliğinide json kullanıyoruz. Bu durumda bunları her ajax isteğimizde yazmaktansa ajaxSetup ile belirleyebiliriz. Kodlarımızda azalmış olur:)

Kullanımı

$.ajaxSetup({
  type: "POST",
  dataType: "json"
});

serialize( ) – input elemanlarını parametre olarak kullanabilmek için serialize etmeye yarar. Örneğin form1 id li form umuzun içinde ad,soyad ve yas id li txt boxlar olsun. Ve bunlara da turgay,sahtiyan,29 bilgileri girilmiş olsun. Bu durumda aşağıda ki kodu yazdığımızda

$("#form1").serialize();

 

sonuç olarak şu bilgiyi alabiliriz.

ad=Turgay&soyad=Sahtiyan&yas=29

Ne kadar kolay ve hızlı değil mi:)

serializeArray( ) – Serialize ile aynı işi yapar. Tek farkı json data döndürmesidir.

JQuery ile ajax işlemleri bu şekilde. İleriki yazılarımda bolca örnek yapacağım. O zaman daha iyi anlatabileceğime eminim:)

Daha fazla bilgiye JQuery sayfasından erişebilirsiniz.

Kolay Gelsin

Turgay Sahtiyan

Not : Blog haricinde, faydali gördügüm yazilari ve linkleri twitter adresimden paylasiyorum. Beni twitter'da takip etmek için : twitter.com/turgaysahtiyan