jquery etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
jquery etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

22 Mart 2012 Perşembe

Ajax(Jquery) işlemleri

Default.aspx


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="ajaxApp._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>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        function CallAspxPage() {
            $.ajax({
                type: 'GET',
                url: 'Ajax1.aspx',
                success: function (result) {
                    $('#sonuc').html(result);
                },
                error: function () {
                    alert('Talep esnasında sorun oluştu. Yeniden deneyin');
                }
            });
        }

        //aspx sayfasına querystring ile parametre verme
        function CallAspxPageWithQueryString() {
            $.ajax({
                type: 'GET',
                url: 'Ajax1.aspx',
                data: "name=recep&surname=günay",
                success: function (result) {
                    $('#sonuc').html(result);
                },
                error: function () {
                    alert('Talep esnasında sorun oluştu. Yeniden deneyin');
                }
            });
        }

        // xml formatında web servis çağırma
        function CallWebserviceXML() {

            $.ajax({
                type: 'POST',
                url: 'http://localhost:2529/webservice1.asmx/GetAllCustomers',
                data: 'start=c&kactane=2',
                success: function (result) {

                    $(result).find('myCustomers').each(function () {

                        $("#sonuc").append($(this).find('name').text() + " / " + $(this).find('adress').text() + "<br/>");

                    });
                },
                error: function () {
                    alert('Talep esnasında sorun oluştu. Yeniden deneyin');
                }
            });
        }

        //json formatında webservis çağırma
        function CallWebserviceJson() {

            $.ajax({
                type: 'POST',
                url: 'http://localhost:2529/webservice1.asmx/GetAllCustomers',
                data: '{ "start":"c","kactane":"4" }',
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                success: function (result) {
                    $.each(result.d, function (i) {
                        $("#sonuc").append(this.name + " / " + this.adress + "<br/>");
                    });
                },
                error: function () {
                    alert('Talep esnasında sorun oluştu. Yeniden deneyin');
                }
            });
        }

        //Bir aspx sayfasındaki methodu çağırmak, methodun başına  [System.Web.Services.WebMethod] koymayı unutma
        function CallPageMethod() {
            $.ajax({
                type: 'POST',
                url: 'Default.aspx/jQueryPageMethod',
                data: '{ "name":"Recep" }',
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                success: function (result) {
                    $('#sonuc').html(result.d);
                },
                error: function () {
                    alert('Talep esnasında sorun oluştu. Yeniden deneyin');
                }
            });
        }
      
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="text" id="text1" />
        <input type="button" value="Seç" onclick="CallWebserviceJson();" /><br />
        <span id="sonuc"></span>
    </div>
    </form>
</body>
</html>


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace ajaxApp
{
    public partial class _default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        [System.Web.Services.WebMethod]
        public static string jQueryPageMethod(string name)
        {
            return "<h3>jQuery - PageMethod Talebi</h3>Merhaba " + name;
        }
    }
}



/---------------------------------------------------------------------/
webservice1.asmx

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

namespace ajaxApp
{
    /// <summary>
    /// Summary description for WebService1
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
    [System.Web.Script.Services.ScriptService]
    public class WebService1 : System.Web.Services.WebService
    {

        [WebMethod]
        public List<myCustomers> GetAllCustomers(string start, string kactane)
        {
            int i=Convert.ToInt32(kactane);

            DB context = new DB();
            List<Customer> customerList = new List<Customer>();
            customerList = context.Customers.Where(p => p.CompanyName.StartsWith(start)).Take(i).ToList();

            List<myCustomers> newList = new List<myCustomers>();

            foreach (var item in customerList)
            {
                newList.Add(new myCustomers() { name = item.CompanyName, adress = item.Address });
            }


            return newList;
        }
    }


}

 /---------------------------------------------------------------/
myCustomer.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace ajaxApp
{
    public class myCustomers
    {
        public string name { get; set; }
        public string adress { get; set; }
    }
}
 /-------------------------------------------------------------------------/

Ajax1.aspx

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace ajaxApp
{
    public partial class Ajax1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

            if (!Page.IsPostBack)
            {
                lblNameSurname.Text = Request.QueryString["name"] + " " + Request.QueryString["surname"];
            }

        }
    }
}







24 Ocak 2012 Salı

JQuery ile xml okuma

Bu yazıda Jquery ile xml uzantılı bir dökümandan nasıl data çekeceğimizi göreceğiz. Bunun için öncelikle XMLFile.xml adında örnek bir xml dosyası oluşturalım:
<?xml version="1.0" encoding="utf-8" ?>
<library>
    <books>
        <book>
            <name>Issız Ev</name>
            <writer>Orhan Pamuk</writer>
        </book>

        <book>
            <name>Ama Hangi Atatürk</name>
            <writer>Taha Akyol</writer>
        </book>
    </books>

    <staffs>
        <staff>
            <name>Recep</name>
            <surname>Günay</surname>
        </staff>
       
        <staff>
            <name>Yusuf</name>
            <surname>Uzun</surname>
        </staff>

        <staff>
            <name>Adem</name>
            <surname>Giyici</surname>
        </staff>
       
    </staffs>

</library>

Görüldüğü gibi “library” altında “books” ve “staffs” olmak üzere iki alt veri başlığımız var. Bu verilerin içinde de yine ilgili altbaşlıklar ve onların verisi var. Örneğin, kütüphane altında kitaplar bölümünde 2 tane kitabımız var. Bu kitaplarında her birinin adı ve yazarı eklenmiş.
Xml dosyamız hazırlandıktan sonra htm dosyamızı hazırlayalım.
<!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>
    <title></title>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        $.ajax({
            type: "GET",
            url: "XMLFile.xml",
            dataType: "xml",
            success: readData
        });

      
        function readData(data) {

            $(data).find('book').each(function () {

                alert($(this).find('name').text());
                alert($(this).find('writer').text());

            });
        }

    </script>
</head>
<body>

<div id="content"></div>

</body>
</html>

Head kısmında indirmiş olduğum javascript kütüphanesinin(jquery) yolunu verdim;    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>.




Daha sonra xml dosyamızı alabilmemiz için server’a göndereceğimiz request için;

        $.ajax({
            type: "GET",// request’in tipini yazıyoruz GET/POST

            url: "XMLFile.xml",//Xml dosyamızın bulunduğu yolu veriyoruz. Buraya direk url de verebiliriz. Örneğin; www.deneme.com/myXMLFile.xml

            dataType: "xml",//Buraya alınacak data tipini yazıyoruz. Xml çektiğimiz için xml yazdık. Json tipinde bir data çekseydin JSON yazacaktık

            success: readData//Buraya yükleme başarılı sonuçlandığında çalışacak fonksiyonun adını yazıyoruz.
        });



Xml dosyamız başarıyla yüklendiğinde readData fonksiyonunu tetikletiriz.
      

 function readData(data) {

            $(data).find('book').each(function () {

                alert($(this).find('name').text());
                alert($(this).find('writer').text());

            });
        }


Fonksiyona parametre olarak data gönderdim, siz buraya herhangibir değişken ismi yazabilirsiniz. Daha sonra “book” isimli dataları find methoduyla bulup her birinin altbaşlıklarının datalarını ekrana alert ile yazdırıyoruz. Örneğin book değilde “staff” ları getirmek isteseydik;

        function readData(data) {

            $(data).find('staff').each(function () {

                alert($(this).find('name').text());
                alert($(this).find('surname').text());

            });
        }


Güzel, istediğimiz veriyi artık xml’den çekip alabiliyoruz. Şimdi bunu ufak bir uygulamaya dönüştürelim. Örneğin, xml dosyasından “book” verilerini alıp, htm sayfamızda bir tablo ( <table> ) içinde ekrana yazdıralım. Bunun için basit bir jquery selector’ü kullandım. Oluştumak istediğim tablonun html’ini bir değişkenin içine ekledim, daha sonra bu değişkenimin değerini <body></body> içine daha önce eklediğim <div id="content"></div> divinin içine attım. Bu atma işlemini $("#content").html(str); bu şekilde yapıyoruz. Örnek htm dosyası aşağıdaki gibidir;


<!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>
    <title></title>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        $.ajax({
            type: "GET",
            url: "XMLFile.xml",
            dataType: "xml",
            success: readData
        });

        var str = "<table border=\"1\" cellpadding=\"3\">";
        function readData(data) {

            $(data).find('book').each(function () {

                str += "<tr><td>" + $(this).find('name').text() + "</td><td>" + $(this).find('writer').text() + "</td></tr>";

            });

            str += "</table>";

            $("#content").html(str);

        }

    </script>
</head>
<body>

<div id="content"></div>


</body>
</html>