Uygulamalı Modern Web Geliştirme Eğitimi Yayında !!

Uygulamalı Modern Web Geliştirme Eğitimi - Kadir Murat Başeren - Udemy

Eğitime hızlıca en güncel kupon kodu ile kayıt olmak için Udemy Eğitimlerim sayfasına bakabilirsiniz. (Açılış’a özel kupon kodunuz : MODERNWEB)

Bu eğitimde sıfırdan başlayarak uygulamalı olarak, özenle ve sizi hedefinize en kısa sürede hazırlayacak şekilde konuları oluşturulmuş bir web geliştiricisi olabilirsiniz. 59 saatlik içerik sizleri bekliyor. Eğitim, güncel yazılım geliştirme araçları kullanılarak hazırlanmıştır..

Eğitimde, Microsoft’un cross-platform(windows, linux, mac) geliştirme aracı olan Visual Studio Code ve Visual Studio kullanılmıştır. Visual Studio Code ile temel web programlama bilgisi olmayan ve web geliştiricisi olmak isteyen ya da eksiklerini kapatarak kendini daha ileri seviyeye taşımak isteyenlere yönelik olarak eğitim hazırlanmıştır.

Visual Studio Code ile en hızlı şekilde her bilgisayar da yazılım geliştirmenin keyfini çıkararak, Visual Studio Code ‘u kullanmayı ve web projesi geliştirmeyi öğrenebilirsiniz.

Visual Studio Code ile Front-End tarafında gereken geliştirmeleri tamamladıktan sonra Back-End tarafında Visual Studio ve MS SQL Server ve C# yazılım dilini öğrenerek, web geliştiricisi olma yolunda daha üst bir seviyeye ulaşabilirsiniz.

Eğitim de bilgi seviyenize göre herhangi bir aşamasından devam edebilirsiniz.

  • Front-End gelişitiricisi olarak adlandırılan, web projelerinin arayüz dediğimiz sayfa tasarımları konusunda kendinizi geliştirmek için HTML-HTML5, CSS-CSS3, JS-JQuery, Bootstrap 4 kısımlarına,
  • Back -End geliştiricisi olarak adlandırılan; web projelerinin sunucu tarafında çalışan veritabanı işlemleri ve iş süreçlerini işleten C#, T-SQL ve ASP NET MVC kısımlarına,
  • Full-Stack olarak adlandırılan, hem Front-End hem Back-End geliştiricisi olarak kendinizi geliştirmek istiyorsanız eğitimdeki tüm bölümlere ağırlık vererek doğrudan ilgili konudan eğitimi işletebilirsiniz.

Sırası ile izlemenizi öneririm.

modern-web-tanitim-1

Eğitim de, bir E-Ticaret sitesi örneği Bootstrap 4 ile tasarlanarak SQL Server’da veritabanının oluşturulması ve ASPNET MVC kodları yazılarak Publish(yayınlama) edilmesi kadar uçtan uca ele alınmıştır.

Eğitim üç farklı IDE(Geliştirme aracını) içermektedir. Front-End tarafında Visual Studio Code ile tüm konular işlenmiş, Back-End tarafında Visual Studio ve veritabanı yönetimi tarafında Microsoft SQL Server Management Studio‘nun güncel versiyonları kullanılmıştır.

Eğitim boyunca amaç ve uygulama olarak, çeşitli tasarım örnekleri ile beraber bir E-Ticaret site tasarımı mobil cihaz uyumlu(responsive) olarak Bootstrap 4 ile tasarlanmış ve Back-End kısmında bu tasarım kullanılarak ve veritabanı yapısı SQL üzerinde oluşturularak, gerekli C# kodlaması yapılarak uygulama örneği oluşturulmuştur.

Projenizin ve veri tabanınızın yayınlanması noktasına kadar anlatılarak, kendi web uygulamanızı, kurumsal sitenizi, blog sitenizi, e-ticaret sitenizi ya da farklı bir alanda faaliyet gösteren projenizi geliştirerek hayata geçirebilirsiniz..

Azure Mobile Services Webineri Haziran

Azure Mobile Services Webineri Haziran

Azure Mobile Services Webineri Haziran.

DevFest <Women />

devfest-women

 

2 Mart Pazar Bahçeşehir Üniversitesi’nin Beşiktaş Kampüsü’nde DevFest Women adıyla bir kadınlar için development festivali düzenleniyor. Sebebi kadınlar gününe denk gelmesinden dolayı. Etkinlik teknoloji ile yazılım sektörlerinde bulunan kadınları bir araya getiriyor.

devfest_women_istanbul

Etkinlik programı için tıklayınız.

DevFest’te bazı konular ise şöyle: Android,Google Plus, JavaScript, kullanıcı deneyimi, PostgreSQL,Google AppEngine , Google Trends, Linux, Mobil bankacılık ve girişimcilik.
”Programlama Çocuk Oyuncağı” isimli etkinlik ile çocuklara yönelik bir oturumda ve standları da bulunan etkinlik ilgi çekici görünüyor.

Kayıt olmak için tıklayınız..

Scott Hanselman ile VS2013 Yenilikleri

İngilizceniz olsa da olmasa da, rahatça anlayabileceğiniz şekilde Scott Hanselman tarafından hazırlanmış bu kısa videoları izlemenizi öneririm. Blog yazısı yazmak yerine bu şekilde kısa kısa videolar ile yenilikleri anlatmış, gerçekten harika özellikler bizleri bekliyor.

Videolar;

SCREENCASTS: Whats New in Visual Studio 2013 – learn over lunch! – Scott Hanselman.

NodeJS – Arda Basoglu

Node – Arda Basoglu. Sunumu..

Mobilist–21 Nisan 2013

mobilist21 Nisan Pazar Günü Bahçeşehir Üniversitesi’nin Beşiktaş’ta bulunan kampüsünde gerçekleşecek olan konferansta derinlemesine bir şekilde mobil dünya ele alınacak.  Konferansta iOS ve Android gibi mobil platformların yanında uygulama marketleri için SEO, hibrit uygulama geliştirme gibi konularında da yer alıyor. JavaSript tabanlı mobil uygulama geliştirme, iOS ve Mac uygulamaları geliştirme, Android platformu anlatılacak. Katılımın ücretsiz, 400 kişilik kontenjan bulunuyor. Ben bu yazıyı yazdığımda etkinlik kaydımıda gerçekleştirdim. Sadece 180 kayıt kaldığını belirtmek isterim. Etkinliğe kaydınızı buradan yapabilirsiniz.

Etkinlik öncesi gününde ana sponsor Hipo tarafından düzenlenecek organizasyona da davetli olacaksınız. 20 Nisan Cumartesi Beyoğlu/Yuri Gagarin ‘de 20:00 ‘da.

Etkinlik programı;

09.30: Açılış Konusması (Emir Karşıyakalı, Murat Can Demir)
09.45: Windows Phone 8 – Oyun Geliştirme (Engin Polat)
10.25: Azure Mobile Services (Daron Yöndem)
11.05: Hızlı iOS ve Mac uygulama geliştirme (Sarp Erdağ)
11.45: iOS Uygulama Geliştirme (Taylan Pince)
12.25: Öğle Arası
13.30: iOS’ta Dosya Yönetim Sistemi ve iOS’a Online/Offline Dosya Aktarımı (Emrah Ayanoğlu)
14.10: Android 4.0 (Murat Aydın)
15.00: Paranoid Android (Murat Yener)
15.40: App Store Optimizasyon (Cumhur Onat)
16.30: JavaScript Mobil Uygulamalar (Altan Yılmaz)

Veysel Uğur KIZMAZ’ın Asp.Net 4.5 kitabı sizlerle!

Bu yazımızda sizlere, Veysel Uğur KIZMAZ’ın kurucusu olduğu 2011 yılında kurulmuş, yazılım ve bilişim kategorisinde IT sektöründe hizmet eden bir bilgi paylaşım sitesinden bahsedeceğim. Sitenin içeriği çok zengin olup sektöründeki neredeyse her alana ait bir başlık ve yazarı mevcut. Üstelik yazarlar, sektörde tecrübeye sahip insanlardan oluşmaktadır. Yazılım alanında bilgisini geliştirmek isteyen herkese tavsiye ederim.

www.yazilimdilleri.net

Veysel Uğur KIZMAZ Asp.Net 4.5

Site kurucusu; Veysel Uğur KIZMAZ’ın ASP.NET üzerine yazdığı kitabıda bulunmaktadır. .Net 4.5 ile gelen yenilikleri ve Asp.Net ile proje geliştirme konusunu detaylarıyla anlatan bu kitap; sadece ilgili teknoloji ile kodlamanın değil, bir web projesinin başlangıcından son noktasına kadar neler yapılması gerektiğini de anlatmaktadır. HepsiBurada, Kitapyurdu ve diğer online kitap satış sitelerinden kitaba ulaşabilirsiniz.

Asp.Net ile yazılım geliştirme (kodlama) konusunda son olarak projelerinizi zenginleştirmek için JavaScript ve jQuery kavramlarını örnek uygulama ve örneklerle öğrenebileceğiniz bir kitap’tır. 
"Yazılım geliştirmek, sadece kod yazmak demek değildir." Kitabın genelinde de bu konu üzerinde durulmuş ve Asp.Net ile yazılım geliştirme (kodlama) konularının ardından, "bir yazılım geliştirirken hangi aşamalardan geçilir, nelere dikkat edilmelidir, bir yazılımı geliştirirken planlama süreci nasıl olmalıdır, yazılım geliştirmede katmanlı mimari neden önemlidir ve yazılım geliştirme standartları" konuları, güncel hayattan örnekler ve uygulamalarla detaylı olarak anlatılmış.

Kitabında içindeki konu başlıkları;

  • ASP.NET Nedir?
  • .NET Framework Nedir?
  • .NET Bileşenleri
  • ASP.NET Çalışma Mantığı
  • İstemci Taraflı Kodlama
  • Sunucu Taraflı Kodlama
  • ASP.NET Versiyonları ve Yenilikleri
  • ASP.NET ile Yazılım Geliştirmeye Giriş
  • Visual Studio 2012’ye Genel Bakış
  • Visual Studio 2012 Çalışma Ortamı
  • Web Form Kavramı Ve Kullanımı
  • Web Form Özellikleri
  • Web Form İçerisine ASP.NET Kontrollerini Ekleme
  • ASP.NET’te C# ile Kodlama Yöntemleri
  • ASP.NET 4.5 ile C# 5.0 Kullanımı
  • C# Nedir ve Neden C# Kullanmalıyız?
  • C#’ın Kullanım Alanları
  • ASP.NET Formu Geliştirilirken Kullanılan Diller
  • Asp.Net Formlarında En Sık Kullanılan C# Örnekleri
  • C# 5.0 ile Gelen Yenilikler
  • ASP.NET Kontrolleri
  • Standart Kontroller Ve Kullanımları
  • Veri Kontrolleri
  • Veritabanından Veri Getirme
  • XML Dosyasından Veri Getirme
  • Entity Framework ile Veri Sorgulama
  • LINQ to SQL ile Veri Sorgulama
  • Nesnel Veri Kaynağı
  • Site Haritası Veri Kaynağı
  • Grafiksel Rapor Oluşturma
  • Verileri HTML Tasarımıyla Listeleme
  • Verileri Listeleme
  • Kayıt Detaylarını Görüntüleme
  • Verileri Listeleme ve İşlem Yapma
  • Verileri Sayfalayarak Görüntüleme
  • Verileri Kontroller ile Sorgulama
  • Verileri Html Şablonu ile Görüntüleme
  • Doğrulama Kontrolleri
  • Navigation Kontrolleri
  • Menü Oluşturma
  • Site Haritası Menüsü Oluşturma
  • Ağaç Menüsü
  • Kullanıcı Giriş Kontrolleri
  • Gelişmiş Sihirbaz Oluşturma
  • XML Dosyasını Görüntüleme
  • Web Part Kontrolleri
  • AJAX Kontrolleri
  • ASP.NET ile Durum Yönetimi
  • Sunucu Tabanlı Durumlar
  • İstemci Tabanlı Durumlar
  • Çerezler
  • ViewState
  • QueryString ile Sayfalara Veri Gönderme
  • LINQ ve Entity Framework
  • Temel LINQ Sorgulama İşlemleri
  • LINQ Metodları
  • LINQ ile SQL Server İşlemleri
  • Tasarım İşlemleri
  • Master Page Kavramı
  • ASP.NET ile CSS Kullanımı ve Style Sheet Dosyaları
  • Tema Tanımlama
  • Skin Tanımlama
  • JavaScript ve JQuery
  • JavaScript ile Kodlama
  • jQuery ile Kodlama
  • URL Rewrite
  • ASP.NET ile Proje Altyapısı Hazırlama
  • Yazılım Geliştirme Yaşam Döngüsü
  • Yazılım Geliştirme Standartları
  • Katmanlı Mimari
  • Kod Yazma Standartları
  • Değişken, Sınıf ve Metod Tanımlama Yöntemleri
  • Proje Tanımlama Yöntemleri
  • Web Projesini Yapılandırma ve İnternet Üzerinde Yayınlama
  • Proje Yapılandırması
  • Temel Kavramlar
  • ASP.NET Web Projesinin Yayınlanma Yöntemleri
  • ASP.NET 4.5 Yenilikleri
  • ASP.NET MVC 4
  • … ve Daha Fazlası

Kitap iç sayfalar için tıklayınız..

AJAX Drop Shadow Extender Server Control With JQuery

JQuery ile geliştirilmiş resim kullanılmadan gölge efekti veren bir plugin arıyordum. Sonrasında aşağıdaki adreste örneklerini göreceğiniz, geliştirilmiş plugin’i keşfettim. http://playground.marmaladeontoast.co.uk/jquery.shadow/ Çok başarılı bir plugin olduğunu itiraf etmeliyim. Resim kullanmadan HTML elementlere çeşitli gölge efektleri verebilirsiniz. Tabii ki kullanılan teknik CSS3 kullanıyor. Bu da her tarayıcı versiyonunda çalışmayacağını gösteriyor. Genelde son versiyonlarda çalışmaktadır. Öncelikle plugin’i bu adresten indirin. https://github.com/sydlawrence/jQuery-Shadow

Şimdi Visual Studio ile AJAX Toolkit’ten alışık olduğumuz extender kontrolleri gibi bir Drop-Shadow Extender kontrolü geliştireceğiz. Bunun için bir tane ASP.NET Server Control Projesi oluşturmalısınız. Bu şekilde AJAX Control Toolkit gibi bir Dynamic Link Library(DLL) geliştireceğiz ve Toolbox’a ekleyerek buradan kullanabileceğiz. Bu yapacağımız basit ve eğitimsel projeden sonra eminim ki bir çok ASP.NET Server Control oluşturacaksınız ve projelerinizde kullanacaksınız. Sözü fazla uzatmadan başlayalım.

Boş bir Solution açarak başlayalım.

image

Ardından Solution’a 2 proje ekleyeceğiz. Bunlardan biri “ASP.NET Server Control” projesi diğeri de “ASP.NET Web Application” projesidir. Neden ASP.NET AJAX Server Control veya ASP.NET AJAX Server Control Extender eklemediğimizi düşünebilirsiniz. Onlarıda ilerleyen makalelerimizde kullanacağız. Şimdilik en basit yoldan yani temelden gideceğiz. Hemen Server Control projemizi ve ardından Web Application projemizi ekliyoruz.

image

image

ASP.NET Web Application projemize yukarıdaki DropShadow plugin’imizi ve örnek resimler ekleyeceğiz.

image

Resimde gördüğünüz gibi klasörleri oluşturarak plugin içindeki javascript(.js) ve style(.css) dosyalarını yerleştirin. Bu makaleyi yazdığım sıralarda JQuery’nin 1.7.1 versiyonu yayında olduğu için onuda projeye ekledim. Plugin ile gelen jquery-1.5.min.js dosyası yerine jquery-1.7.1.min.js dosyasını sayfamıza ekleyeceğiz. Örnek resim olarak da www.iconfinder.com adresinden 128×128 boyutlarında resimler bulabilirsiniz.

DropShadow isimli plugin’in kullanımı ile ilgili bir örnek yaparak projemize biraz kod yazmaya başlayabiliriz. WebForm1.aspx isimli web sayfamıza kodlarımızı ekleyelim.

Öncelikle webform’umuzda aşağıdaki elementler yer alacaktır.

HTML
<form id="form1" runat="server">
<%–Kutular–%>
<div id="infoboxes">
    <%–Kutu 1–%>
    <div class="m_box">
        <div>
            <img width="64px" height="64px" alt="" src="images/img(4).png" />
            <p>
                Ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
                laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                architecto beatae vitae dicta sunt explicabo.
            </p>
        </div>
    </div>
    <%–Kutu 2–%>
    <div class="m_box">
        <div>
            <img width="64px" height="64px" alt="" src="images/img(2).png" />
            <p>
                Ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
                laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                architecto beatae vitae dicta sunt explicabo.
            </p>
        </div>
    </div>
    <%–Kutu 3–%>
    <div class="m_box">
        <div>
            <img width="64px" height="64px" alt="" src="images/img(3).png" />
            <p>
                Ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
                laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                architecto beatae vitae dicta sunt explicabo.
            </p>
        </div>
    </div>
</div>
</form>

Gördüğümüz gibi yapımız basit. <div id=“infoboxes”></div> isimli elementimiz ve içinde 3 ayrı <div class=”m_box”> bulunmaktadır. Bu div’ler içinde ise bir resim ve paragraf bulunmaktadır. Örnek resim ve metinlerimizi ilgili resim(img) ve paragraf(p) elementlerine ekledik. Sayfamızın element dizilimi bu şekilde olacak. Amacımız bu elementlerden class niteliği “m_box” olan elementlere DropShadow plugin’inin uygulanmasını sağlamaktır. Tabii ki bu uygulama javascript kodumuz ile DropShadow plugin’in sayfasında örneklendiği şekilde olacaktır.

Sayfamızın HEAD tag’ları arasına ekleyeceğimiz Style kodu ile bu elementleri biraz düzene koyacağız.

Style
<style type="text/css">
        body
        {
            font-family: Trebuchet MS Tahoma Times New Roman;
            font-size: 8pt;
        }
        img
        {
            float: left;
            margin-right: 10px;
            margin-left: 5px;
            margin-bottom: 10px;
            margin-top: 0px;
        }
        .m_box
        {
            border: 1px solid #808080;
            width: 350px;
            height: 80px;
            background-color: #E6E6E6;
            margin: 10px;
            padding: 5px;
        }
        .m_box div
        {
            opacity: 0.5;
        }
    </style>

 

Web Sayfamızın HEAD tag’ları arasına JQuery ve DropShadow ‘a ait javascript dosyalarını ve DropShadow’a ait style(css) dosyalarını yerleştiriyoruz. (Sağ tarafa solution explorer üzerinden HEAD tag’ları arasına sürükleyip bırakarak yapabilirsiniz.)

 

LINKS
<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.shadow.js" type="text/javascript"></script>
    <link href="Style/jquery.shadow.css" rel="stylesheet" type="text/css" />

 

Son olarak HEAD tag’ları arasına gölgelendirme yapacak olan DropShadow plugin’in javascript kodunu ekleyeceğiz. Bu kod sayfa yüklendikten sonra çalışacak ve HTML elementlerimizi (id özelliği “infoboxes” olan ve içinde class özelliği “m_box” olan elementlerimize) gölgelendirme efektini uygulayacaktır.

 

JavaScript
<%–Bu Javascript kodu DropShadow Plugin'in kullanim seklidir.–%>
<script type="text/javascript">
    $(document).ready(function () {

        // Web sayfamizdaki ".m_box" stili uygulanmis tum elementler elde edilir.
        var boxes = $("#infoboxes .m_box");

        // Bu element'lere "lifted" ayarli olarak golgelendirme yapilir.
        // Aslinda ust satir ve bu satir golge efekt'i vermek icin yeterlidir.
        boxes.shadow("lifted");
    });
</script>

 

Sayfamızı bir çalıştıralım ve neler yapmış olduk bir görelim.

image

Çok şık göründüğünü itiraf etmeliyim. Tarayıcınızın son versiyon bir tarayıcı olması(IE 9 , Chrome vs..) önemli aksi halde şu şekilde görünecektir.

image

Rengi soluk gelebilir. Bunun sebebi class özelliği m_box olan elementlerin opacity değerinin 0.5 olmasıdır. Ayrıca belirtmem gerekiyor ki alttaki resmin üsttekinden daha net olduğunu göreceksiniz. Bunun sebebi gene opacity özelliğinin yeni tarayıcılarda geçerli olmasıdır. İşte tüm bu javascript ve css kodlarının o tarayıcıda çalışması, bu tarayıcıda çalışmaması sorunu insanın canını biraz sıkıyor ve insanı takla atmaya zorluyor. İleride inşallah tüm bu değişikliklerin standart ve tek bir tarayıcıda olması ve bizleri bu işkenceden kurtarmasını umuyoruz. Gülümseme

Sayfamızın tam kodunu aşağıda açıklamaları ile bakalım.

 

ASPX
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head id="Head1" runat="server">
    <%–?lgili javascript ve css dosyalarimizi sayfamiza bagliyoruz..–%>
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.shadow.js" type="text/javascript"></script>
    <link href="Style/jquery.shadow.css" rel="stylesheet" type="text/css" />
    <%–Siz ugrasmayin diye ben biraz tasarim kodu yazdim.
    Bu sekilde sayfamizdaki HTML element'leri yola getirebilecegiz. 🙂 —%>
    <style type="text/css">
        body
        {
            font-family: Trebuchet MS Tahoma Times New Roman;
            font-size: 8pt;
        }
        img
        {
            float: left;
            margin-right: 10px;
            margin-left: 5px;
            margin-bottom: 10px;
            margin-top: 0px;
        }
        .m_box
        {
            border: 1px solid #808080;
            width: 350px;
            height: 80px;
            background-color: #E6E6E6;
            margin: 10px;
            padding: 5px;
        }
        .m_box div
        {
            opacity: 0.5;
        }
    </style>
    <%–Bu Javascript kodu DropShadow Plugin'in kullanim seklidir.–%>
    <script type="text/javascript">
        $(document).ready(function () {

            // Web sayfamizdaki ".m_box" stili uygulanmis tum elementler elde edilir.
            var boxes = $("#infoboxes .m_box");

            // Bu element'lere "lifted" ayarli olarak golgelendirme yapilir.
            // Aslinda ust satir ve bu satir golge efekt'i vermek icin yeterlidir.
            boxes.shadow("lifted");
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <%–Kutular–%>
    <div id="infoboxes">
        <%–Kutu 1–%>
        <div class="m_box">
            <div>
                <img width="64px" height="64px" alt="" src="images/img(4).png" />
                <p>
                    Ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
                    laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                    architecto beatae vitae dicta sunt explicabo.
                </p>
            </div>
        </div>
        <%–Kutu 2–%>
        <div class="m_box">
            <div>
                <img width="64px" height="64px" alt="" src="images/img(2).png" />
                <p>
                    Ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
                    laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                    architecto beatae vitae dicta sunt explicabo.
                </p>
            </div>
        </div>
        <%–Kutu 3–%>
        <div class="m_box">
            <div>
                <img width="64px" height="64px" alt="" src="images/img(3).png" />
                <p>
                    Ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
                    laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                    architecto beatae vitae dicta sunt explicabo.
                </p>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

 

Şimdi buraya kadar yapımızı çalıştırmayı başardık. Peki amacımız neydi? Amacımız bu gölgelendirme yapısını AjaxControlToolkit’deki gibi bir Extender kontrolü şeklinde kullanmaktır. Bunun için yapımıza bir bakalım. Özellikle DropShadow efektinin uygulandığı javascript kısmına odaklanmalıyız. Çünkü DropShadow uygulanacak elementleri bulup onlara Shadow uygulayan orasıdır. Bize gerekli olan Extender kontrolünde hangi id’li element içinde, hangi class niteliğine sahip elementlere Shadow efekti vereceğimizi belirtebileceğimiz ve hangi efekt modunda Shadow uygulayacağımızı belirtebileceğimiz bir Server kontrolü geliştireceğiz. Sonucu şimdi göstererek hayalimizde “Tüm’den gelim” uygulamak daha mantıklı olacak gibi. Elde etmeye çalıştığımız kontrol’ü şu şekilde kullanmak istiyoruz.

 

Drop Shadow Ext.Server Control
<cc1:DropShadowExtender ID="DropShadowExtender1" runat="server" TargetControlID="infoboxes"
        ClassName="m_box" ShadowMode="lifted" />

 

Sol taraftan sürükleyerek sayfamıza bir Label kontrolü ekler gibi geliştireceğimiz extender kontrolünü sayfamıza ekliyor olacağız. Sonrasında “TargetControlID” isimli özelliğimize hangi efekt uygulamak istediğimiz elementleri içeren üst element id’sini belirteceğiz. “ClassName” özelliğine efekt’in uygulanacağı elementlerin sahip olduğu class niteliği değerini vereceğiz. Son olarak ‘ta “ShadowMode” ile ne tür bir efekt uygulanacağını belirteceğiz.

ASP.NET Server Control projemize “DropShadowExtender” isimli bir Server Control ekliyoruz.

image

Ayrıca yapacağımız extender içinde uygulayabileceğimiz gölge efektlerini listeleyeceğimiz bir Enum ekleyeceğiz. Bunun için projemize bir tane de class ekleyeceğiz.

image

DropShadowMode.cs
namespace JSDropShadowExtender
{
    public enum DropShadowMode
    {
        lifted = 0,
        perspective = 1,
        raised = 2,
        sides_vt_1 = 3,
        sides_vt_2 = 4,
        sides_hz_1 = 5,
        sides_hz_2 = 6,
        rotated_5degree = 7
    }
}

Bu şekilde Enum yapımıza gölge modlarımızı girelim. Bu listedeki isimler mode’ları anlamlı olarak belirtmek içindir. Kodumuzu bu mode’a göre yapılandıracağız.

Projemize bir de resim ekleyeceğiz. Bu resim toolbox’da kontrolümüzün ikonu olacak şekilde belirleyeceğiz. Resmimizin 16×16 olması yeterlidir. Resmimizin özelliklerinde “BuildAction” özelliğini “Embedded Resources” olarak belirlemezsek Toolbox’da kontrolümüze ait ikon göremeyiz. Server kontrolümüzün kodu ise ilk aşamada şu şekilde olacaktır.

 

DropShadowExtender.cs
using System;
using System.ComponentModel;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Drawing;

namespace JSDropShadowExtender
{
    [DefaultProperty("TargetControlID")]
    [ToolboxData("<{0}:DropShadowExtender runat=server></{0}:DropShadowExtender>")]
    [ToolboxBitmap(typeof(DropShadowExtender), "ok.png")]
    [Description("Elementlere golge efekti verir. PLUGIN URL : https://github.com/sydlawrence/jQuery-Shadow&quot;)]
    public class DropShadowExtender : WebControl
    {
        //
        // Local degiskenler..
        //
        private string _TargetControlID;
        private string _ClassName;
        private DropShadowMode _ShadowMode;

        //
        // Ozellikler..
        //
        /// <summary>
        /// Icindeki elementlere golge uygulanacak olan dedef element ID'si.
        /// </summary>
        [Bindable(true)]
        [Category("Appearance")]
        [DefaultValue("")]
        [Localizable(true)]
        public string TargetControlID {
            get {
                String s = (String)ViewState["TargetControlID"];
                return ((s == null) ? this._TargetControlID : s);
            }

            set {
                ViewState["TargetControlID"] = value;
                this._TargetControlID = value;
            }
        }

        /// <summary>
        /// TargetControlID icindeki golge uygulanacak olan class niteligi degeri.
        /// </summary>
        [Bindable(true)]
        [Category("Appearance")]
        [DefaultValue("")]
        [Localizable(true)]
        public string ClassName {
            get {
                String s = (String)ViewState["ClassName"];
                return ((s == null) ? this._ClassName : s);
            }

            set {
                ViewState["ClassName"] = value;
                this._ClassName = value;
            }
        }

        /// <summary>
        /// Golge efekti turu.
        /// </summary>
        [Bindable(true)]
        [Category("Appearance")]
        [DefaultValue("")]
        [Localizable(true)]
        public DropShadowMode ShadowMode {
            get {
                DropShadowMode s = (DropShadowMode)ViewState["ShadowMode"];
                return s;
            }

            set {
                ViewState["ShadowMode"] = value;
                this._ShadowMode = value;
            }
        }

        protected override void RenderContents(HtmlTextWriter output) {

        }
    }
}

 

Server kontrolümüzü şimdilik yukarıdaki gibi kodlayacağız. Belirttiğimiz özellikleri(property) tanımladık. Ayrıca kontrolümüzün niteliklerini belirledik. “ToolboxData” , “ToolboxBitmap” , “Description” ifadelerini istediğimiz gibi düzenledik. Son olarak kontrolümüzün ekranda nasıl bir HTML çıktı oluşturacağını belirteceğimiz kısıma bunun için hazır olarak bize “RenderContents” isimli metot verilmiştir. Bunun içine yazacağımız kodları “output” parametresinde bize gelen “HtmlTextWriter” kullanarak ekrana aktaracağız. Extender kontrolleri genelde ekranda bir çıktı üretmezler, sadece çalışacak olan kodların oluşturulmasını sağlarlar. Bizde ihtiyacımız olan javascript kodunun sayfamızda belirttiğimiz özelliklerde otomatik oluşturulmasını sağlayacağız.

 

DropShadowExtender.cs
protected override void RenderContents(HtmlTextWriter output) {

    if (!string.IsNullOrEmpty(this.TargetControlID) &&
        !string.IsNullOrEmpty(this.ClassName)) {

        // Sayfamiza otomatik olarak olusturarak ekleyecegimiz javascript kodu kalibi.
        // [<…>] seklinde belirttigimiz kisimlari yukarida tanimladigimiz ozelliklerin degerine gore
        // degistirecegiz ve javascript'imizi olusturacagiz.
        string script =
            "$(document).ready(function () " +
            "{ " +
                "var boxes = $('#[<TargetControlID>] .[<ClassName>]'); " +
                " boxes.shadow('[<ShadowMode>]');" +
            "});";

        string shadowModeString = string.Empty;

        // Secili ShadowMode'a uygun kodun elde edilmesi..
        switch (this.ShadowMode) {
            case DropShadowMode.lifted:
                shadowModeString = "lifted";
                break;
            case DropShadowMode.perspective:
                shadowModeString = "perspective";
                break;
            case DropShadowMode.raised:
                shadowModeString = "raised";
                break;
            case DropShadowMode.sides_vt_1:
                shadowModeString = "{type:'sides', sides:'vt-1'}";
                break;
            case DropShadowMode.sides_vt_2:
                shadowModeString = "{type:'sides', sides:'vt-2'}";
                break;
            case DropShadowMode.sides_hz_1:
                shadowModeString = "{type:'sides', sides:'hz-1'}";
                break;
            case DropShadowMode.sides_hz_2:
                shadowModeString = "{type:'sides', sides:'hz-2'}";
                break;
            case DropShadowMode.rotated_5degree:
                shadowModeString = "{type:'rotated',rotate:'-5deg'}";
                break;
            default:
                shadowModeString = "lifted";
                break;
        }

        // Ozellik degerlerinin javascript kalibina yerlestirilmesi.
        script = script.Replace("[<TargetControlID>]", this.TargetControlID);
        script = script.Replace("[<ClassName>]", this.ClassName);
        script = script.Replace("[<ShadowMode>]", shadowModeString);

        // Script'imiz icin bir key belirliyoruz.
        string scriptKey = "DropShadowScript_" + this.ID;

        // Javascript kodumuzun sayfanin en altina yerlestirilcek sekilde sayfaya eklenmesinin saglanmasi.
        Page.ClientScript.RegisterStartupScript(
            this.GetType(), scriptKey, script, true);

    }
}

 

Kod içinde gerekli açıklamaları yaptım. Projemizi derleyelim ve “WebForm1.aspx” ‘e geri dönelim. “Design” ekranına geçtiğimizde “Toolbox” ‘da kontrolümüzü görüyoruz. Kontrolümüzü sayfamıza ekliyoruz. Ekleme işleminden sonra otomatik olarak Visual Studio tarafından ASP.NET Server Control projemiz referans olarak projemize ekleniyor. Sayfamızın üstünde kontrolümüzü içeren referans Assembly tanımlanıyor. Kontrolümüze ait tag’lar ekleniyor. Önceden yazdığımız javascript kodunu açıklama satırı yaparak pasif hale getiriyoruz. Extender kontrolümüzün özelliklerini giriyoruz. Ardından sayfamızı görüntüleyelim.

 

ASPX
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="JSSampleDropShadow.WebForm1" %>

<%@ Register Assembly="JSDropShadowExtender" Namespace="JSDropShadowExtender" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head id="Head1" runat="server">
    <%–?lgili javascript ve css dosyalarimizi sayfamiza bagliyoruz..–%>
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.shadow.js" type="text/javascript"></script>
    <link href="Style/jquery.shadow.css" rel="stylesheet" type="text/css" />
    <%–Siz ugrasmayin diye ben biraz tasarim kodu yazdim.
    Bu sekilde sayfamizdaki HTML element'leri yola getirebilecegiz. 🙂 —%>
    <style type="text/css">
        body
        {
            font-family: Trebuchet MS Tahoma Times New Roman;
            font-size: 8pt;
        }
        img
        {
            float: left;
            margin-right: 10px;
            margin-left: 5px;
            margin-bottom: 10px;
            margin-top: 0px;
        }
        .m_box
        {
            border: 1px solid #808080;
            width: 350px;
            height: 80px;
            background-color: #E6E6E6;
            margin: 10px;
            padding: 5px;
        }
        .m_box div
        {
            opacity: 0.5;
        }
    </style>
    <%–Bu Javascript kodu DropShadow Plugin'in kullanim seklidir.–%>
    <%–Pasif durumda yani calismaz..–%>
    <%—    <script type="text/javascript">
        $(document).ready(function () {

            // Web sayfamizdaki ".m_box" stili uygulanmis tum elementler elde edilir.
            var boxes = $("#infoboxes .m_box");

            // Bu element'lere "lifted" ayarli olarak golgelendirme yapilir.
            // Aslinda ust satir ve bu satir golge efekt'i vermek icin yeterlidir.
            boxes.shadow("lifted");
        });
    </script>–%>
</head>
<body>
    <form id="form1" runat="server">
    <%–Kutular–%>
    <div id="infoboxes">
        <%–Kutu 1–%>
        <div class="m_box">
            <div>
                <img width="64px" height="64px" alt="" src="images/img(4).png" />
                <p>
                    Ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
                    laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                    architecto beatae vitae dicta sunt explicabo.
                </p>
            </div>
        </div>
        <%–Kutu 2–%>
        <div class="m_box">
            <div>
                <img width="64px" height="64px" alt="" src="images/img(2).png" />
                <p>
                    Ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
                    laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                    architecto beatae vitae dicta sunt explicabo.
                </p>
            </div>
        </div>
        <%–Kutu 3–%>
        <div class="m_box">
            <div>
                <img width="64px" height="64px" alt="" src="images/img(3).png" />
                <p>
                    Ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
                    laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                    architecto beatae vitae dicta sunt explicabo.
                </p>
            </div>
        </div>
    </div>
    <cc1:DropShadowExtender ID="DropShadowExtender1" runat="server" TargetControlID="infoboxes"
        ClassName="m_box" ShadowMode="lifted" />
    </form>
</body>
</html>

 

Sayfamız yine istediğimiz gibi çalışıyor. Böylece kendimizi javascript kodu yazmaktan kurtarmış olduk.

image

Sayfamızın Source’una bakalım nasıl birşey üretilmiş.

 

HTML Source
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head id="Head1">
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.shadow.js" type="text/javascript"></script>
    <link href="Style/jquery.shadow.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        body
        {
            font-family: Trebuchet MS Tahoma Times New Roman;
            font-size: 8pt;
        }
        img
        {
            float: left;
            margin-right: 10px;
            margin-left: 5px;
            margin-bottom: 10px;
            margin-top: 0px;
        }
        .m_box
        {
            border: 1px solid #808080;
            width: 350px;
            height: 80px;
            background-color: #E6E6E6;
            margin: 10px;
            padding: 5px;
        }
        .m_box div
        {
            opacity: 0.5;
        }
    </style>
    <title></title>
</head>
<body>
    <form method="post" action="WebForm1.aspx" id="form1">
    <div class="aspNetHidden">
        <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTUwNDMyMDA4N2RkfHdssebibenUJPh2evilDAOipWvUGqW2OczFsQV6yik=" />
    </div>
    <div id="infoboxes">
        <div class="m_box">
            <div>
                <img width="64px" height="64px" alt="" src="images/img(4).png" />
                <p>
                    Ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
                    laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                    architecto beatae vitae dicta sunt explicabo.
                </p>
            </div>
        </div>
        <div class="m_box">
            <div>
                <img width="64px" height="64px" alt="" src="images/img(2).png" />
                <p>
                    Ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
                    laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                    architecto beatae vitae dicta sunt explicabo.
                </p>
            </div>
        </div>
        <div class="m_box">
            <div>
                <img width="64px" height="64px" alt="" src="images/img(3).png" />
                <p>
                    Ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
                    laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                    architecto beatae vitae dicta sunt explicabo.
                </p>
            </div>
        </div>
    </div>
    <span id="DropShadowExtender1"></span>
    <script type="text/javascript">
//<![CDATA[
        $(document).ready(function () { var boxes = $('#infoboxes .m_box'); boxes.shadow('lifted'); });//]]>
    </script>
    </form>
</body>
</html>

 

Web sayfasını çalıştırdıktan sonra sayfa kaynağına(Source) baktığınızda en altta javascript kodunun nasıl eklendiğini görebilirsiniz.. İsterseniz DrowShadowExtender kontrolümüzde CSS(style) yapısınında kullanıcı tarafından bir özellik ile girilebilmesin ve varsayılan olarak bizim tanımladığımız gibi olmasını sağlayabilirsiniz. Kontrolün geliştirilmesi tamamen sizin hayal gücünüze kalmış durumdadır. Olayın mantığı kısaca budur.

Peki javascript kodumuzu değiştirerek kontrolümüzü biraz daha geliştirelim ve makalemizi tamamlayalım. Hatırlıyorsanız “m_box” isimli stil etiketine “opacity” uygulamıştık. Bu sebepten dolayı sayfamızda soluk bir görüntüsü oluşmaktadır. şimdiki amacımız fare ile hangi kutu üzerine gelirsek onun netleşmesinin ve mouse ile üzerinden gidince gene soluk renklenmesini sağlayalım. Böylece sayfamıza bir hareketlilik te katmış oluruz. Bunun için DropShadowExtender kontrolümüzün “RenderContents” metodunun içindeki javascript kalıbını yenileyelim.

 

DropShadowExtender.cs
protected override void RenderContents(HtmlTextWriter output) {

    if (!string.IsNullOrEmpty(this.TargetControlID) &&
        !string.IsNullOrEmpty(this.ClassName)) {

        // Sayfamiza otomatik olarak olusturarak ekleyecegimiz javascript kodu kalibi.
        // [<…>] seklinde belirttigimiz kisimlari yukarida tanimladigimiz ozelliklerin degerine gore
        // degistirecegiz ve javascript'imizi olusturacagiz.
        string script =
            "$(document).ready(function () " +
            "{ " +
                "var boxes = $('#[<TargetControlID>] .[<ClassName>]'); " +
                " boxes.shadow('[<ShadowMode>]'); boxes.hover(" +
                    "function () {" +
                        "$(this).find('div').animate({ 'opacity': '1' }, 350);" +
                    "}," +
                    "function () { " +
                        "$(this).find('div').animate({ 'opacity': '0.5' }, 350);" +
                 "});" +
            "});";

        string shadowModeString = string.Empty;

        // Secili ShadowMode'a uygun kodun elde edilmesi..
        switch (this.ShadowMode) {
            case DropShadowMode.lifted:
                shadowModeString = "lifted";
                break;
            case DropShadowMode.perspective:
                shadowModeString = "perspective";
                break;
            case DropShadowMode.raised:
                shadowModeString = "raised";
                break;
            case DropShadowMode.sides_vt_1:
                shadowModeString = "{type:'sides', sides:'vt-1'}";
                break;
            case DropShadowMode.sides_vt_2:
                shadowModeString = "{type:'sides', sides:'vt-2'}";
                break;
            case DropShadowMode.sides_hz_1:
                shadowModeString = "{type:'sides', sides:'hz-1'}";
                break;
            case DropShadowMode.sides_hz_2:
                shadowModeString = "{type:'sides', sides:'hz-2'}";
                break;
            case DropShadowMode.rotated_5degree:
                shadowModeString = "{type:'rotated',rotate:'-5deg'}";
                break;
            default:
                shadowModeString = "lifted";
                break;
        }

        // Ozellik degerlerinin javascript kalibina yerlestirilmesi.
        script = script.Replace("[<TargetControlID>]", this.TargetControlID);
        script = script.Replace("[<ClassName>]", this.ClassName);
        script = script.Replace("[<ShadowMode>]", shadowModeString);

        // Script'imiz icin bir key belirliyoruz.
        string scriptKey = "DropShadowScript_" + this.ID;

        // Javascript kodumuzun sayfanin en altina yerlestirilcek sekilde sayfaya eklenmesinin saglanmasi.
        Page.ClientScript.RegisterStartupScript(
            this.GetType(), scriptKey, script, true);

    }
}

 

Server Control projesini derleyip web sayfasını çalıştırdığınızda yaptığımız değişikliğin çalışmadığını göreceksiniz. Bunun sebebi, kontrolümüzün eski durumunun Visual Studio tarafından bir cache durumunda olmasından dolayı yenilenmemesidir. Bu sebeple toolbox’dan kontrolümüzü tekrar sayfamıza sürükleyip bırakarak bu cache’lenmiş durumu yenilemiş oluruz. Bu işlemden sonra sayfayı çalıştırdığınızda kontrolümüzün çalıştığını göreceksiniz. Aşağıdaki resimde ortadaki kutu üzerine gelindiğinde animasyonlu olarak netlenecek ve üzerinden ayrıldığınızda eski haline geri gelecektir.

image

Son olarak; toolbox’da kontrolümüze ait resmin neden görünmediği merak edebilirsiniz. Resmin görünmesi için, Toolbox’a sağ tıklayarak “Choose Items…” seçin.

image

Browse” diyerek Server Control proje DLL’ini konumuna giderek seçiyoruz.

image

Tamam butonuna basıyoruz. Toolbox’da seçtiğiniz alana kontrolünüz eklenmiştir.

image

 

image

 

Tabii bu işlem biraz uğraştırıcı olduğu için test işlemlerinde üstteki en son kontrolünüzü Release ettiğinizde yani uygun bir versiyonda stabil olduğunu düşünüp kalıcı kullanacağız zaman bu şekilde toolbox’a eklemenizi tavsiye ederim.

Böylece bir makalenin daha sonuna geldik. Bu makalemizde; JQuery kullanılarak javascript ile geliştirilmiş bir plugin olan resimsiz DropShadow plugin ‘in ASP.NET Server Control projesi oluşturarak ASP.NET Server Control haline getirdik. Böylece özelliklerini değiştirerek sayfada otomatik olarak javascript kodunun oluşturulmasını sağladık. Geliştirdiğimiz kontrolü toolbox’a ekleme ve geliştirme aşamasında karşılaşacağımız bazı sorunlara değindik. Kontrolümüzü ufak bir şekilde geliştirerek nasıl daha gelişmiş hale getirebileceğimizi gördük.

Herkese iyi çalışmalar..

AJAX Extension ve Update Panel Hakkında ! (About AJAX Extension And Update Panel)

AJAX Extension Visual Studio 2010 ‘da Toolbox’a dahil edilmiştir. Visual Studio’nun bundan önceki sürümlerinde kendimiz indirerek kuruyorduk. Toolbox üzerinde şu şekilde bulunmaktadır.

image

Bu yazıda kısaca AJAX Extension’ın UpdatePanel kontrolü ile ilgili bazı ipuçlarından bahsedeceğim. Update Panel kullananlar bilirler, AJAX işlemlerimizde bize JavaScript ile uğraşmadan işlemlerimizi yapmamızda süper kolaylıklar sağlayan bir kontrolümüzdür. Kısaca bahsetmek gerekirse, asenkron işlemlerimizi kolaylaştıran, bir web sayfasının tamamının sunucuya gönderilmeden ihtiyaç duyulan kadarının gönderilmesi ve sunucu üzerinde yapılmasını istediğimiz işlemi yaparak bize sonucun geri dönmesini sağlayan bir kontroldür.

Yazının ilerleyen bölümlerinde örnekleri ve web sayfanın sunucu üzerinde giden-gelen trafik verisinide sizlerle paylaşacağım. Böylece UpdatePanel’in bize sunduklarını daha iyi görebileceksiniz.

Şunuda belirtmek gerektiğini düşünüyorum. Toolbox ‘daki AJAX Extension kontrollerinden “Script Manager” kontrolü, diğer kontrollerin; Timer, Update Panel, Update Progress kullanılması için sayfanıza mutlaka eklemeniz gereken bir kontroldür. Çalışma zamanında bir görünüme sahip olmayan bir kontroldür. AJAX request’lerinin başlatılması, sonlanması ve ilgili javascript kütüphanelerinin yüklenmesinden sorumlu kontrolün ta kendisidir.


HARİCİ JAVASCRIPT KÜTÜPHANESİNİN KAYIT EDİLMESİ

Harici javascript dosyalarımızın Script Manager’a kayıt ettirilmesi ile AJAX Client Script kütüphanesine ulaşabilmemiz sağlanır. Böylece büyük JavaScript kodlarımızın ScriptManager ile kullanımındaki sorunlar giderilebilir. Ufak kodlar için sorun yaşanmayabilir fakat bu işlemin mutlaka yapılması gerekmektedir.

ASP.NET
<asp:ScriptManager ID="ScriptManager1" runat="server">
    <Scripts>
        <asp:ScriptReference Path="myFile.js" />
    </Scripts>
</asp:ScriptManager>

 

JS
function SomeFunctions() {
    alert("Burada i?lem yapilabilir");
}

// Bu satir ile Script Manager 'a JS dosya yuklendigini bildiriyoruz.
if (typeof (Sys) !== "undefined") Sys.Application.notifyScriptLoaded();


SCRIPT MANAGER PROXY

Script Manager kontrolünün direkt ekli omadığı fakat dolaylı yoldan eklendiği WebPage ya da WebUserControl için ScriptManager nesnesine ulaşılmasını sağlar.


UPDATE PANEL – UPDATE MODE

Update Mode’un conditional olması ile bir conditional ajax request başlatıldığında sayfadaki request’i başlatan conditional alan ve “always” UpdateMode seçili alanlar sunucuya gider. “Always” olan zaten sürekli sunucuya gidecektir. “Conditional” olanlarda request’i başlatan alan sadece gidecektir. Eğer request’i “always” UpdateMode olan bir update panel başlattı ise “conditional” olanlar sunucuya gitmez.

ASP.NET
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="True" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:TextBox ID="t1" runat="server"></asp:TextBox><br />
                <asp:TextBox ID="t2" runat="server"></asp:TextBox><br />
                <asp:Button ID="Button1" runat="server" Text="Button1" OnClick="Button1_Click" /><br />
                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
            </ContentTemplate>
        </asp:UpdatePanel>
        <hr />
        <asp:UpdatePanel ID="UpdatePanel2" runat="server" ChildrenAsTriggers="True">
            <ContentTemplate>
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
                <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br />
                <asp:Button ID="Button2" runat="server" Text="Button2" OnClick="Button2_Click" /><br />
                <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
            </ContentTemplate>
        </asp:UpdatePanel>
        <hr />
        <asp:UpdatePanel ID="UpdatePanel3" runat="server" ChildrenAsTriggers="True" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox><br />
                <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox><br />
                <asp:Button ID="Button3" runat="server" Text="Button3"
                    onclick="Button3_Click"  /><br />
                <asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>

 

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

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

        }

        protected void Button1_Click(object sender, EventArgs e) {
            this.Label1.Text = (int.Parse(this.t1.Text) * int.Parse(this.t2.Text)).ToString();
        }

        protected void Button2_Click(object sender, EventArgs e) {
            this.Label2.Text = (int.Parse(this.TextBox1.Text) * int.Parse(this.TextBox2.Text)).ToString();
        }

        protected void Button3_Click(object sender, EventArgs e) {
            this.Label3.Text = (int.Parse(this.TextBox3.Text) * int.Parse(this.TextBox4.Text)).ToString();
        }
    }
}

image

Fiddler ile request’lerin bayt cinsinden boyutları..

image

3 no’lu request ile sunucuya gönderilen ve sunucudan gelen update panel’lerin verileri.

1|#||4|295|updatePanel|UpdatePanel1|
<input name="t1" type="text" value="2" id="t1" /><br />
<input name="t2" type="text" value="3" id="t2" /><br />
<input type="submit" name="Button1" value="Button1" id="Button1" /><br />
<span id="Label1">6</span>

|303|updatePanel|UpdatePanel2|
<input name="TextBox1" type="text" id="TextBox1" /><br />
<input name="TextBox2" type="text" id="TextBox2" /><br />
<input type="submit" name="Button2" value="Button2" id="Button2" /><br />
<span id="Label2">Label</span>

4 no’lu request ile sunucuya gönderilen ve sunucudan gelen update panel’lerin verileri.

1|#||4|320|updatePanel|UpdatePanel2|
<input name="TextBox1" type="text" value="4" id="TextBox1" /><br />
<input name="TextBox2" type="text" value="5" id="TextBox2" /><br />
<input type="submit" name="Button2" value="Button2" id="Button2" /><br />
<span id="Label2">20</span>

5 no’lu request ile sunucuya gönderilen ve sunucudan gelen update panel’lerin verileri.

1|#||4|320|updatePanel|UpdatePanel2|
<input name="TextBox1" type="text" value="4" id="TextBox1" /><br />
<input name="TextBox2" type="text" value="5" id="TextBox2" /><br />
<input type="submit" name="Button2" value="Button2" id="Button2" /><br />
<span id="Label2">20</span>

|320|updatePanel|UpdatePanel3|
<input name="TextBox3" type="text" value="6" id="TextBox3" /><br />
<input name="TextBox4" type="text" value="7" id="TextBox4" /><br />
<input type="submit" name="Button3" value="Button3" id="Button3" /><br />
<span id="Label3">42</span>

 


UPDATE PANEL – TRIGGERS

Triggers’lar ile UpdatePanel dışındaki bir kontrolün UpdatePanel’i yenilemesi yani bir ajax request’i başlatması sağlanabilir. Yada bir UpdatePanel içindeki kontrolün başka bir UpdatePanel’in ajax request’ini başlatması sağlanabilir. Triggers’lar ile Update Panel içindeki kontrolün tüm sayfayı sunucuya göndermesi ve ajax request değil normal asp.net request yapmasıda sağlanabilir. UpdatePanel içindeki kontrollerin ajax request başlatmasının engellenmesi için “ChildrenAsTriggers” özelliğinin “False” olması gerekmektedir. Böylece ilgili Update Panel içindeki kontrollerin ajax request başlatması engellenmiş olur.

ASP.NET
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="True" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:TextBox ID="t1" runat="server"></asp:TextBox><br />
                <asp:TextBox ID="t2" runat="server"></asp:TextBox><br />
                <asp:Button ID="Button1" runat="server" Text="Button1" OnClick="Button1_Click" /><br />
                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Button4" EventName="Click" />
            </Triggers>
        </asp:UpdatePanel>
        <asp:Button ID="Button4" runat="server" Text="Button" OnClick="Button1_Click" />
        <hr />
        <asp:UpdatePanel ID="UpdatePanel2" runat="server" ChildrenAsTriggers="True">
            <ContentTemplate>
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
                <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br />
                <asp:Button ID="Button2" runat="server" Text="Button2" OnClick="Button2_Click" /><br />
                <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
            </ContentTemplate>
        </asp:UpdatePanel>
        <hr />
        <asp:UpdatePanel ID="UpdatePanel3" runat="server" ChildrenAsTriggers="True" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox><br />
                <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox><br />
                <asp:Button ID="Button3" runat="server" Text="Button3" OnClick="Button3_Click" /><br />
                <asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
            </Triggers>
        </asp:UpdatePanel>
    </div>
    </form>
</body>

 

Button4’ün updatepanel dışından UpdatePanel1 ‘i sunucuya göndermesi.(UpdatePanel2’nin UpdateMode’u “Always” o sebeple o da gidiyor.)

1|#||4|297|updatePanel|UpdatePanel1|
<input name="t1" type="text" value="13" id="t1" /><br />
<input name="t2" type="text" value="2" id="t2" /><br />
<input type="submit" name="Button1" value="Button1" id="Button1" /><br />
<span id="Label1">26</span>

|303|updatePanel|UpdatePanel2|
<input name="TextBox1" type="text" id="TextBox1" /><br />
<input name="TextBox2" type="text" id="TextBox2" /><br />
<input type="submit" name="Button2" value="Button2" id="Button2" /><br />
<span id="Label2">Label</span>

Button1’in hem UpdatePanel1’i hem de UpdatePanel3 ‘ü sunucuya göndermesi.(UpdatePanel2’nin UpdateMode’u “Always” o sebeple o da gidiyor.)

1|#||4|297|updatePanel|UpdatePanel1|
<input name="t1" type="text" value="13" id="t1" /><br />
<input name="t2" type="text" value="2" id="t2" /><br />
<input type="submit" name="Button1" value="Button1" id="Button1" /><br />
<span id="Label1">26</span>

|303|updatePanel|UpdatePanel2|
<input name="TextBox1" type="text" id="TextBox1" /><br />
<input name="TextBox2" type="text" id="TextBox2" /><br />
<input type="submit" name="Button2" value="Button2" id="Button2" /><br />
<span id="Label2">Label</span>

|303|updatePanel|UpdatePanel3|
<input name="TextBox3" type="text" id="TextBox3" /><br />
<input name="TextBox4" type="text" id="TextBox4" /><br />
<input type="submit" name="Button3" value="Button3" id="Button3" /><br />
<span id="Label3">Label</span>

 


CODE BEHIND’ DA SCRIPT MANAGER’A ASENKRON POSTBACK KONTROLÜ TANIMLAMA

DesignTime ‘da yaptığımız işlemleri birde CodeBehind tarafında nasıl yapıldığına bakalım. Yani UpdatePanel’e bir ajax request başlatacak kontrolün eklenmesi ve bu kontrolün ilgili olayında UpdatePanel’i nasıl güncelleyeceğimize bakalım.

ASP.NET
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>

 

C#
using System;

namespace JSSampleAJAX
{
    public partial class WebForm4 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e) {
            this.Label1.Text = DateTime.Now.ToString();

            this.ScriptManager1.RegisterAsyncPostBackControl(this.Button1);
        }

        protected void Button1_Click(object sender, EventArgs e) {
            this.Label1.Text = "updated – " + DateTime.Now.ToString();
            UpdatePanel1.Update();
        }
    }
}

Fiddler ile gelen veri..

1|#||4|86|updatePanel|UpdatePanel1|
<span id="Label1">updated – 24.01.2012 16:28:48</span>

 


UPDATE PANEL’LERİ FAYDALI KULLANMAK / İÇ İÇE UPDATE PANEL KULLANIMI

Yazdığımız kod ve tasarımlarımızda sunucu ile ne kadar az veri alışverişinde olursak web sitemizin / web sayfamızın daha performanslı ve hızlı çalışmasını sağlarız. Ayrıca kullanıcıya da bir o kadar windows uygulamasındaki gibi rahatlık ve hissiyat vermiş oluruz. Bu konuyla ilgili aşağıdaki örneğimizde iç içe Update Panel’ler kullanılmadığı ve kullanıldığı zamanlardaki veri trafiğini inceleyeceğiz. Öncelikle kullanmadığımız durumu oluşturacağız ve bunun üzerinden devam edeceğiz.

ASP.NET
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:Repeater ID="Repeater1" runat="server">
                    <ItemTemplate>
                        <asp:Label ID="Label1" runat="server" Text='<%# Eval("Deger") %>'>
                        </asp:Label>&nbsp;
                        <asp:Button ID="Button1" runat="server" Text="Snucuya Git" /><br />
                    </ItemTemplate>
                </asp:Repeater>
            </ContentTemplate>
        </asp:UpdatePanel>
        <hr />
        <hr />
        <asp:Repeater ID="Repeater2" runat="server">
            <ItemTemplate>
                <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
                    <ContentTemplate>
                        <asp:Label ID="Label1" runat="server" Text='<%# Eval("Deger") %>'></asp:Label>
                        &nbsp;
                        <asp:Button ID="Button1" runat="server" Text="Snucuya Git" />
                        <br />
                    </ContentTemplate>
                </asp:UpdatePanel>
            </ItemTemplate>
        </asp:Repeater>
    </div>
    </form>
</body>

 

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

namespace JSSampleAJAX
{
    public partial class WebForm3 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e) {
            List<object> list = new List<object>();

            for (int i = 0; i < 10; i++) {
                list.Add(
                    new { Deger = "Deger-" + i.ToString() });
            }

            this.Repeater1.DataSource = list;
            this.Repeater1.DataBind();

            this.Repeater2.DataSource = list;
            this.Repeater2.DataBind();
        }
    }
}

image

Fiddler ile UpdatePanel1 in durumu..

1|#||4|2322|updatePanel|UpdatePanel1|

<span id="Repeater1_Label1_0">Deger-0</span>&nbsp;
<input type="submit" name="Repeater1$ctl00$Button1" value="Snucuya Git" id="Repeater1_Button1_0" /><br />

<span id="Repeater1_Label1_1">Deger-1</span>&nbsp;
<input type="submit" name="Repeater1$ctl01$Button1" value="Snucuya Git" id="Repeater1_Button1_1" /><br />

<span id="Repeater1_Label1_2">Deger-2</span>&nbsp;
<input type="submit" name="Repeater1$ctl02$Button1" value="Snucuya Git" id="Repeater1_Button1_2" /><br />

<span id="Repeater1_Label1_3">Deger-3</span>&nbsp;
<input type="submit" name="Repeater1$ctl03$Button1" value="Snucuya Git" id="Repeater1_Button1_3" /><br />

<span id="Repeater1_Label1_4">Deger-4</span>&nbsp;
<input type="submit" name="Repeater1$ctl04$Button1" value="Snucuya Git" id="Repeater1_Button1_4" /><br />

<span id="Repeater1_Label1_5">Deger-5</span>&nbsp;
<input type="submit" name="Repeater1$ctl05$Button1" value="Snucuya Git" id="Repeater1_Button1_5" /><br />

<span id="Repeater1_Label1_6">Deger-6</span>&nbsp;
<input type="submit" name="Repeater1$ctl06$Button1" value="Snucuya Git" id="Repeater1_Button1_6" /><br />

<span id="Repeater1_Label1_7">Deger-7</span>&nbsp;
<input type="submit" name="Repeater1$ctl07$Button1" value="Snucuya Git" id="Repeater1_Button1_7" /><br />

<span id="Repeater1_Label1_8">Deger-8</span>&nbsp;
<input type="submit" name="Repeater1$ctl08$Button1" value="Snucuya Git" id="Repeater1_Button1_8" /><br />

<span id="Repeater1_Label1_9">Deger-9</span>&nbsp;
<input type="submit" name="Repeater1$ctl09$Button1" value="Snucuya Git" id="Repeater1_Button1_9" /><br />

Fiddler ile UpdatePanel2 ‘nin durumu..

1|#||4|281|updatePanel|Repeater2_UpdatePanel2_7|
<span id="Repeater2_Label1_7">Deger-7</span>
&nbsp;
<input type="submit" name="Repeater2$ctl07$Button1" value="Snucuya Git" id="Repeater2_Button1_7" />
<br />

 

Böylece Update Panel ile ilgili birçok konuyu netleştirdik. Bu bilgiler ışığında yazdığınız kodlarda daha net görüşlere ve hıza önem vereceğinizi düşünüyorum. Kısaca değindiğimiz konular; AJAX Extension ile Update Panel ‘in bize sunulması, Harici JavaScript dosyalarının Script Manager ‘a kaydedilmesi, Script Manager Proxy, Update Panel ‘in Update Mode özelliği, Code Behind’da Script Manager’a Asenkron Postback Kontrolü Tanımlama, Update Panel’i faydalı kullanmak, iç içe Update Panel kullanmak..

Herkese faydalı olması dileğimle..

JQuery Kaynak Siteleri

JQuery ile ilgili güzel faydalı kaynakların yer aldığı sitelerden ikisi. İçlerinden biri zaten JQuery’nin kendi sitesidir.

http://www.eburhan.com/

http://jquery.com/