HTML 5 Canvas Nedir ?

<canvas> bir web sayfası üzerinde grafik çizmek için kullanılan bir araç veya elemandır.

Canvas Nedir ?

Html5 <canvas> eleamanı script vasıtasıyla (genellikle JavaScript) grafik çizmek için kullanılır.

<canvas> sadece grafik özelliklerini kapsar.  Aslında çizim yapmak için script kullanmanız gerekiyor.

Canvas ile çizim  yapmak için birkaç metod bulunuyor : boxes (kutular), circles (daireler), text (yazı) ve ek olarak image (resim).

Örneklerle anlamaya çalışalım :

Örnek  1 (dikdörtgen çizmek): 

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;"></canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>

JavaScript image dropdown

Eski moda dropdownlardan sıkıldıysanız bu yeni image combo box eklentisini deneyin. Her seçeneğe bir icon ekleyebilirsiniz. Eklediğiniz select elemanı ile uyumlu çalışacaktır yada JSON object yaratabilirsiniz. Bu size kalmış. Başlayalım :

ASP.Net ile Jquery  autocomplete yapmak (3)

Son makalemizde css dosyamızı oluşturup, jquery versiyonlarımızı çağırarak autocomplete işlemini sonlandırıyoruz.

Aşağıdaki dosyaları ascx dosyamızın içine ekliyoruz :

<link rel="Stylesheet" href="<%= ResolveUrl ("Styles/jquery-ui-1.10.4.custom.css") %>" />
<script src="<%= ResolveUrl ("Scripts/jquery-1.10.2.js") %>"></script>
<script src="<%= ResolveUrl ("Scripts/jquery-1.11.2.js")%>"></script>

Dosyaların linki : https://www.dropbox.com/sh/32nevb0zuiu23cj/AABOLAFqRdaXIzT-FQoUMWURa?dl=0

Herşey tamamsa aşağıdaki ekran çıktısını göreceksiniz. (Unutmayın üç harften sonra arama başlayacak.)

Javascript ile resim döndürmek (image rotating)

Javascript ile resim döndürmek mümkün müdür ? Tabi ki. Bu makaleyi takip ederek Javascript ile resimleri nasıl döndüreceğinizi öğrenebilirsiniz.

En kolay işle başlayalım. Aşağıdaki satırlar ekleyelim :

<img src="/article-sources/images/plane-1.jpg" alt="" id="image" />
<canvas id="canvas"></canvas>

Yukarıda döndüreceğimiz resmi CANVAS (döndürülen resmi görüntülemek için kullanılacak) tagımıza ekliyoruz. CANVAS tag sadece Chrome, FF, Opera, Chrome IE8 ve Safari tarafından desteklniyor. IE6 VE IE7 CANVAS desteklemiyor.

Şimdi resmi nasıl döndüreceğimizi inceleyelim. Güncel tarayıcıların bir çoğu <canvas> nesnesini destekliyor aslında 2D context içindeki 'rotate' ve 'drawimage' metodlarının kullanımına izin veriyorlar. IE6 ve IE7 ise bu tagı tanımıyor. Bu nedenle Microsoft "DXImageTransform.Microsoft.BasicImage" üzerinde geliştirme yaparak rotation (döndürme) metodu ortaya çıkardı (Link : http://msdn.microsoft.com/en-us/library/ms532918%28VS.85%29.aspx).  İyi haber  kullanımı basit fakat sadece dört açı (0, 90, 180 ve 270 açıları) desteklemesi bir handikap olarak karşımıza çıkıyor.  IE Resim döndürme kodu aşağıdaki gibidir  :

//  DXImageTransform.Microsoft.BasicImage  MSIE Kullanımı
>switch(degree){
     case 0: image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=0)'; break;
     case 90: image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)'; break;
     case 180: image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)'; break;
     case 270: image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)'; break;
}

CANVAS tagını destekleyen tarayıcılarda ki kullanım şekli ise aşağıdaki gibidir :

var cContext = canvas.getContext('2d');

var cw = img.width, ch = img.height, cx = 0, cy = 0;

//   Calculate new canvas size and x/y coorditates for image
>switch(degree){
     case 90:
          cw = img.height;
          ch = img.width;
          cy = img.height * (-1);
          break;
     case 180:
          cx = img.width * (-1);
          cy = img.height * (-1);
          break;
     case 270:
          cw = img.height;
          ch = img.width;
          cx = img.width * (-1);
          break;
}

//  Rotate image
canvas.setAttribute('width', cw);
canvas.setAttribute('height', ch);
cContext.rotate(degree * Math.PI / 180);
cContext.drawImage(img, cx, cy);

X/Y kordinatlarını değiştirmek için drawImage fonksiyonunu kullanmak zorundayız. Kolay gelsin.

Kodların Son Hali :

HTML : 

<div id="page">
<h1>How to Rotate Images using JavaScript</h1>

<div>
<img src="image/prvTwin Sunset.jpg" alt="" id="image" width="150" />
<canvas id="canvas"></canvas>
</div>
<p>
<strong>Rotate Image: </strong>
<a href="javascript:;" id="resetImage">Reset Image</a>
<a href="javascript:;" id="rotate90">90</a>
<a href="javascript:;" id="rotate180">180</a>
<a href="javascript:;" id="rotate270">270</a>
</p>

</div>

JS :

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>

<script type="text/javascript">
var img = null, canvas = null;

$(document).ready(function () {
// Initialize image and canvas
img = document.getElementById('image');
canvas = document.getElementById('canvas');

if (!canvas || !canvas.getContext) {
canvas.parentNode.removeChild(canvas);
} else {
img.style.position = 'absolute';
img.style.visibility = 'hidden';
}
rotateImage(0);

// Handle clicks for control links
$('#resetImage').click(function () { rotateImage(0); });
$('#rotate90').click(function () { rotateImage(90); });
$('#rotate180').click(function () { rotateImage(180); });
$('#rotate270').click(function () { rotateImage(270); });
});

function rotateImage(degree) {
if (document.getElementById('canvas')) {
var cContext = canvas.getContext('2d');
var cw = img.width, ch = img.height, cx = 0, cy = 0;

// Calculate new canvas size and x/y coorditates for image
switch (degree) {
case 90:
cw = img.height;
ch = img.width;
cy = img.height * (-1);
break;
case 180:
cx = img.width * (-1);
cy = img.height * (-1);
break;
case 270:
cw = img.height;
ch = img.width;
cx = img.width * (-1);
break;
}

// Rotate image
canvas.setAttribute('width', cw);
canvas.setAttribute('height', ch);
cContext.rotate(degree * Math.PI / 180);
cContext.drawImage(img, cx, cy);
}
else {
// Use DXImageTransform.Microsoft.BasicImage filter for MSIE
switch (degree) {
case 0: image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=0)'; break;
case 90: image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)'; break;
case 180: image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)'; break;
case 270: image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)'; break;
}
}
}
</script>

DEMO

Kaynak : http://www.ajaxblender.com/howto-rotate-image-using-javascript-canvas.html

ASP.Net ile Jquery autocomplete yapmak (2)

Jquery autocomplete içerisinde ajax ile servisin çağrılması

Üç seriden oluşan autocomplete makalemizin ikinci konusu web servisinin jquery autocomplete metodunu kullanaraj ajax ile çağırmak olacaktır. Aşağıda oluşturduğumuz ascx sayfamızda yer alan kodlar ve açıklamalar bulunmaktadır.

ASCX

<script type="text/javascript" language="javascript">

var jQuery  = jQuery.noConflict(); // Diğer jquery fonksiyonlarla çakışmasını önlemek için noConflict metodumuzu çağırıyoruz.

jQuery (function () {

jQuery ("#<%= txtKategoriAdi.ClientID %>").autocomplete({

// Arama sonuçlarından birine tıklandığında aşağıdaki fonksiyon bir link oluşturup ilgili sayfaya yönlendirecek.

select: function (event, ui) {

var url = "http://ornelsite.com/IlanAra.aspx?KategoriId=" + ui.item.Id;

event.preventDefault();

window.location.href = url;

},

//Web servis çağrıldıktan sonra JSON formatına çeviriliyor ve geriye KategoriId ve KategoriAd döndürülüyor

source: function (request, response) {

jQuery .ajax({

url: "UserControls/CompleteWord.asmx/KategoriAdiAl",

data: "{ 'Kelime': '" + request.term + "' }",

dataType: "json",

type: "POST",

contentType: "application/json; charset=utf-8",

success: function (result) {

var markers = JSON.parse(result.d);

response(jQuery .map(markers, function (item) {

var baslik = item.IlanBaslik ? item.IlanBaslik : 'Kategoriler';

var kad = item.KategoriAd ? "(Kategori : " " + item.KategoriAd + ")" : ' ';

return {

Id: item.KategoriId,

value: baslik.toUpperCase() + " " + kad

}

}))

},

error: function (result) {

alert("Problem var");

}

});

},

minLength: 3 // 3 harften sonra autocomplete çalışmaya başlayacak

});

});

</script>

HTML

<asp:TextBox runat="server" ID="txtKategoriAdi" placeholder="Arama yapmak istediğiniz kelimeyi giriniz." Width="350px" CssClass="textbox" Height="30px"  />

Sormak istediğiniz birşey olursa lütfen yorum olarak giriniz.

Son makale için tıklayınız

Özel kontrol oluşturmak (Custom Control)

Özel kontroller (Custom Control) özgün assembliler olarak konuşlandırılırlar. Diğer ASP.Net server kontrolleri gibi kullanılırlar ve dinamik link kütüphanesi içinde (DLL) derlenirler.

Aşağıdaki seçeneklerden biri kullanılarak oluşturulabilir :

• Dışarıdan bir özel kontrol türeterek


• İki veya daha fazla harici kontrolü birleştirip yeni bir özel kontrol oluşturularak


• Ana yada temel kontrol sınıfından türetilerek

Bu yapıyı yada bu kavramı tanımak için tarayıcıda basit bir mesaj gösteren özel bir kontrol oluşturalım. Aşağıdaki adımları takip ediyoruz :

Yeni bir web site yaratalım. Solution'a sağ tıklayalım. Yanlışlıkla projeye tıklamamaya dikkat edin. Aşağıdaki pencerede göründüğü gibi bir server control oluşturuyoruz.



Yukarıdaki adım ServerControl1 adında çağrılan eksiksiz bir özel kontrol oluşturur ve bunu solution  içerisine ekler. Bu örneğimizde bu kontrolümüzü CustomContorls olarak isimlendiriyoruz. Bu kontrolü kullanmak için önceden referans etmeliyiz. Bu işlemi gerçekleştirmek için var olan projemiz üzerine sağ tıklayarak Add Reference seçeniğini tıklıyoruz. Açılan pencereden Solution altında Projects içerisinde yer alan projemizi seçerek ekliyoruz. Eğer proje görünmüyorsa solution'a sağ tıklarayarak build ediniz.



Toolbox içerisinde her hangi bir tagda Choose Items diyerek kontrolümüzü getirebiliriz. Sürükle bırak yöntemiyle istediğimiz sayfaya ekleyebiliriz.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Sil.aspx.cs" Inherits="UserControls_Sil" %>

<%@ Register Assembly="ServerControl1" Namespace="ServerControl1" TagPrefix="cc1" %>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>

<form id="form1" runat="server">
<cc1:ServerControl1 ID="ServerControl1" text="Server Control'den merhaba :)" runat="server" />
</form>
</body>
</html>

Sayfa çalıştığında yazdığımız text içeriği görüntülenecektir.

Bu örneğimizde text özelliği set ediliyor. ASP.Net bu özelliği default olarak kontrol yaratıldığında oluşturuyor. Code behinde dosyasının bunu meydana getiriyor.

using System;

using System.Collections.Generic;

using System.ComponentModel;

using System.Linq;

using System.Text;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

 

namespace CustomControls

{

   [DefaultProperty("Text")]

   [ToolboxData("<{0}:ServerControl1

                  runat=server></{0}:ServerControl1>")]

    public class ServerControl1 : WebControl

   {

      [Bindable(true)]

      [Category("Appearance")]

      [DefaultValue("")]

      [Localizable(true)]

      public string Text

      {

         get

         {

            String s = (String)ViewState["Text"];

            return ((s == null) ? "[" + this.ID + "]" : s);

         }

         set

         {

            ViewState["Text"] = value;

         }

      }

      protected override void RenderContents(

                                        HtmlTextWriter output)

      {

         output.Write(Text);

      }

   }

}

Yukarıdaki kodlar otomatik olarak bir custom kontrol oluşturdu. Olaylar ve metodlar custom contol sınıfına eklendi.

Şimdi örneğimizi biraz daha genişletelim ve bir örnek yapalım.

Palindromları kontol eden "checkpanlindrome" adlı bir metod oluşturuyoruz.

Palindrom; baştan ve sondan okunduğunda değeri değişmeyen kelime veya sabitlerdir. Bu örnek için basit kelimeleri ele alacağız.

Custom Control kodlarımızı aşağıdaki şekilde gibi genişletiyoruz :

using System;

using System.Collections.Generic;

using System.ComponentModel;

using System.Linq;

using System.Text;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

 

namespace CustomControls

{

   [DefaultProperty("Text")]

   [ToolboxData("<{0}:ServerControl1

               runat=server></{0}:ServerControl1>")]

   public class ServerControl1 : WebControl

   {

      [Bindable(true)]

      [Category("Appearance")]

      [DefaultValue("")]

      [Localizable(true)]

      public string Text

      {

         get

         {

            String s = (String)ViewState["Text"];

            return ((s == null) ? "[" + this.ID + "]" : s);

         }

         set

         {

            ViewState["Text"] = value;

         }

     }

     protected override void RenderContents(

                                       HtmlTextWriter output)

     {

        if (this.checkpanlindrome())

        {

           output.Write("Bu bir palindromdur: <br />");

           output.Write("<FONT size=5 color=Blue>");

           output.Write("<B>");

           output.Write(Text);

           output.Write("</B>");

           output.Write("</FONT>");

        }

        else

       {

          output.Write("This is not a palindrome: <br />");

          output.Write("<FONT size=5 color=red>");

          output.Write("<B>");

          output.Write(Text);

          output.Write("</B>");

          output.Write("</FONT>");

       }

    }

    protected bool checkpanlindrome()

    {

       if (this.Text != null)

       {

          String str = this.Text;

          String strtoupper = Text.ToUpper();

          char[] rev = strtoupper.ToCharArray();

          Array.Reverse(rev);

          String strrev = new String(rev);

          if (strtoupper == strrev)

          {

             return true;

          }

          else{

             return false;

          }

       }

       else

       {

          return false;

       }

    }

  }

}


Kodları değiştirdiğinize projenizi build etmeyi unutmayınız. Bu işlem değişiklikleri projenize yansıtacaktır. Sayfamıza bir adet textbox ve buton ekliyoruz, butona tıklandığında bir text üreteceğiz.

<form id="form1" runat="server">

<div>

   Enter a word:

   <br />

   <asp:TextBox ID="TextBox1" runat="server" style="width:198px">

   </asp:TextBox>

   <br />

   <br />

   <asp:Button ID="Button1" runat="server"

               onclick="Button1_Click"

               Text="Check Palindrome" style="width:132px" />

   <br />

   <br />

   <ccs:ServerControl1 ID="ServerControl11"

               runat="server" Text = "" />

</div>

</form>

Code behind :

protected void Button1_Click(object sender, EventArgs e)

{

     this.ServerControl11.Text = this.TextBox1.Text;

}

Ekran çıktısı  :

Kolay Gelsin.

Kaynak : http://www.tutorialspoint.com/asp.net/asp.net_custom_controls.htm

ASP.NET ile Jquery autocomplete yapmak (1)

Bir önceki makalemde asp.net ile autocomplete kullanımını işlemiştim. Dileyen Ajax AutoComplete Extender ile gelişmiş arama linkinden ilgili makaleyi inceleyebilir. Yine aynı konunun devamı olan bir makale daha yazıyorum. Ancak bu sefer Jquery kullanarak ve daha gelişmiş bir arama motoru yapacağız. Daha önce bu işlemi Ajax AutoComplete Extender ile yapmışken şimdi neden tekrar yaptığımı merak edebilirsiniz. Birinci sebebi bu modül daha gelişmiş olacak. Bir web servis kullanacağız.

Ajax AutoComplete Extender ile gelişmiş arama

Ajax AutoComplete Extender ile gelişmiş arama

ASP.NET AJAX AutoComplete extender herhangi bir TextBox kontrolüne bağlanabilir ve bundan sonra  textbox'a yazılan yazı ile başlayan kelimeyle ile ilişkilendirilecek ve pop up panelde bu ilişkili kelimeler gözükecektir.

Dropdown içerisinde web servis tarafından sağlanan aday kelimeler textbox içine yerleştirilecektir.

Orantılı resim küçültme

Sitemize resim yada fotoğraf ekleyeceğimiz zaman boyutlarıyla oynamak isteriz. İçerisine ilan girilen bir sitemiz olduğunu varsayalım. Bu durumda kullanıcılar cep telefonu ve fotoğraf makinelerinden çektikleri fotoğrafları olduğu gibi siteye yüklemek isteyecektir. Bu fotoğrafları orjinal halleriyle sitemize yüklememizin intihardan farkı yok. Dolayısıyla bunların boyutlarını ve ölçeklerini küçültüp sitemize uygun hale getirmemiz gerekiyor.

HttpHandlers (ASHX dosyası) içinde Session getirmek

ASHX yada HttpHandler dosyasından Session çağırmak istediğiniz zaman  IReadOnlySessionState uygulamanız gerekiyor.

<% @ webhandler language="C#" class="DownloadHandler" %>

using System;
using System.Web;
using System.Web.SessionState;

public class DownloadHandler : IHttpHandler, IReadOnlySessionState
{
public bool IsReusable { get { return true; } }

public void ProcessRequest(HttpContext ctx)
{
ctx.Response.Write(ctx.Session["Abdulhamit"]);
}
}

Kaynak : http://www.hanselman.com/blog/GettingSessionStateInHttpHandlersASHXFiles.aspx

Asp.NET Twitter Login

Bu makalede ASP.Net ile Twitter ile login nasıl olunuru göreceğiz. Ücretsiz ASPSnippets Twitter API ve Twitter OAUTH APIlerini kullarak  Twitter hesap detayları, profil bilgileri, resim, ekran ismi, Twitter Id, ad, açıklama, arkadaş sayısı ve takipçi sayısı verilerini çekeceğiz.

Html form button elemanını code behind sayfasında çağırmak

Aklınıza <asp:button> elemanı varken bunu neden yapayım diye bir soru gelebilir. Ancak durum hiçte göründüğü gibi değil bir örnek vermek gerekirse. Diyelim ki bir formunuz var ve bu formdaki alanların kontrolünü veya doğrulamasını Html5 validation özelliklerini kullanarak yaptınız. Fakat sayfanıza iki veya daha fazla butonlarınız var. Birinci buton formu post etsede ikinci buton farklı bir işlev yapıyor olacak.  İkinci butona tıkladığınızda sizden validation kontrollerini doğrulamanız istenecek fakat siz bu butonlar başka bir olay yapıyordunuz. İlk çözüm butona formnovalidation eklemek olacaktır. Bu sayede bu buton bağımsız olarak çağrılmış olacak. Sayfayı chrome ve firefox'ta açtınız. Herşey yolunda fakat bir de IE'de açın. O da ne ? Çalışmıyor mu ? Merak etmeyin bununda çözümü var. İsterseniz çözümü bu http://msdn.microsoft.com/en-us/library/ie/hh772935(v=vs.85).aspx bağlatıdan detaylı olarak inceleyebilirsiniz. IE 'de <asp:button> elamanına verilen bu özellik desteklenmiyor. Html form elemanı olan bir elemana verildiğinde ise tıkır tıkır çalışıyor. Önce html butonumuza formnovalidate özeliği atıyoruz daha sonra onclick="__doPostBack('btnSubmit', 'Giris');" özelliğini atıyoruzki post olduğunda code behinde sayfasından çağrılabilsin.

Code behind sayfamızda reques form diyerek butonumuzu çağırdıktan sonra çalışmasını istediğimiz metod veya fonksiyonu çağırıyoruz.

Hmtl :

<input id="Submit1" type="submit" value="submit" formnovalidate name="save" runat="server" onclick="__doPostBack('btnSubmit', 'Giris');"/>

Code behind :

protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack)
{
if (Convert.ToString(Request.Form["__EVENTARGUMENT"]) == "Giris")
{
Face_log();//submit action here
}
}
}

public void Face_log()
{
Response.Redirect("defaul.aspx");
}

Kolay gelsin

Sorular Cevaplar (1)

ResolveUrl - ResolveClientUrl farkı nedir ?

ResolveUrl root'a bağlı url yaratır. ResolveClientUrl ise bulunulan sayfaya bağlı url yaratır.

@font-face ie'de neden çalışmaz ?

Projenizde yer alan fontun uzantısı .otf değilse ie'de çalışmayacaktır.

Html5 novalidate ie'de çalışmıyor

W3scholls yazdığına göre novalidate ie 10 tarafından destekleniyormuş. IE 11 yani son ie'nin son versiyonunda bile hala desteklenmiyor. Aşağıdaki kullanım işinizi görecektir.

<input type="submit" formnovalidate name="save"  />

Bu http://msdn.microsoft.com/en-us/library/ie/hh772935(v=vs.85).aspx bağlantıdan detaylı bilgi edinebilirsiniz.

Ayrıca konuyla ilgili http://abdulhamiterdogan.wordpress.com/2014/10/14/html-form-button-elemanini-code-behind-sayfasinda-cagirmak/ makalede işinize yarayabilir.

Css ile input button value text 'i nasıl gizlenir ?

text-indent:-9999px;

IE Facebook login olduktan sonra boş pop up döndürüyor.

IE -> Internet Options -> Security tab -> Local intranet -> (check) Enable protected mode

InterpolationMode ne demek ?

Bir resim döndürüleceği veya ölçeklendirileceği zaman kullanılan algoritmayı belirleyen numarlandırmadır.

HighQualityBicubic ne demek ?

Bu mod resimleri yüksek kalitede dönüştürür.

Javascript ile önceki sayfaya nasıl dönerim ? 

<script>
     function goBack() {
      window.history.back()
}
</script>

Javascript request url değeri nasıl alınır ? 

var data = '<%=this.Request.QueryString["deger"]%>';

Master Page'de yer alan User Control nasıl gizlenir ? 

 ((UserControl)this.Master.FindControl("AutoComplete1")).Visible = false;

ASP.Net'de belirli bir session nasıl kapatılır ?

Session.Remove("SessionDegeri") yada Session["SessionDegeri"] = null;

fckEditor'de araç çubuğunu kapatıp açan butonu nasıl kaldırabilirim ?

fckconfig.js > FCKConfig.ToolbarCanCollapse = false ;

fckEditor kopyalama ve yapıştırma (Copy-Paste) nasıl engellenir ? 

fckconfig.js :


FCKConfig.Keystrokes = [

  [ CTRL + 67 /C/, false ],

  [CTRL + 86 /V/, false],

] ;

Bir javascript içerisindeki object sayısı nasıl hesaplanır ?

Object.keys(myObject).length

Javascript içerisinde bir değişkenin tanımlı olup olmadığı (defined/undefined) nasıl kontrol edilir.

if(typeof degisken === "defined") / if(typeof degisken === "undefined")

Textbox filtreleme (mask) nasıl yapılır ?

<input type="text" name="field-name" data-mask="00/00/0000" />

data-mask içerisindeki karakter ve sayıları değiştirerek size lazım olan türe göre maskeleyebilirsiniz.

Javascript bind ne yapar ?

bind() bir yada daha fazla olay tutucuyu (event handler) seçilen elemana bağlayarak, olay (event) meydana geldiğinde fonksiyonun çalışmasını sağlar.

JQuery 1.7 versiyondan sonra on() metodu bu metodun yerine tercih edilmiştir.

Html5 ile dialogbox yapmak

Bu makalemizde Html, Css ve JavaScript kullanarak dialog box yapmayı inceleyeceğiz.

Htmle aşinalığız var ise meşhur alert() fonkisyonunu kullanmışsınızdır. Şayet alert ("Merhaba Dünya") yazarsanız aşağıdaki gibi bir dialog box dönecektir.

Label doluyor fakat code-behind sayfasında boş dönüyor

Label client formunun bir elemanı olmadığı için code-behind sayfasından çağrılamaz. Bunun yerine hiddenfield (input type="hidden" elementin yerine geçer) yada texbox (input type="text" elamanın yerine geçer) kullanılır. Örnek kullanım:

CheckBox display="none" sorunu

Javascript kodları ile checkbox nesnesi görünmez yapmak için display özelliğinden yararlanırız. Ancak bu özellik label ve textbox ile olan kullanımdan biraz farklıdır. Örn ;

 document.getElementById("<%= TextBox1.ClientID %>").style.display = "none";

Yukarıdaki satır bir textbox veya label kontrolünü görünmez yapmak için yeterlidir. Fakat Aynı yöntemi checkBox'a uyguladığımızda checkbox textinin silinmediğini ve check işareti konulan kutucuğun kaybolduğunu göreceğiz. Tüm checkbox'ı görünmez yapmak için :

 document.getElementById("<%= TextBox1.ClientID %>").parentNode.style.display = "none";

şeklinde bir kullanım işimizi görecektir.

Kolay gelsin

ASP.Net Html5 girilen değerleri sınırlama

Bazen kullanıcıdan textboxa sınırlı değer girmesini isteriz. Bu durumu karmaşık yollara sapmadan ve hızlı bir şekilde çözmek için Html5 özelliklerinden faydalanabiliriz. Bunun için aslında toolbox'ta yer alan Validation kontrollerinden yararlanabilirdik fakat bu kontroller server-Side çalıştığı için efektif değiller ve kod kalabalığına neden oluyorlar. En iyisi Html5'in bu özelliğinden faydalanmak olacaktır. Html5 ile gelen tüm özellikler her tarayıcı tarafından desteklenmediği için yazdığımız kodları silip baştan yapmamak için dikkatli olmak lazım ama bu özellik kullanılabilir.

Şifreyi 6 karakter ile sınırlama
<asp:TextBox ID="txbSifre" runat="server"  TextMode="Password" Width="200px"
title="Şifre en az 6 karakterli olmalıdır" pattern="^.{6}$" > </asp:TextBox>

Şifreyi 6-10 arası karakter ile sınırlama

<asp:TextBox ID="txbSifre" runat="server"  TextMode="Password" Width="200px"
title="Şifre en az 6 karakterli olmalıdır" pattern="^.{6,10}$" > </asp:TextBox>

Asp.Net Javascript ile label ve textbox değerini değiştirmek

1. Textbox çağrılır
   
    var test = document.getElementById("<%= TextBox1.ClientID %>");
   
   test.value = "İçerik"; //içerik değiştirilir
   
   


2. Label çağrılır
   
   var test = document.getElementById("<%= Label1.ClientID %>"); 
   
   test.InnerHtml  = "İçerik"; //içerik değiştirilir
   

Aradaki fark label kontrolüne değer verirken InnerHtml, textbox'ta ise value metodlarını kullanmaktır.

Not : Bazen verdiğimiz değerlerin kullanıcıya görünmesini istemeyiz. Bunun için properties tablosundan visible özelliğini false yapmamız yeterliydi. Ancak bu durumda Javascript kontrolümüzü tanımayacak veya görmeyecektir. Peki ne yapacağız ? Gizleme özelliğini JavaScript kodları içerisinden verirsek bu sorunu aşmış olur. Örn ;

Label1.style.display = "none";

Kolay Gelsin

Html5 validation buton click sorunu

Html5 validation (doğrulama) kontrolleri bizi birçok Javascript kodu yazmaktan veya Ajax araçlarını kullanmaktan kurtaran mükemmel özelliklere sahiplerdir. Kullanımları oldukça basittir. Makalenin amacı bu olmadığı için detaya girmiyorum fakat bu konu hakkında güzel bir makale için linke göz atabilirsiniz.

http://www.codeproject.com/Tips/543391/HTML-for-Asp-net-Csharp-Developers

Html5 özellikerini kullanmak oldukça kolaydır. Özellikler Client-side çalıştığı için performans açısından çok etkilidir. Ancak en büyük sorunu farklı tarayıcılara olan uyumsuzluk problemidir. İnşallah tüm tarayıcılar en kısa zamanda entegre olurlar.
Bunun  yanında bir problem daha var ki bazen saç baş yoldurabilir. Sayfanızda farklı eventlere birden fazla buton varsa hangisine tıklarsanız tıklayın sizden validation kontrolü eklenmiş textbox doğrulaması istenecektir. Çözümü oldukça basit;

<asp:ImageButton ID="ImageButton1" runat="server" formnovalidate="formnovalidate" />


Kolay gelsin

Şifre birkaç kez yanlış girildikten sonra Captcha çıkarmak

Login formunda spam-botları engellemek için captcha kullanımı daha önce görmüştük. reCaptcha kullanımı linkine tıklayarak ilgili makaleye göz gezdirebilirsiniz. Şimdi de kullanıcı şifresi üç kere yanlış girildikten sonra captca doğrulmasının kullanılmasını görelim.


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

    </div>

        <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>

        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />

    </form>

</body>

</html>

Code Behined

using System;

public partial class _Default : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

        lblResult.Visible = false;

    }

    protected void Button1_Click(object sender, EventArgs e)

    {

        int c=1;

        if (TextBox1.Text == "sharad" && TextBox2.Text == "gupta")

        {

            Response.Redirect("a.aspx");

        }

        else

        {

            lblResult.Visible = true;

            lblResult.Text = "Kullanıcı adı veya şifre hatalı";

            Session["counter"] = Convert.ToInt32(Session["counter"] )+ c;

            if (Convert.ToInt32(Session["counter"]) > 5)

            {

RecaptchaControl1.Visible = true;
RecaptchaControl1.Validate();
if (RecaptchaControl1.IsValid)
{
lblResult.Text = "OKEY"; return;
}

else
return;

            }

        }

    }

}

Biz burada değerimizi Session ile sakladık. Dilerseniz alternatif yöntemleri kullanabilirsiniz. Aşağıdaki linkte viewstate kullanımı bu alternatiflere bir örnektir.

POSTBACK ESNASINDA DEĞERLER NASIL SAKLANIR ? VİEWSTATE NEDİR ?

Postback esnasında değerler nasıl saklanır ? Viewstate nedir ?

Postback sorusu Asp.Net ile ilgili konuların en başında gelir. Postback işlemi gerçekleştiğinde (örn : bir formdaki butona tıklandığında) code-behind içerisinde yapılandırılan değişken değerler istemci taraflı sistem belleğinden (the memory of the client system) silinir. Bu konsept Windows-based (Windows tabanlı)  uygulamaların işleyişinden farklı çalışır. Windows tabanlı uygulamalarda oluşturulan değişken değerler serbest bırakılana kadar yada garbage collector (çöp toplayıcı) tarafından silinene kadar yada belli kodlar tarafından imha edilene ve sonlandırılana kadar bellekte kalmaya devam ederler.

Ancak web uygulamalarında değişken değerler kolayca yok olur. Fakat bunları saklamakta oldukça basittir. Viewstate nesnesi kullanarak kolayca saklayabiliriz. Postback çağırılmadan önce değişken değerler Viewstate nesnesinde saklanır. İstemci sayfada saklanan değer geri alınabilir. Aşağıdaki örnek kodda görebilrsiniz.

//Postback olmadan önce değer viewstate içinde saklanır
ViewState("SomeVar") = txtFirstName.text;

//Postback olduktan sonra saklanan değer çağrılır
String strFirstName = ViewState("SomeVar").ToString();

Burada dikkat edilmesi gereken husus, viewstate içerisinde saklanan değer Asp.Net tarafından gizli bir değişken şeklinde
diğer sayfalara taşınır. İdeal olan kullanım, datasetler gibi büyük veriler, viewstate içerisinde saklanmamaklıdır. Çünkü performansı düşürürler.

Kolay gelsin...