KMRT BSRN

"Hiç kimsenin ilgisine ihtiyaç duymadığın gün olgunlaşırsın. Hiç kimseden beklentiye girmediğin gün yara almazsın. Ve hiç kimseye bağımlı kalmazsan kazanırsın." OSHO


Yorum bırakın

ASPNET Web API Yazılımcıların Bağımsızlığı Eğitimi Yayında..!

aspnet-web-api-yazilimcilarin-bagimsizligi-egitimi-400

Merhaba Arkadaşlar;

Evet..! Yeni bir eğitimin haberini sizlerle paylaşmak istiyorum.

ASPNET Web API Yazılımcıların Bağımsızlığıeğitimi yayında..! 

Tanıtım videosu için buraya tıklayınız.

Özellikle bekleyenler vardı ki, arkadaşların bu konuda yoğun istekleri ve benim de hazırlamak istediğim bir eğitim olarak sizlere sunuyorum. Bu eğitim de biraz yorum farklılığı olması açısından hoş bir değişim sizleri bekliyor. Zaten ön izlemeler de anlarsınız diye düşünüyorum. 😉 İlerleyen zamanlarda gerekli konular ve örnekler eklenmeye devam edilecektir. Duyurularla sizlerle paylaşıyor olacağım.

Eğitimi 31 Mart 2017 23:59 ‘a kadar SPRING17 kodu ile 10$’a alabilirsiniz. Açılış fırsatı diyebilirsiniz. 🙂

Herkese şimdiden faydalı olmasını diliyorum..


Yorum bırakın

Seminer – Microsoft Teknoloji Günleri Akşam Sınıfı 7, Asp.Net 4.0 ile Gelen Yenilikler

Güzel biten bir seminerin daha ardından…seminer(6)

 


Yorum bırakın

ASP.NET – Modal Popup Olsun İstiyorum..

Birçok sitede gördüğümüz ve hoşumuza giden Modal Popup’lar ile ilgili bana gelen bir e-posta sonrasında bu konuda bir makale yazmaya karar verdim. Öncelikle e-posta Emrah Özgüner arkadaşımdan bana geldi ve kendisi ile çok hoş bir e-posta trafiğimiz oldu. Bu e-posta trafiğinde benim için çok hoş bir antreman ve tecrübe oldu. Emrah arkadaşımında çok farklı dünyalara giriş yapmasına sebep oldu. Kısacası ikimiz içinde zevkli bir antreman yaşadık. Bu sebeple bu konuya bloğumda da yer vermek istedim.

Birazcık ModalPopup’dan bahsedelim. ModalPopup’lar, web sayfalarında bazı nesnelerin, yazıların üzerine gelindiğinde ya da bir tıklama işlemi sonucunda ekranın ortasına gelen hoş Layer’’lar(DIV)dır. Bu sayede kullanıcılara üzerine gelinen bir nesne ile ilgili bilgi veya uyarı verilebilmesini sağlar. Yada ekranın ortasında belirerek, web sayfasının geri kalan kısmına erişimini engelleyerek kullanıcının açtığımız Layer üzerinde işlem yapmasını sağlar. Örnek olarak aşağıdaki resimdeki gibi web sayfasında yapılan işleme göre iç iç’e Layer’lar gösterebilirsiniz.

lightface3

Öncelikle bu konuda izlenebilecek birçok yöntem ve kullanılabilecek birçok ücretsiz araç var. Hatta bir web sitesinde gördüğünüz ve hoşunuza giden bir ModalPopup kodunu bile çalabilirsiniz. 🙂 Tabii bu pek hoş bir durum değil ve gereksiz. Çünkü zaten bir sürü yazılmış ücretsiz kod mevcut. Bunlardan birini Davis Walsh’ın geliştirdiği buradaki adresten alarak kullanabilirsiniz. Örnekleri ile beraber çok hoş bir Facebook tarzı Modal Pop geliştirmiş. Bu yazıyı benimle paylaştığı için Emrah Özgüner arkadaşıma teşekkürler.. 🙂 Bir adres daha paylaşmak istiyorum. Eğer AJAX kullanıyorsanız oradaki ModalPopup kontrolü de çok işinize yarayacaktır. Bunun içinde Sem Göksu’nun “ModalPopup Kontrolü ile Kullanıcı Dostu Mesaj Pencereleri Çıkarmak” isimli makalesini okumanızı öneririm.

Şimdi gelelim kendi Modal Popup’ımızı nasıl geliştirebileceğimize.. Öncelikle belirttiğim gibi, Modal Popup için bir çok yöntem var.. Yukarıda da bahsettiğim gibi Emrah arkadaşımın böyle bir yapıyı nasıl oluşturabileceğimiz sorusu üzerine kısıtlı zamanımda aklıma gelen ilk yöntemle sorununa çözüm bulmaya çalıştım.

Amacımız;

Bir DataList ile çektiğimiz verilerin sayfa üzerinde gösterilmesini sağlayacağız. Ardından DataList üzerindeki her kayıdın üzerine gelindiğinde yanında bir ModalPopup açılmasını sağlayacağız. ModalPopup içinde kaydın bilgilerinin aynılarını bir resim ile beraber göstereceğiz. Anlatarak açıklamaktansa göstererek anlatmak en iyisi. 🙂 Amacımız aşağıdaki resimlerdeki yapıyı oluşturmak.

image

image

Gördüğünüz gibi her kaydın üzerine geldiğimde yan tarafta bir ModalPopup açılıyor ve kullanıcı bilgilerini bir resim ile güzel bir yapıda gösteriyorum. Projemize başlıyoruz..

Öncelikle Visual Studio 2010 üzerinde (isterseniz 2008’de olur) boş ve .NET Framework 3.5 üzerinde çalışan bir web site projesi açıyorum. Projeye “FaceTest” ismini verdim.

image

Ardından “Default.aspx” isminde bir web sayfası projemize ekliyoruz.. Oluşturduğumuz bu yeni web sayfası(“Default.aspx”) üzerine toolbox’daki “Data” bölümünden bir adet “DataList” kontrolünü sürükleyip bırakıyoruz. Siz burada başka kontrolleride kullanabilirsiniz..

image

Buraya kadar herşey güzel.. Şimdi Code Behind’a geçiyoruz. Buraya tamamen kurgusal bir veri yığını oluşturarak, data list’in doldurulmasını sağlayan kodu yazacağız.. Web sayfasının “Page_Load” olayına aşağıdaki kodu yazıyorum.

  protected void Page_Load(object sender, EventArgs e)    
  {        
        if (Page.IsPostBack) return;

        // ?rnek veri tablosu.        
        System.Data.DataTable dt = new System.Data.DataTable();        
        dt.Columns.Add("userId", typeof(int));        
        dt.Columns.Add("ad", typeof(string));        
        dt.Columns.Add("soyad", typeof(string));

        System.Data.DataRow dr;

        // Sat?r 1.        
        dr = dt.NewRow();        
        dr["userId"] = 0;        
        dr["ad"] = "Murat";        
        dr["soyad"] = "Ba?eren";        
        dt.Rows.Add(dr);

        // Sat?r 2.        
        dr = dt.NewRow();        
        dr["userId"] = 1;        
        dr["ad"] = "Emrah";        
        dr["soyad"] = "?zg?ner";        
        dt.Rows.Add(dr);

        // Veriyi DataList'e ba?l?yorum.        
        this.myDataList.DataSource = dt;        
        this.myDataList.DataBind();

}

Design ekranına geçiyoruz ve yazdığımız arkaplan koduna uygun bir Template tasarımı yapacağız. DataList kontrolünü design alanında seçtiğinizde sağ üst köşesinde çıkan ok’a tıklıyoruz ve açılan menü’den “Edit Templates” seçiyoruz. Bu işlem ile arkaplan kodumuza uygun bir tasarım yapacağız. “Item Template” yapısı otomatik olarak geliyor. Bunun anlamı, DataList’e Bind ettiğimiz DataTable’ın her bir satırındaki veriler için DataList nasıl görünüm sağlayacak bunu ayarlıyoruz.

image

3 adet Label’ı Item Template içine sürükleyip bırakıyoruz. Her bir Label’ı sırası ile seçiyoruz. Label’ın sağ üst köşesindeki ok’a basarak “Edit Databindings” seçiyoruz. “Text” özelliğine arkaplan kodunda yazdığımız DataTable’ın kolonlarına karşılık gelen ifadeyi yazıyoruz..

image

image

image

Item Template ayarlarını bu şekilde tamamlamış oluyoruz. “End Template Editing” ifadesini seçerek DataList’in template tasarımını tamamlıyoruz.

image

image

image

Sayfayı çalıştırdığınızda “F5”, aşağıdaki gibi bir görüntü elde ediyorum. Benimki neden böyle görünmüyor demeyin çünkü birkaç stil ayarıda yaptım.

image

Source” kısmında şu değişiklikleri yaptım.

            <asp:Label runat="server" ClientIDMode="Predictable" Visible="False" ID="userId"Text='' />
<asp:Label runat="server" ClientIDMode="Predictable" ID="ad" Text='' />
<asp:Label runat="server" ClientIDMode="Predictable" ID="soyad" Text='' />

Böylece yukarıdaki görünümü elde edebilirsiniz.. Sayfa çalışırken listelenen verilerimizin üzerine gelindiğine çıkacak olan ModalPopup Layer’ını HTML olarak geliştirelim. Bunu “Source” alanında Item Template tag’ının içinde en üst’e yazıyoruz. Bu şekildeki yapıları ilk önce ayrı bir HTML dosya içinde yadıktan sonra web sayfa kodunuza eklerseniz çok daha kolay çalışabilirsiniz.. Ben bir adet HTML sayfayı projeye ekliyorum. Sonra da HTML bilgim ile hoş basit bir yapıyı kodluyorum..

image

HTML ile şu kodu yazdım..

<div id='' style="width: 300px; height: 50px; visibility: hidden;    position: absolute; left: 150px; border: 1px solid navy; padding: 10px;">
                      <img id="img_res" src="facebook-pop-dialog-sprite.png" width="40px" height="40px"style="border: 1px navy solid;" />
  Ad? :
  Soyad? :