xml etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
xml 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>

23 Ocak 2012 Pazartesi

Javascript ile xml okuma

Basit bir şekilde xml dökümanından javascript yardımı ile verileri nasıl alacağımızı göstereceğim. Öncelikle XMLFile.xml adında örnek bir xml dökümanı oluşturalım.


<?xml version="1.0" encoding="utf-8" ?>
<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>

Daha sonra açıklamalarını içerisine yazdığım gibi örnek bir htm dosyası oluşturalım. İki dosyayı aynı kılasöre koyup htm dosyasını tarayıcımızda açtığımızda, xml dosyamızın içerisindeki verilerin mesaj penceresi şeklinde teker teker ekrana geldiğini göreceğiz.


<!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>content</title>
    <script type="text/javascript">

        function GetXml() {

            if (window.XMLHttpRequest) {
                //yeni tarayıcılarda xml dosyasını bu şekilde import edebiliriz
                var httpObj = new XMLHttpRequest();
            } else {
                //internet explorer'ın bazı eski sürümlerine destek verebilmek için bu şekilde
                var httpObj = new ActiveXObject("Microsoft.XMLHTTP");
            }
            //xml dosyamızın adı.
            httpObj.open("GET", "XMLFile.xml", false);
            httpObj.send();

            var xmlDocument = httpObj.responseXML;
            //xml dosyamızın içinde hani verileri okumak istiyorsak onun ismini veriyoruz "book"
            var xmlEl = xmlDocument.getElementsByTagName("book");

            //kaç tane "book" nesnesi varsa
            for (i = 0; i < xmlEl.length; i++) {

                //sırası gelen "book" nesnesinin alt verilerinde gezinmek için
                for (j = 0; j < xmlEl[i].childNodes.length; j++) {

                    if (xmlEl[i].childNodes[j].nodeType != 1) {
                        continue;
                    }
                    //ekranda popup olarak yazdır
                    alert(xmlEl[i].childNodes[j].firstChild.nodeValue);
                }

            }
        }
   

    </script>
</head>
<body onload="GetXml()">
</body>
</html>