1: public class JavaScriptKodu

  2: {

  3:     private Page page;

  4: 

  5:     private string StartScript;

  6:     private string EndScript;

  7: 

  8:     public JavaScriptKodu(Page ThisPage)

  9:     {

 10:         page = ThisPage;

 11:         StartScript = "<script language='javascript' type='text/javascript'> \r\n";

 12:         EndScript =  "</Script>";

 13:     }

 14: 

 15:     private string ClearText(string myString)

 16:     {

 17:         myString = myString.Replace("\r\n", String.Empty);

 18:         myString = myString.Replace("\n", String.Empty);

 19:         myString = myString.Replace("\r", String.Empty);

 20:         myString = myString.Replace("\"", "\\\"");

 21:         myString = myString.Replace("\'", "\\\'");

 22:         return myString;

 23:     }

 24: 

 25:     public void ShowAlert(string mesaj)

 26:     {

 27:         string script = "     alert(\" " + ClearText(mesaj) + " \");";

 28:         page.ClientScript.RegisterStartupScript(typeof(string), "key", script);

 29:     }

 30: }

 31: 

Web tabanlı uygulamalar geliştirilirken karşılaşılan zorluklar her zaman bizi araştırmaya ve yeni birşeyler öğrenmeye zorluyor. Bilişim dünyası ucu bucağı olmayan bir evren, her geçen gün yeni teknolojiler, yeni teknikler, yeni methotlar çıkıyor.
    Aslında Css ve JavaScript kullanılarak yapılan Dialog Box çok da yeni bir şey değil ama ben bu konuyu bloğumda işlemek istedim.

 
Bunlar Css Kodlarımız:

 1:  <style>
 2:  #myBox {
 3:      visibility: hidden;
 4:      position: absolute;
 5:      left: 0px;
 6:      top: 0px;
 7:      width:100%;
 8:      height:100%;
 9:      text-align:center;
10:      z-index: 1000;
11:  }

12:  #myBox div
13:  {
14:      border: 1px double #98B5E2;
15:      width: 450px;
16:      margin: 100px auto;
17:      background-color: #C2D3FC;
18:      padding: 15px;
19:      text-align: left;
20:  }   
21:  </style>

JavaScript Kodlarımız :

   1:  <script type="text/javascript"> 
   2:   function acKapa() { 
   3:     el = document.getElementById("myBox"); 
   4:     el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";} 
   5:  </script>

HTML Kodlarımız : 

   1:  <input id="Button1" onclick='acKapa()' type="button" value="Aç" /> 
   2:  <div id="myBox"> 
   3:      <div align="left"> 
   4:          <img src="about.png" align="left" alt="Error" border="0" /> 
   5:          <center> 
   6:              <strong>Bilgi</strong> 
   7:          </center> 
   8:          <p align="left"> 
   9:              Mesajınız mesajınız mesajınız mesajınız mesajınız mesajınız  
  10:          </p> 
  11:          <center> 
  12:              <input id="Kapat" onclick='acKapa()' type="button" value="Kapat" /> 
  13:         </center> 
  14:      </div> 
  15:  </div> 

     Gridview üzerinde kayıt eklemek, kayıt silme veya kayıt düzeltme işlemleri yapmak isteyebiliriz. Mesela bir alış-veriş sitemiz var ve sepete eklenen 3 üründen birisini yanlışlıkla ekledik ve silmemiz gerekiyor ama yanlış ürünü silersek tekrar ürünler sayfasına gidip eklememiz gerekecek bu da bazılarına göre sıkıcı bir iş olabilir. Ziyaretcinin yanlış birşeyler yapmasını engellemek için; daha kullanışlı, daha user-friendly bir sistem kurmamız gerekmekte. 

       Grid üzerinde bulunan kayıtların her birini sepetimizde bulunan birer ürün olarak farzedelim. Yanlışlıkla ekledigimiz ürünün Del butonu yerine yanlışlıkla bir sonraki ürünün Del butonuna bastık, eğer "Silmek istediğinizden emin misiniz?" sorusunu sormadan direk kaydın silinmesine izin vermiş olsaydık, ziyaretcinin tekrar ürünler sayfasına gidip o ürünü eklemesi gerekecekti. 
  

  1: <asp:TemplateField> 

  2:  <ItemTemplate> 

  3:   <input id="btnDel" type="button" value="Del" onclick=<%# "javascript:ShowConfrim('" + Eval("Id").ToString() + "')"  %> /> 

  4:  </ItemTemplate> 

  5: </asp:TemplateField>

  6: 

  1: function ShowConfrim (Id){ 

  2:    if (confirm(Id + ' Id  li kaydı silmek istediginizden emin misiniz?')){ 

  3:         DoPostBack(Id); 

  4:    } 

  5: } 

    İnternette elimizin altında onlarca hazır JavaScript Fremework bulunmakta. Bu frameworkler belkide de en çok alkış alanı :) Prototype.
Ben bu yazım da prototype' ın Ajax methodlarına değineceğim. Bunun için ufak bir örnek hazırladım.
Senoryomuz şu şekilde;
     Ekrandan iki adet textbox olacak ve biz bu textboxlara iki adet sayı girip Topla butonuna basacağız. Sonucu ise prototype Ajax methodları yardımı ile kendi sayfamıza getirecegiz.

Default.aspx :

    <script src="prototype-1.6.0.2.js" language="JavaScript" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
    function Hesapla(){
        var Sayi1 = $('TextBox1');
        var Sayi2 = $('TextBox2');
        Topla(Sayi1.value,Sayi2.value);       
    }
   
    function Topla(Sayi1,Sayi2) {
      var url = "ToplaVeGonder.aspx?Sayi1=" + Sayi1 + "&Sayi2=" + Sayi2 ;
      var AjaxObjesi = new Ajax.Request(
            url,
            {
                  method: 'get',
                  onFailure: HataOlustu,
                  onComplete: Sonuc
                  });}
      var Sonuc = function(orjinalRequest) {
      var islemCiktisi = orjinalRequest.responseText;
      $('Sonuc').innerHTML = ' Sonuc :' + islemCiktisi;
      }
      var HataOlustu = function(orjinalRequest) {
          alert('Hata ' + orjinalRequest.status + ' -- ' + orjinalRequest.statusText);
      }
    </script>

ama asıl işi yapacak olan sayfamız ToplaVeGonder.aspx sayfasıdır.

ToplaVeGonder.aspx.cs

    protected void Page_Load(object sender, EventArgs e)
    {
        int Sayi1 = int.Parse(Request.QueryString["Sayi1"].ToString());
        int Sayi2 = int.Parse(Request.QueryString["Sayi2"].ToString());

        this.Sonuc.InnerText = (Sayi1 + Sayi1).ToString();
    }

İşin aslı şu; Ajax.Request methodu ile ToplaVeGonder.aspx sayfasına iki adet querystring den parametre gönderiyoruz (var url = "ToplaVeGonder.aspx?Sayi1=" + Sayi1 + "&Sayi2=" + Sayi2 ;
) bu parametreleri Request.QueryString["Sayi1"] ve Request.QueryString["Sayi2"] ile alıp Toplama işlemini yaptıktan sonra sonucu ekrana yazdırıyoruz ve elimizde html satırları oluşuyor bu html satırlarınıda giriş ekranımızdaki divin içerisine innerHtml diyerek yazdırıyoruz.

    Tamamen JavaScript ve css ile oluşturulmuş güzel bir çalışma



Kaynak kodlarını inceledigimizde görülecegi üzere validationun alt yapısı tamamen regex ile oluşturulmuş. Bizde uygulamızın senaryosuna göre regex oluşturabilir ve istegimiz kalıba uygun verilerin girilmesine izin verebiliriz. 

inlineMsg('name','You must enter your name.',2);


Kaynak kodlar ve Ayrıntılı bilgi için leigeber

         using System.Text.RegularExpressions; 


        public bool IsEmailAdress(String emailAdress)
        {
            string MailAdressFormat = @"\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*";
            Regex regEx = new Regex(MailAdressFormat);
            return regEx.IsMatch(emailAdress);
        }
        public bool IsDate(String strDate)
        {
            Regex objAlphaPattern = new Regex(@"(^|\s|\()((([1-9]){1}|([0][1-9]){1}|
([1][012]){1}){1}[\/-]((2[0-9]){1}|(3[01]){1}|([01][1-9]){1}|([1-9]){1}){1}[\/-](((19|20)(
[0-9][0-9]){1}|([0-9][0-9]){1})){1}(([\s|\)|:])|(^|\s|\()((([0-9]){1}|([0][1-9]){1}|([1][0
12]){1}){1}[\/-](([11-31]){1}|([01][1-9]){1}|([1-9]){1}){1}[\/-](((19|20)([0-9][0-9]){1}|(
[0-9][0-9]){1})){1}(([\s|\)|:|$|\>])){1}){1}){1}){1}");
            return !objAlphaPattern.IsMatch(strDate);
        }