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..

Okumakta Olduklarım ve Okumak İstediklerim

Okuduklarım ve Şiddetle Tavsiye Ettiklerim

Aralarında eski okuduğum bir dizi kitapta mevcut, zamanında onlarıda okumak çok zevkliydi..

10 adımda yazılım geliştirme Programlama ve veritabanı mantığı WPF-Windows Presentation foundation
ASP.NET Ajax ASP.NET 2005 Her yönüyle internetin alt yapısı tcp-ip
Çözüme giden yolda en değerli deneyimler Hackers and painters Algoritma geliştirme ve programlamaya giriş
ASP.NET 2.0 Visual Basic 6.0 Pascal ile programlama teknikleri
C Programlama Dili Adım adım front page 2003 C/C++

Okuma Planları içinde Olduklarım

Bu yıl içinde okuyup bitirmeyi düşündüğüm bir dizi kitap, aynı zamanda 18 adet daha yeni kitapta aldım. Fakat onları okudukça burada paylaşacağım. Gülümseme

Her yönüyle C# 4.0 Silverlight 3.0 JQuery
Önemli işlere öncelik Leonardo Da Vinci Gibi Düşünmek Etkili insanların 7 alışkanlığı
Action Script 3.0 ile flash CS4 Mobil Programlama  

Nedir Tv 4.Yıldönümü Sermineri

Gerçekten son derece bilgi dolu ve faydalı bir etkinlikti. Katılmayan arkadaşların videoları Daron Yöndem ‘in ya da NedirTv sitesinde yayınlanınca izlemesini şiddetle tavsiye ederim. NedirTv?com

Görsellik konusunda Daron Yöndem’in HTML5 bölümü süperdi. Daron Yöndem

Selçuk Yavuz’un MVC hakkında bilgilerimizi toparlayıp, bir o kadar detaylı fakata kafamızı karıştırmadan anlattıkları ASP.NET MVC sayfa kaynak kodları gibi berrak ve açıktı. 🙂 Selçuk Yavuz

Uğur Umutluoğlu’nun ASP.NET AJAX konusu gerçekten kafamda farklı farklı fikirlerin çakmasına sebep oldu. Gerçekten gelecekte bu alanda ciddi gelişmeler göreceğiz. FAkat bu kadarı bile beyin fırtınalarımı tetikledi. 🙂 Uğur Umutluoğlu

Burak Selim Şenyurt’un WCF konusu, seminerin son kısmında kalsa da biraz konsantre olarak ve yoğunlaşarak dinlediğimizde ciddi gelişmelerin ve gerçekten öğrenilmesi gereken çok geniş fakat bir o kadar geleceğin teknolojisiyle şimdiden tanışmış olduk. Tabii bu konuda Burak Selim Şenyurt’un süper bir makale dizisi var. Önümüzdeki zamanlarda detaylıca okumayı düşündüğüm bir dizi, şiddetle tavsiye ederim. Burak Selim Şenyurt

Etkinlik Resimleri..

AJAX – XMLHttpRequest Object to Post Data

Bazen web uygulamalarından QueryString ile sayfalar arası veri taşınabilirliliği yetersiz kalabilir. Özellikle büyük veri ifadesi yada özel karakterler içeren veriler taşınamayabilir. Bu gibi durumda yardımımıza POST Data yöntemi yetişir. Bu işlemde bir Form nesnesi oluşturulup, veriler içine aktarılır ve gönderilmek istenen sayfaya gönderilir.

Default.aspx

function XmlHttpPostData() {
var objHTTP, strResult;
var query = document.getElementById(“txtQuery“).value; //txtQuery isimli kontrol verisi elde edilir..

objHTTP = new ActiveXObject(‘Microsoft.XMLHTTP’);
objHTTP.open(“POST“, “GetData.aspx“, false); //Veri gönderilecek sayfa url’i
objHTTP.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’);
//Mutlaka yazılmalı..

objHTTP.send(“query=” + query);
strResult = objHTTP.responseText; //Post sonucu sayfadan dönen ifade strResult ‘a aktarılır.

if (strResult != “”) {
alert(strResult); //Dönen ifade ekrana basılır.
}
}

GetData.aspx.cs

//Sayfanın Render anında yani sayfa yüklenmeden önce, içeriğinin kodlandığı an sayfaya aktarılan veri okunur. Bunun için Request.Form ifadesi kullanılır. Veri elde edilir. Veri ile istenilen işlem yaptırılır. Ki biz burada sadece veriyi ekrana geri yazdırıyoruz. Bu GetData.aspx.cs code-behind sayfasında istediğiniz metodları ekleyerek elde ettiğiniz veriyi işleyip istediğiniz biçimde bir Response döndürebilirsiniz.
protected override void Render(HtmlTextWriter writer)
{
Response.Write(Request.Form[“query“].ToString());
//Dönen ifade ekrana basılır.
}


Bu şekilde büyük ve QueryString ile taşınamayan veriler bir aspx sayfasından javascript postback ile diğer sayfaya gönderilebilir ve diğer sayfada Render metodu override edilerek istenilen biçimde bir responseText oluşturulabilir. Bu oluşturulan ResponseText ise ilk sayfamızdaki javascript kodu tarafından yakalanıp, değişkene aktarılır..

strResult = objHTTP.responseText;

Böylece ilk sayfada diğer sayfada yaptığınız bir işlem sonucu istenilen biçimde bir veri elde edilebilir..