ASP.NET 2.0

Merhaba arkadaşlar bu makalemde AJAX Control Toolkit nesnelerinden MaskedEdit ve MaskedEditValidator Extender nesnelerini inceleyeceğiz.

MaskedEdit:

MaskedEdit kontrolü textbox üzerinde giris denetimleri saglayan bir ajax nesnesidir. Bu nesne textboxlara uygulandıgında seçilen veri tipine baglı olarak kullanıcının girecegi deger maskelenir. Girilen verilerin dogrulanması için MaskedEditValidator nesnesini kullanırız.

Bu nesneyi nerelerde kullanabiliriz? Bana kalırsa hemen hemen her yerde. Tarih girislerinde, para birimi girislerinde, sadece yazı yada sadece numeric degerleri girmek istedigimiz her yerde bu nesneyi kullanabiliriz.

Kullanımı:

<ajaxToolkit:MaskedEditExtender
    TargetControlID="TextBox2" 
    Mask="99,999.99"
    MessageValidatorTip="true" 
    OnFocusCssClass="MaskedEditFocus" 
    OnInvalidCssClass="MaskedEditError"
    MaskType="Number" 
    InputDirection="RightToLeft" 
    AcceptNegative="Left" 
    DisplayMoney="Left"/>

• Maskeleme Karakterleri

            9 - Sadece numeric deger
            L - Harf
            $ - Harf yada bosluk
            C - Custom karakter(büyük küçük harf duyarlı)
            A - Custom karakter yada harf
            N - Custom karakter yada numeric deger
            ? - herhangi bir karakter

• Maskeleme Araçları

             /    - Tarih Ayıracı
             :    - Zaman ayıracı
             .    - Ondalok ayıracı
             ,    - Binlik ayıracı

• DisplayMoney: Para biriminin nasıl gösterilecegini belirler. (sol, sag, none)
• InputDirection: Veri girisinin baslangıç yönünü belirler.
• MaskType: Maskeleme tipini belirtir.

            None - Valdiation yok
            Number - Numeric validation
            Date - Tarih validation
            Time - Zaman validation

• MessageValidatorTip: Textboxın içerigi degistiginde görüntülenecek mesaj.

MaskedEditValidator:

Maskelenen textboxdaki verilerin dogrulugunu kontrol etmek için kullanılan kontroldür.

Kullanımı:

<ajaxToolkit:MaskedEditValidator
    ControlExtender="MaskedEditExtender2"
    ControlToValidate="TextBox2" 
    IsValidEmpty="False" 
    MaximumValue="12000" 
    EmptyValueMessage="Number is required"
    InvalidValueMessage="Number is invalid" 
    MaximumValueMessage="Number > 12.000"
    MinimumValueMessage="Number < -100" 
    MinimumValue="-100" ValidationGroup="Demo1"
    Display="Dynamic" 
    TooltipMessage="Input a number: -100 up to 12.000"/>

Özellikleri:

• ControlToValidate - Kontrol edilecek olan textbox'ın ID'si
• ControlExtender - Maskeleme yapan Extenderin ID'si
• ClientValidationFunction - Custom validator içim kullanolan fonksiyon
• InitialValue - Validation'un baslangıç degeri. Varsayılanı bostur
• IsValidEmpty - Textbox bossa requiredfield validator'ı çalısır.
• MaximumValue - Maskeleme için max. Deger. (CompareValidator çalısır)
• MinimumValue - Maskeleme için min. Deger. (CompareValidator çalısır)
• MessageEmpty - RequiredValidator çalıstıgında verillecek mesaj
• MaximumValueMessage - Max degerden büyük bir deger girildiginde verilecek mesaj. (CompareValidator çalısır)
• MinimumValueMessage - Min degerden büyük bir deger girildiginde verilecek mesaj. (CompareValidator çalısır)
• InvalidValueMessage - Geçersiz deger girildiginde görüntülenecek mesaj
• TooltipMessage - textbox üzerinde gelince yada bosken görüntülenecek olan tooltip degeri.
• ValidationExpression - Veriyi dogrulamak için kullanılan Regular expression.
  

Örnek:

Örnegimizde tarih alanına veri girerek istedigimiz kritere uygun olup olmadıgını kontrol edip verilerin dogrulanmasını, eger girilen veri yanlısssa kullanıcının bilgilendirilmesini saglayacagız.

Örnegimize geçelim ve yeni bir Ajax Projesi açalım. Sayfamıza script manager, textbox, MaskedEditExtender, MaskedEditValidationExtender koyalım.



Simdi maskleme ve validation için gerekli kodları yazalım. Bunun için HTML kod kısmına geçelim.

Maskeleme islemi




Validation islemi



Projemizi çalıstıralım; ve Geçersiz bir tarih girelim



Simdi belirtilen tarihten büyük bir tarih girelim;



Simdi belirtilen tarihten küçük bir tarih girelim;



Evet gerçekten çok kullanıslı 2 kontrol. Ufak tefek bugları var ama zamanla düzeleceginden hiç kuskum yok :)

Bu makalenin de sonuna geldik, baska bir makalede görüsmek üzere basarı ve iyi günler dilerim.

Sem GÖKSU
MCP | MCAD.NET | MCTS

Örnek Kodlar için mail adresimi kullanabilirsiniz

askisem@hotmail.com

Kaynaklar

http://ajax.asp.net

Merhaba arkadaşlar, bu makalemizde ajax control toolkit’in nesnelerinden Tab Extender nesnesini ele alıp inceleyeceğiz.

Tab Container, sayfa içeriklerini organize etmek için  tablar olusturmamızı saglayan bir  AJAX nesnesidir. Sayfa içerisinde birden fazla sayfa varmıs gibi hareket etmemizi saglar.

Her TabPanel içerikleri görüntülemek için HeaderTemplatler olustururuz. HeaderTemplateler içerisinde kullanıcıya o taba ait bilgiyi gösteririz. Özellikler E-ticaret sitelerinde sıkça kullanılır. Kulllanıcıya tek bir sayfa içerisinde farklı tablar içersinde farklı bilgileri sunmak için oldukça kullanıslıdır. (Ürün açıklaması, ödeme seçenekleri, resimler yorumlar vs...) 

Kullanımı:



Özellikleri:

TabContainer Özellikleri

• ActiveTabChanged (Event) - Aktif tab degistiginde tetiklenecek olan olay
• OnClientActiveTabChanged - tabChanged eventi çalıstıgında client - side çalısacak javascript fonksiyonunun ismidir.
• CssClass - Tablara uygulanacak olan Sitil Classı
• ActiveTabIndex - Aktif olarak gelecek Tabın Index numarası
• Height - Tabın içerik yükseklik boyutu
• Width - Tabın içerik genislik boyutu
• ScrollBars - Scrollbar özelliginin olup olmayacagını belirler.
  

TabPanel Özellikleri

• Enabled - Tabın aktif/pasif durumunu ayarlar
• OnClientClick - Tab Eventi çalıstıgında client - side çalısacak javascript fonksiyonunun ismidir.
• HeaderText - Tabın Baslıgına verilecek isim 
• HeaderTemplate - Baslık Kısmında görüntülenmesini istedigimiz kısım.
• ContentTemplate - Içerigin görüntülenecegi kısım.
  

Örnek:

Örnegimzde E-ticaret sitelerinde sıklıkla gördügümüz Ürün bölümlerinde kullanılarn ürün detayı bilgilerini olusturacagız. Bunun için AJAX TAB Extender nesnesini kullanacagız. Ürün özelliklerini listeleyip ayru ayrı tablar olusturup ürün ile ilgili bilgileri kullanıcıya sunacagız.

Ilk olarak bir ajax projesi olusturalım.



Projemizi olusturduktan sonra sayfamıza bir adet TabContainer ekleyelim.



Evet simdi Tablarımızı olusturalım. Sayfamızın HTML kısmına gidelim ve TabContainerin özelliklerini ayarlayalım.



Kullanıcıya 3 farklı bilgiyi 3 farklı tabda gösterecegiz. Ürün Özellikleri 1. tabda, Resmler 2. tabda, yorumlarda 3. tabda görüntülenecek.

Simdi projemizi çalıstıralım. Ürün özellikleri görüntülenecek



Resimler tabına geçelim;



Simdide yorumlara bakalım



Evet AJAX hayatımızı kolaylastırmaya devam ediyor J Bu makalenin de sonuna geldik, baska bir makalede görüsmek üzere basarı ve iyi günler dilerim.

Sem GÖKSU
MCP | MCAD.NET | MCTS

Örnek Kodlar için mail adresimi kullanabilirsiniz

askisem@hotmail.com

Kaynaklar

http://ajax.asp.net 

Merhaba arkadaşlar, bu ajax control toolkit’in nesnelerinden Calendar extender nesnesini ele alacağız. Java script ile bizi çok fazla uğraştıran calendar(takvim)’i ajax ile kullanmak artık çok kolay.

Calendar textbox kontollerine uygulanan bir AJAX nesnesidir. Bu bize client-size çalısan kisisellestirilebiln ve fonksiyonel takvim nesnesini sunr. Textboxa tıklandıgında yada baska bir kontrol ile tetiklendiginde popup olarak gösterilir.


Ek olarak ayları ve yılları degistirebilir, baska ay ve yıl tarihleri seçebilirsiniz. Yine Calendar nesnesine sitil verebilir kullanıcıya görsel olarak daha güzel olarak sunabilirsiniz.


Asagıda kullanımı için özellikler verilmistir.


Kullanımı:

TargetControlID="Date1"
CssClass="ClassSem"
Format="MMMM d, yyyy"
PopupButtonID="Image1" />
Özellikleri:

• TargetControlID - Calendar Objesinin Uygulanacagı Textbox.
• CssClass - Calendar objesinde kullanılacak Sitilin Adı
• Format - Görüntülenecek olan Tarih formatı.
• PopupButtonID - Eger bir buton veya bir image'a tıklandıgında calendarın açılmasını istersek bu özelligi kullanırız. Eger kullanmak istemezsek bu özelligi bos bırakırız.

Örnek:

Evet arkadaslar, nesnemizi ve özelliklerini tanıdıktan sonra artık kontrolümüz ile ilgili örnek yapalım. Ilk olarak bir ajax projesi olusturalım.



Örnegimizde calendar nesnesini 1. textboxa focus oldugunda 2. de ise bir image'e tıklandıgında görüntüleyecegiz. Formumuza 1, script maneger, 2 textbox, 2 Calendar extender 1 image ekleyelim.



Evet benim yapmıs oldugum tasarım yukarıdaki gibidir.


Simdi Calendarları görüntülemek için gerekli özellikleri yazalım.


Textbox üzerine tıklandıgında;



Image tıklandıgında;



Projemizi çalıstıralım.

1. textbox üzerine tıkladıgımızda calendar nesnesi geldi.



2. image üzerine tıklıyoruz.


Evet arkadaslar gördügümüz gibi bu islemi de yapmak çok kolay. Ajaxın nimetlerinden yatarlanmaya devam ediyoruz :)

Bu makalenin de sonuna geldik, baska bir makalede görüsmek üzere basarı ve iyi günler dilerim.

Sem GÖKSU
MCP | MCAD.NET | MCTS

Örnek Kodlar için mail adresimi kullanabilirsiniz

askisem@hotmail.com

Kaynaklar

http://ajax.asp.net

Merhaba arkadaşlar, bu makalemizde ajax control toolkit’in nesnelerinden Validator Callout Extender nesnesini ele alacağız.

Validator Callout Extender

Açıklama
ValidatorCallout nesnesi, varolan ASP.NET Valditarları genisleten bir AJAX nesnesidir. Bu kontrolü herhangi bir Validator nesnesine baglayarak kullanabilirsiniz.

Validator Callout Extender  Postback olmadan verilerin dogru girilip girilmedigini kontrol eder.

Özellikleri

·                  TargetControlID - Uygulanacak olan Validator Nesnesinin ID'si

·                  Width - Görüntülenecek olan Uyarı Mesajının Genisigi

·                  HighlightCssClass - Uyarı mesajının Sitili

·                  WarningIconImageUrl - Hata Mesajına Ait Resmin yolu

·                  CloseImageUrl - Kapat butonuna ait Resmin yolu

Kullanımı

<ajaxToolkit:ValidatorCalloutExtender
   runat="Server"
    ID="PNReqE"
    TargetControlID="rfMail"
    Width="350px"
    HighlightCssClass="highlight"
    WarningIconImageUrl="warning.gif"
   CloseImageUrl="close.gif" />

Örnek; Ilk olarak bir Ajax tabanlı bir Asp.net projesi olusturalım.

Projemizi olusturduktan sonra örnekte yapacaklarımıza geçelim. Maillist olusturan bir sayfa tasarlayalım. Burada kullanıcı gerekli alanları doldurdu mu yada geçerli bir mail adresi girdimi girmedi mi bunları kontrol edecegiz.

Projemize 3 label, 2 Textbox, 1 button, 2 adet ReguiredField Validator'ı ve 1 adette Regular Expression Validator'ı ekleyelim. Benim Tasarladıgım Form Asagıdaki Gibidir.

Simdi burada ad soyad alanlarını zorunlu kılacagız ve mail alanına girilen alanında geçerli bir mail adresi olmasını saglayacagız. Ekledigimiz Validarların özelliklerini belirleyelim.

  <table style="width: 425px">

            <tr>

                <td colspan="3">

                    <asp:Label ID="Label3" runat="server" Font-Bold="True" Font-Names="Verdana" Font-Size="X-Small"

                        Text="E-Mail Listesine Katıl"></asp:Label></td>

            </tr>

            <tr>

                <td style="width: 58px">

                </td>

                <td style="width: 54px">

                </td>

                <td style="width: 100px">

                </td>

            </tr>

            <tr>

                <td style="width: 58px; height: 22px">

                    <asp:Label ID="Label2" runat="server" Font-Bold="True" Font-Names="Verdana" Font-Size="X-Small"

                        Text="Ad Soyad"></asp:Label></td>

                <td style="width: 54px; height: 22px">

        <asp:TextBox ID="TextBox1" runat="server" Font-Bold="False" Font-Names="Verdana" Font-Size="X-Small"></asp:TextBox></td>

                <td style="width: 100px; height: 22px">

                   <asp:RequiredFieldValidator ID="rfAdSoyad" runat="server" ControlToValidate="TextBox1"

                        Display="None" ErrorMessage="Lütfen Adınızı Ve Soyadınızı Giriniz" Font-Bold="False"

                        Font-Names="Verdana" Font-Size="X-Small"></asp:RequiredFieldValidator>

                </td>

            </tr>

            <tr>

                <td style="width: 58px">

                    <asp:Label ID="Label1" runat="server" Font-Bold="True" Font-Names="Verdana" Font-Size="X-Small"

                        Text="Mail"></asp:Label></td>

                <td style="width: 54px">

                    <asp:TextBox ID="TextBox2" runat="server" Font-Bold="False" Font-Names="Verdana"

                        Font-Size="X-Small"></asp:TextBox></td>

                <td style="width: 100px">

                    <asp:RegularExpressionValidator ID="reMail" runat="server" ControlToValidate="TextBox2"

                        Display="None" ErrorMessage="Lütfen geçerli bi Email Adresi Giriniz" Font-Bold="False"

                        Font-Names="Verdana" Font-Size="X-Small" ValidationExpression="\w+([-+.’]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator>

                    <asp:RequiredFieldValidator ID="rfMail" runat="server" ControlToValidate="TextBox2"

                        Display="None" ErrorMessage="Lütfen Emalinizi Giriniz" Font-Bold="False" Font-Names="Verdana"

                        Font-Size="X-Small"></asp:RequiredFieldValidator>

</td>

            </tr>

            <tr>

                <td style="width: 58px; height: 26px">

                </td>

                <td style="width: 54px; height: 26px">

        <asp:Button ID="Button1" runat="server" Text="Gönder" Font-Bold="True" Font-Names="Verdana" Font-Size="X-Small" /></td>

                <td style="width: 100px; height: 26px">

                     </td>

            </tr>

        </table>

Validatorlarımızın özelliklerini belirledik. Ama bizim yapmak istedigimiz AJAX Validator Callout Extender nesnesi ile verilerin dogu girilip girilmedigini kontrol etmekti bunun için sayfamıza 3 adet Validator Callout Extender nesnesi ekleyelim.

Eklemis oldugumuz bu nesneleri ASP.NET validatorları ile iliskilendirelim.

/*Geçerli Mail Adresi girilip Girilmedigini Kontrol Edecek*/     

<cc1:ValidatorCalloutExtender ID="ValidatorCalloutExtender2" runat="server"

        TargetControlID="reMail"

    Width="350px"

    HighlightCssClass="highlight"

    WarningIconImageUrl="warning.gif"

    CloseImageUrl="close.gif">

        </cc1:ValidatorCalloutExtender>

/*Adsoyad Alanına veri girilip Girilmedigini Kontrol Edecek*/     

        <cc1:ValidatorCalloutExtender ID="ValidatorCalloutExtender1" runat="server"

        TargetControlID="rfAdSoyad"

    Width="350px"

    HighlightCssClass="highlight"

    WarningIconImageUrl="warning.gif"

    CloseImageUrl="close.gif">

        </cc1:ValidatorCalloutExtender>

     /* Mail  Adresi alanına veri girilip Girilmedigini Kontrol Edecek*/   

<cc1:ValidatorCalloutExtender ID="ValidatorCalloutExtender3" runat="server"

        TargetControlID="rfMail"

        Width="350px"

    HighlightCssClass="highlight"

    WarningIconImageUrl="warning.gif"

    CloseImageUrl="close.gif">

        </cc1:ValidatorCalloutExtender>

Kontrollerimizi iliskilendirdikten sonra yapmıs oldugumuz sayfayı test Edelim.

Simdi de hatalı bir mail adresi girelim.

Ortaya görsel açıdan çok güzel bir seyler çıktı.

Bu makalenin de sonuna geldik, baska bir makalede görüsmek üzere basarı ve iyi günler dilerim.

Sem GÖKSU
MCP | MCAD.NET | MCTS

Örnek Kodlar için mail adresimi kullanabilirsiniz

askisem@hotmail.com

Kaynaklar

http://atlas.asp.net

Merhaba arkadaşlar bu makalemizde gridview kontrolü içerisinde seçili olan kayıtları silme işleminin nasıl yapılacağına bakacağız...

Kalabalık bir kayıt listesi içerisinde gereksiz olan bir çok kayıt silinmek istendiginde bu kayıtları tek tek silmek çogu zaman kullanıcı için sıkıcı bir istir. Bunun için kullanıcı gereksiz olan kayıtları kendisi seçip, tek bir sefer de silmeyi tercih eder. Bu kullanıcıya büyük kolaylık saglar. Normalde gridview nesnesinde kayıt listesinin yanında sil isimli bir buton koyar ve o satırdaki kaydı sildirirdik. Biz gridview nesnemizi biraz daha genisleterek kullanıcının kayıtların tümünü seçerek veya tek tek silecegi bir kayıt listesi sunacagız.

Ilk olarak visual studio açalım ve asp.net projesi olusturalım. Ben dil olarak C# Seçtim.



Daha sonra projemizde kullanacagımız nesnelerden bahsedelim. Ben projemde Northwind database'i içerisindeki Products tablosunu kullanacagım. Field olarak da Grid içerisin de ProductID, ProductName ve UnitPrice fieldlarını kullanacagım. Ek olarak grid içerisinde bir template field olusturup Header Template içerisine CheckAll isimli bir checkbox ve item template içerisinede deleteRec isimli bir checkbox kontrolü ekledim. Birde seçecegim kayıtları sildirmek için bir adet link buton ekledim. Form tasarımım asagıdaki gibi olustu.



Formumuzun tasarımını tamamladıktan sonra simdi Tümünü seç ve tek tek seçim yapmak için gerekli olan javasctipt kodlarını yazalım.

function check_uncheck(Val)
{ 
    var ValChecked = Val.checked; 
    var ValId = Val.id; 
    var frm = document.forms[0]; 
    for (i = 0; i < frm.length; i++) 
    { 
        if (this != null ) 
        { 
            if (ValId.indexOf('CheckAll' ) != - 1) 
            { 
                if (ValChecked) 
                    frm.elements[i].checked = true ; 
                else 
                    frm.elements[i].checked = false ; 
            } 
            else if (ValId.indexOf('deleteRec' ) != - 1) 
            { 
                if (frm.elements[i].checked == false ) 
                    frm.elements[1].checked = false ; 
            } 
        } // if

    } // for
} // function

Javascript içerisine fonksiyonlarımızı yazdıktan sonra bunu gridview nesnesi üzerindeki checkboxlarda çagıralım.

<asp : GridView ID ="dbGrid" runat ="server" AutoGenerateColumns ="False" CellPadding ="4"  Font-Names ="Verdana" Font-Size ="X-Small" ForeColor ="#333333" GridLines ="None"  Width ="448px">
<FooterStyle BackColor ="#5D7B9D" Font-Bold ="True" ForeColor ="White" />
<Columns>     
    <asp:TemplateField> 
        <HeaderTemplate> 
            <asp:CheckBox ID ="CheckAll" runat ="server" onClick ="return check_uncheck(this);" /> --->>> tümünü Seç 
        <HeaderTemplate> 
    <İtemTemplate> <asp : Label ID ="ProductID" Visible ="false" Text =' ' runat ="server" /> 
        <asp:CheckBox ID ="deleteRec" runat ="server" onClick ="return check_uncheck (this );" /> --->>> Tek Tek Seç 
    <ItemTemplate>
<FooterTemplate>
<asp:TemplateField >
<asp:BoundField DataField ="ProductID" HeaderText ="ProductID" />
<asp:BoundField DataField ="ProductName" HeaderText ="ProductName" />
<asp:BoundField DataField ="UnitPrice" HeaderText ="UnitPrice" />
</Columns >
< RowStyle BackColor ="#F7F6F3" ForeColor ="#333333" />
< EditRowStyle BackColor ="#999999" />
< SelectedRowStyle BackColor ="#E2DED6" Font-Bold ="True" ForeColor ="#333333" />
< PagerStyle BackColor ="#284775" ForeColor ="White" HorizontalAlign ="Center" />
< HeaderStyle BackColor ="#5D7B9D" Font-Bold ="True" ForeColor ="White" HorizontalAlign ="Left" />
< AlternatingRowStyle BackColor ="White" ForeColor ="#284775" />
</asp : GridView >

Bu yazdıklarımızı test edelim. Projemizi çalıstıralım ve tek tek kayıtları seçelim. Ardından tümünü seç butonuna tıklayıp düzgün çalısıp çalısmadıgını kontrol edelim.



Kodumuz düzgün çalıstıgına göre artık sectigimiz kayıtları silelim.

protected void LinkButton2_Click(object sender, EventArgs e)
{ 
    string gvIDs = "" ; 
    bool chkBox = false ; 
    foreach (GridViewRow gv in dbGrid.Rows) 
    { 
        CheckBox deleteChkBxItem = (CheckBox )gv.FindControl("deleteRec" ); 
        if (deleteChkBxItem.Checked) 
        { 
            chkBox = true ; 
            gvIDs += (( Label )gv.FindControl("ProductID" )).Text.ToString() + "," ; 
        } 
    }

    SqlConnection cn = new SqlConnection ("Data Source=.; Initial Catalog=Northwind; uid=sa; pwd=" ); 
    if (chkBox) 
    { 
        try 
        { 
            string deleteSQL = "DELETE from Products WHERE ProductID IN (" + gvIDs.Substring(0, gvIDs.LastIndexOf( "," )) + ")" ; 
            SqlCommand cmd = new SqlCommand (deleteSQL, cn); 
            cn.Open(); 
            cmd.ExecuteNonQuery(); 
            dbGrid.DataSource = DataTableGetirLan(); 
            dbGrid.DataBind(); 
            Response.Write( "Seçmis oldugunuz kayıtlar Silindi !" ); 
        } 
        catch (SqlException err) 
        { 
            Response.Write(err.Message.ToString()); 
        } 
        finally 
        { 
            cn.Close(); 
        } 
    } }

Son olarak silme islemini de test edelim.



Gördügümüz gibi tek sefer de seçmis oldugumuz kayıtlar silindi.

Not: Eger sizde nortwind içerisindeki Products tablosunu kullanacaksanız diger tablolar ile arasında bulunan iliskileri kaldırın. Yoksa kayıtları silerken hata alacaksınız.

Bu makalemizinde sonuna geldik. Umarım faydalı bir makale olmustur. Iyi günler ve basarılar dilerim.

Sem GÖKSU
MCP | MCAD.NET | MCTS

Örnek kodlar için mail adresimi kullanabilirsiniz.

askisem@hotmail.com