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

GridView Seçilen veya Tıklanan Hücrenin Bilgilerini jQuery ile Okuma

Gridview ile gösterilen kayıtlar üzerinde bazı durumlarda kullanıcının hangi hücreye tıkladığı veya hangi hücreyi seçtiğini öğrenmemiz gerekebilir, şimdiye kadar yaptığımız örneklerde gridview üzerinde seçilen veya tıklanan kayıtlarla alakalı işlemler yapıyorduk Bu linkte olduğu gibi. Şimdi hücreler üzerinde bu işlemleri nasıl yapacağız kodlarımız yazıp anlatmaya çalışalım Aslında çok karışık değil ilk olarak sayfamıza Jquery ekledik daha sonra grdbilgiler gridview’i içinde tıklanan hücredeki bilgileri alabilmek için aşağıdaki kodları yazdık burada click fonksiyonu ile tıklanan hürenin bilgilerialınarak bu hücrede td etilketi içindeki bilgi […]

Asp.Net JQuery Haber Bandı

Asp.Net ile JQuery Haber Bandı uygulaması yapacağız http://www.jquerynewsticker.com adresindeki uygulamayı web sitemize nasıl uygulayacağız dinamik veri tabanından haberleri JQuery Haber Bandı uygulamasını sitemize uygulayacağız. İlk olarak http://www.jquerynewsticker.com adresinden gerekli olan dosyaları indirip projemize dahil ediyoruz. Şimdi tasarım bölümüne geçip bir Repeater ekliyoruz ve görüntülenecek haberleri listeleyecek komutlarını ekliyoruz… Sayfa tasarımını oluşturduk şimdi veritabanı bağlantısını yaparak JQuery Haber Bandı uygulamasını tamamlıyoruz. Asp.Net JQuery Haber Bandı İndir

Asp.net Jquery ile Dropdownlist Seçilen Değeri Okuma

Dropdownlist ile listelenen elemanlardan seçilenin değerini Jquery ile okuyabiliriz. İlk olarak formumuza bir DropDownlist ve textbox ekliyoruz daha sonra sayfamıza Jquery ekliyoruz şimdi ise DropDownList’de değişiklik olup olmadığını kontrol edip eğer seçim değişirse değerini textbox’a atayıp ekranda gösteriyoruz. kodlarımızın tamamı….

Asp.Net JQuery Kullanarak GridView’e Kaydırma Çubuğu Scrollbar Ekleme

GridView ile listelenen kayıt veya bilgilerin tümünü sayfalama yapmadan aynı ekranda göstermeye çalışırsanız kayıt sayınız fazla ise sayfa aşağıya doğru uzayacaktır, bu problemi nasıl çözeceğiz diyorsanız http://gridviewscroll.aspcity.idv.tw/ adresinde sorunun çözümü var bu çözümün kullanımı için aşağıdaki işlemleri yapmanız gerekli uygulamanın çalışan halini konu sonundan indirebilirsiniz, 1-Buradan gerekli olan dosyalarımızı indiyoruz, klasörün içinden çıkan gridviewScroll.min.js dosyasını projemize js isimli bir klasör oluşturup içine atıyoruz. 2- etiketinden önce aşağıdaki satırları yazıyoruz. 3-Gridview içinde kullanacağımız stil komutlarını yazıyoruz 4-Bilgileri görüntüleyeceğimiz Gridview nesnesini oluşturuyoruz. […]

Asp.Net Dijital Saat Uygulaması

Hazırladığınız sayfalarda o anki saati , saniyeyi göstermeniz gerekebilir bu gibi durumlarda javascript ile işinizi halledebilirsiniz ama asp.net ve Ajax kullanarak bu uygulamayı daha kolay bir şekilde yapabiliriz.. Uygulama için form üzerine ScriptManager ekliyoruz, daha sonra saat sürekli güncelleneceği için bir UpdatePanel ve bu panelin içine güncellenecek olan timer ve label nesnelerini ekliyoruz. saatin dijital gözükmesi için yazı fontu ve rengini label nesnesinden değiştirmiştim sizde isteğinize uygun olanı seçebilirsiniz.. Eklemeleri yaptıktan sonra Page_Load olayına label nesnesi içinde saatin görüntüleneceğini söylüyoruz […]

Asp.Net ile Form Üzerindeki Nesneleri Belli Bir Süre Sonra Gizleme

Kullanıcıya yapılan bir işlem sonrası hata veya bilgilendirme amaçlı olarak verdiğiniz mesajların belli bir süre sonra kaybolmasını sağlayabilirsiniz. Bunun için JQuery kullanarak gizlenecek olan nesnenin id’sini kullanacağız. İlk olarak form üzerine bire textbox bir buton ve label nesnesi ekleyelim Daha sonra Gonder isimli Butonun Click olayına yazıyoruz butona tıklandıktan sonra gizlenme olayını sağlaması için form sayfamıza dönüp yazıyoruz programı çalıştırdığımız zaman text kutusuna bilgileri yazıp gönder tuşuna basıyoruz ve sonuç olarak ekranda Bilgileriniz Kaydedildi…. mesajı çıkıyor ve 5 saniye sonra […]

Asp.Net Sayfadaki İlk Metin Kutusuna (TextBox) Odaklanma (Focus)

Asp.net ile hazırlamış olduğunuz sayfalarda kullanıcılar sayfayı ziyaret ettiklerinde form içerindeki ilk textbox’a otomatik olarak kursörün konumlanmasını isteyebilirsiniz bunu jQuery kullanarak focus metedu yardımıyla yapacağız. İlk textbox’a odaklanmayı sağlayan kodumuz “$(‘ form input:text:enabled:first ‘).focus();” form içerinde kullanım ve uygulamanın çalışan hali

Asp.net TextBox’ın Tümünü Seçili Yapıp – Kopyalama

Genelde sitelerde ve tabi benim sitemde de kullandığım SyntaxHighlighter gibi eklentilerde metin kutusu içindeki içeriğinin tümünü tek bir butona veya linke tıklayarak seçili hale getirip kopyalayabiliyoruz. Şimdi bunu asp.net sayfalarımızda nasıl uygulayacağız yani bir textbox’ın tümünü seçili hale getirip nasıl kopyalayacağız hemen bir uygulama ile açıklayalım. bu işlem için http://bradleysepos.com/projects/jquery/clipboard/ adresinden jquery.clipboard.js dosyasını indirip jquery-1.10.2.min.js ile beraber js klasörümüze kopyalıyoruz.. form tasarımında iki tane textbox ekliyoruz birine içerik olarak bişeyler ekliyoruz ne olduğu önemli değil bu kopyalanacak olan yazı, diğeri […]

Asp.net Enter ile TextBoxlar Arası Geçiş

Asp.net ile hazırlanan bir form içindeki bilgileri kullanıcı doldururken bilgi girişi yapılan textbox’da Enter’a basıldığında diğer textbox’a geçilme işlemini yapacağız ilk olarak kullanıcının bilgi girişi için bir form oluşturuyoruz. Daha sonra script kodlarımızı yazmaya başlıyoruz, ilk olarak ilk textbox’a focuslama işlemini yapıyoruz $(‘input:text:first’).focus(); daha sonra klavyeden enter tuşuna basılıp basılmadığını kontrol ediyoruz eğer Enter tuşuna basıldıysa index numarasını bir arttırıp focusluyoruz.. var key = (e.keyCode ? e.keyCode : e.charCode); if (key == 13) { e.preventDefault(); var sonrakitext = $(‘input:text’).index(this) + […]

Asp.Net jQuery TextBox’a Tıklanınca Kaybolan Yazı

TextBoxların içine kullanıcılara girecekleri bilgi ile alakalı olarak bir ön bilgi vermek için texbox’a tıklanınca veya bilgi girişi yapılınca kaybolan yazı eklenir bu işi asp.net ile geliştirdiğimiz uygulamalarda nasıl kullanacağımız hemen kısa bir örnekle açıklayalım http://code.jquery.com/jquery-1.10.2.min.js dosyasını indirip js klasörüne kopyalıyoruz. Textbox’a tıklanınca removeClass ile içindeki stil bilgisini kaldırıp, val(“”) komutu ile içine boş değer atıyoruz kodlarımız ve uygulamanın çalışan hali..: