ASP.net ‘jQuery Örnekleri’ Örnek ve Uygulamaları

GridViewde Ajax İle Arama Yapma ve Aranan İfadeyi Gösterme

Gridview içerinde kayıtları görüntüledikten sonra bu kayıtlar arasında belli bir alana göre örnek olarak isim alanına göre arama işlemini nasıl yapacağız İsmi Ali olanlar yada isiminde a harfi geçenler gibi şimdi bu konu ile ilgili bir uygulama yapalım. Arama işlemi esnasında sayfayı yenilemeden sonuçları gösterebilmek için Ajax’ın nimetlerinden faydalanacağız. Projenin çalışan halini konu sonundan indirebilirsiniz… Sayfa tasarımını yapalım ilk olarak sayfamızda neler olacak kayıtları görüntülemek için GridView, Ajax kullanacağımız için ScriptManager, sayfayı yenilemeden güncelleyeceğimiz için UpdatePanel ekliyoruz gridview nesnesini UpdatePanel […]

GridView Seçilen Satırın Detaylarını Twitter Bootstrap Kullanarak Modal Popup ile Gösterme

Asp.net GridView Seçili Satır Bilgileri Alma işleminden bahsetmiştik şimdi olayı biraz daha değiştirip,güzelleştirip detaylarını öğrenmek istediğiniz bir kayda tıklayınca Twitter Bootstrap ile cilalayıp Modal Popup ile açılır pencere şeklinde göstereceğiz. İyi dedin güzel bir şey galiba ama son cümleden birşey anlamadım diyorsanız hemen uygulamamıza geçelim. Konu sonunda çalışan uygulamayı indirebilirsiniz… İlk olarak buradan Bootstrap dosyalarımız indiriyoruz. daha sonra projemize css, ve js isimli iki klasör ekleyip css içine bootstrap.css dosyamızı js klasörü içine bootstrap.js dosyamızı ekleyip aşağıdaki kodları yazıyoruz Sayfa […]

Asp.Net jQuery Accordion İçerik Uygulaması

Asp.net ile jQuery Accordion uygulamasını yapacağız. Uygulamamızda bilgileri veri tabanından okuyup jQuery Accordion ile ekranda görüntüleyeceğiz ilk olarak aşağıdaki özelliklerde bir veri tabanı oluşturup App_Data klasörü içine atıyoruz Şimdi sayfamıza içeriği görüntülemek için bir Repeater ekliyoruz jQuery Accordion stil ve Javascript dosyalarını da http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js , http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js , http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css ekleyerek projemize dahil ediyoruz.. Repeater içeriğini doldurmak için veri tabanı bağlantısı ve sorgu için kullanacağımız kodlar kodlarımızın çalışabilmesi için using System.Data; using System.Data.OleDb; namespacelerini ekliyoruz ve sonuç

GridView Üzerine Gelinen (MouseOver) Satırın Rengini Değiştirme

GridView ile listelenen kayıtlardan fare ile üzerine geldiğimiz satırların rengini değiştirmek kullanıcılara veya ziyaretçileri ilgili satırı okuma açısından kolaylık sağlayabilir. Peki GridView Üzerine Gelinen (MouseOver) Satırın Rengini Değiştirme işlemini nasıl yapacağız diyorsanız hemen basit bir örnek yapalım. İlk olarak sayfamıza bir GridView ekliyoruz daha sonra kodlarını ekleyerek farenin satır üzerine geldiği zaman eklenecek veya siline cek olan stil sınıfı belirliyoruz örneğimizde “degisen_satir” ismini kullandık hemen ilgili stil kodlarımızı da verelim örneğimizi çalıştırdığımızda fare ile herhangi bir satırın üzerine geldiğimizde o […]

Asp.Net Gridview Tıklanan Satırı Renklendirme

Bir önceki örneğimizde Asp.Net Gridview Seçili Satırı Renklendirme işleminden bahsetmiştik burada seçme işlemini kullanabilmek için Gridview içine Seçim için < asp:ButtonField Text = "Seç" CommandName = "Select" /> eklemiştik, şimdi ise seçme işlemi için JQuery ve JavaScript kullanacağız Gridview üzerinde tıklanan bir satırı seçili hale getirmek veya renklendirmek için ilk olarak bir Gridview ekliyoruz Gridview de tıklanan satırın rengini değiştirmek için kullanacağımız javascript kodları Tıklanan gridview’in değişecek olan rengini belirlemek için kullanacağımız style kodlarımız Son olarak da gridview içini veritabanı […]

Asp.net Jquery Slider – Manşet Haber Sistemi Yapımı

Asp.net ile Jquery Slider veya haber sitelerinde gördüğümüz manşet haber sistemi yapacağız. Sistemde kullanacağımız Jquery Slider örneği burada biz bu sistemi asp.net’e uygulayacağız dosyaları buradan Uygulamanın çalışan halini konu sonundan indirebilirsiniz.. Sistemi oluşturabilmek için iki sayfa hazırlayacağız birincisi haber ve resimleri yükleyeceğimiz, ikincisi de Jquery Slider veya Manşet Haber Sisteminin görüntüleneceği sayfa. Şimdi hemen haber ve resimleri yükleme için gerekli olan sayfayı hazırlayalım. Haber bilgilerini kaydedebilmek için aşağıdaki yapıya uygun bir veritabanı oluşturuyoruz. oluşturduğumuz veritabanını App_Data klasörü içerisine ekliyoruz ve […]

Asp.Net GridView’den GridView’e Satır Sürükle Bırak JQuery

GridView ile gösterilen kayıtlardan istediklerinizi başka bir GridView içerisine sürükle bırak yöntemiyle nasıl taşınır anlatmaya başlayalım. Örneğimizde Personel bilgilerini gösteren bir gridview var bu gridview’den isimleri bize gelenleri başka bir gridview içine alabilmek için sürükle bırak metodunu kullanacağız. Form üzerine iki gridview ekliyoruz bu gridviewlerin IDlerini gvkaynak ve gvhedef, CssClass özelliklerini surukle olarak ayarlıyoruz ve sürükle bırak işlemini yapacak olan Jquery kodlarımız ekliyoruz… Gridview içini doldurabilmek için gerekli kodlarımız siz kendi veritabanı ve tablolarınıza göre sorgu ve bağlantı cümlelerini değiştirin […]

Asp.net JQuery lightbox ile Resim Galerisi SlideShow Yapımı

Bu dersimizde lightbox kullanarak basit bir resim galerisi yapacağız, Oluşturacağımız galeri ile görüntülenen resimlerden birine tıkladığında lightbox devreye girecek ve resimler slideshow şeklinde değişecek. Uygulamanın çalışan halini konu sonundan indirebilirsiniz… İlk olarak yüklenen resimleri saklayabilmek için bir veritabanı oluşturuyoruz. Uygulamamızda resim yükleme ve resimleri görüntüleme işlemi için aşağıdaki form görüntüsünü oluşturuyoruz Resim yükleme ve yüklenen resimleri listeleme için gerekli olan kodlarımızın çalışabilmesi için using System.Data; using System.Data.OleDb; using System.IO; namespacelerini eklemeniz gerekiyor SlideShow başlaması için yüklenen resimlerden birine tıklanması gerekiyor.. […]

Asp.Net TextBox’a Sadece Sayı Girme

Bazı durumlarda kullanıcıların form’a eklediğiniz text kutularına sadece sayı girişi yapmasını isteyebilirsiniz. bunun için aşağıdaki örneği inceleyebilirsiniz.. örnekte form üzerine eklenen TextBox’ın id değerini script içerisinde yazarak istediğiniz textbox kontrolüne sadece sayı girişini sağlayabilirsiniz..

Asp.Net GridView jQuery İle Satır(Kayıt) Ayrıntılarını Gösterme

Asp.net GridView kontrolü ile görüntülenen kayıtların ayrıntılarını veya o kayıtla alakalı bir açıklamayı fare üzerine geldiğinde görüntülemek için bir uygulama yapacağız. GridView uygulamamızda kullanacağımız jQuery dosyasını ilk olarak buradan indiriyoruz ve projemizi kaydettiğimiz klasöre kopyalıyoruz Kaynak kodlarımız… tasarım için Uygulamada ben kullandığım veritabanına uygun olan alanları seçip ona göre değerler girdim sizde kullandığınız veritabanı ve tabloya uygun alanlara göre kodları düzenleyebilirsiniz.