Blog

Merhaba arkadaşlar, bu makalemizde ajax control toolkit’in nesnelerinden Dropshadow extender nesnesini ele alacağız. Örnek olarak da datalist nesnesinin içerisinde nasıl kullanıldığını göreceğiz.

DrapShadow Extender

Açıklama

DrapShadow, panel nesnesine drapshadow(kenarlarına gölge) özelligi kazandıran bir ajax nesnesidir. Aynı zamanda panel nesnesinin kenarlarını köseli olarak da gösterilebilir.

Özellikleri

·                  TargetControlID - Drop shadow özelliginin uygulanacagı kontrolün ID'si

·                  Width - Uygulanacak DropShadow'ın pixel genisligi. Varsayılan olarak 5'dir.

·                  Opacity - Uygulanacak olan DrapShadow'un Opacity Degeri. Varsayılan olarak .5 dir.

·                  TrackPosition - Whether the drop shadow should track the position of the panel it is attached to. Use this if the panel is absolutely positioned or will otherwise move.

·                  Rounded - Panel kontrolünün kenarlarının köseli olup olmayacagını belirler. True ise kenarları köseli olarak gösterilir.  

Kullanımı

<ajaxToolkit:DropShadowExtender ID="dse" runat="server"
        TargetControlID="Panel1"
        Opacity=".8"
        Rounded="true"
TrackPosition="true" />
Nesnemizi tanıyıp özelliklerinide inceledikten sonra bu kontrolümüzü datalist içerisinde kullanalım. Visual Studio Içerisinde Ajax tabanlı bir ASP.NET projesi olusturalım. Ben dil olarak C# Seçecegim

Projemizi olusturduktan sonra örnegimizde ne yapacagımızı kısaca anlatayım. Northwind Veritabanından Categories tablosunu Datalist ile listeleyecegim. Datalist nesnesinin Itemlarına da DropShadow özelligini kazandırıp kayıtları kullanıcıya daha hos bir sekilde sunacagız.

Bunun için Web formumuz üzerine 1 Datalist ve 1 panel ekleyelim.  Datalist içerisinde ben CategoryID, CategoryName, Description alanlarını gösterecegim. Datalist içerisinde gösterecegim alanları belirledim simdi bu alanları HTML Table içerisinde yazalım.

<table style="width: 400px">

                <tr>

                    <td style="width: 120px" valign="top">

                        <asp:Label ID="Label2" runat="server" Text="CategoryID" Font-Bold="True"></asp:Label></td>

                    <td valign="top">

                        :</td>

                    <td valign="top">

                        <asp:Label ID="CategoryID" runat="server" Text=’<%# DataBinder.Eval(Container.DataItem,"CategoryID") %>’></asp:Label></td>

                </tr>

                <tr>

                    <td style="width: 120px" valign="top">

                        <asp:Label ID="Label3" runat="server" Text="Category Name" Width="115px" Font-Bold="True"></asp:Label></td>

                    <td valign="top" >

                        :</td>

                    <td valign="top">

                        <asp:Label ID="CategoryName" runat="server"  Text=’<%# DataBinder.Eval(Container.DataItem,"CategoryName") %>’></asp:Label></td>

                </tr>

                <tr>

                    <td style="width: 120px" valign="top">

                        <asp:Label ID="Label4" runat="server" Text="Description" Font-Bold="True"></asp:Label></td>

                    <td valign="top">

                        :</td>

                    <td valign="top">

                        <asp:Label ID="Description" runat="server"  Text=’<%# DataBinder.Eval(Container.DataItem,"Description") %>’></asp:Label></td>

                </tr>

            </table>

Bu tabloyu Sayfamıza Ekledigimiz Panelin içerisine ekleyelim. Son görünümümüz asagıdaki gibi oldu.

Not: Panel Background rengi Khaki dir. Siz istediginiz rengi verebilirsiniz.

 

Datalist ItemTemplate Açalım ve panel Nesnemizi ItemTemplate içerisine tasıyalım. Yine Item Template içerisine bir adet DropShadow nesnesi ekleyelim.  Son görünümümüz asagıdaki gibi oldu.

 

Son olarak Kodlarımıza da bir göz atalım.

<asp:DataList ID="DataList1" runat="server" Font-Names="Verdana" Font-Size="X-Small" RepeatColumns="1">

            <ItemTemplate>

        <asp:Panel ID="Panel1" runat="server" BackColor="Khaki" Width="410px">

            <table style="width: 400px">

                <tr>

                    <td style="width: 120px" valign="top">

                        <asp:Label ID="Label2" runat="server" Text="CategoryID" Font-Bold="True"></asp:Label></td>

                    <td valign="top">

                        :</td>

                    <td valign="top">

                        <asp:Label ID="CategoryID" runat="server" Text=’<%# DataBinder.Eval(Container.DataItem,"CategoryID") %>’></asp:Label></td>

                </tr>

                <tr>

                    <td style="width: 120px" valign="top">

                        <asp:Label ID="Label3" runat="server" Text="Category Name" Width="115px" Font-Bold="True"></asp:Label></td>

                    <td valign="top" >

                        :</td>

                    <td valign="top">

                        <asp:Label ID="CategoryName" runat="server"  Text=’<%# DataBinder.Eval(Container.DataItem,"CategoryName") %>’></asp:Label></td>

                </tr>

                <tr>

                    <td style="width: 120px" valign="top">

                        <asp:Label ID="Label4" runat="server" Text="Description" Font-Bold="True"></asp:Label></td>

                    <td valign="top">

                        :</td>

                    <td valign="top">

                        <asp:Label ID="Description" runat="server"  Text=’<%# DataBinder.Eval(Container.DataItem,"Description") %>’></asp:Label></td>

                </tr>

            </table>

        </asp:Panel>

                <br />

        <cc1:DropShadowExtender ID="DropShadowExtender1" runat="server">

        </cc1:DropShadowExtender>

            </ItemTemplate>

            <HeaderStyle Font-Bold="False" />

        </asp:DataList>

DropShadow nesnesinin özelliklerini de belirleyelim,

        <cc1:DropShadowExtender ID="DropShadowExtender1" runat="server" TargetControlID="Panel1" Opacity=".25" Radius="8" Rounded="true">

        </cc1:DropShadowExtender>

Geriye sadece kayıtları görüntülemek kaldı. Bunun için bir void yazalım ve form loadda çagıralım.

  protected void DatalistDoldur()

    {

        SqlConnection cnn = new SqlConnection("Data Source=.; Initial Catalog=Northwind; Trusted_connection=yes");

        cnn.Open();

        SqlDataAdapter Da = new SqlDataAdapter("Select * from Categories",cnn);

        DataSet Ds = new DataSet();

        Da.Fill(Ds, "tbl");

        DataList1.DataSource = Ds.Tables[0];

        DataList1.DataBind();

    } 

    protected void Page_Load(object sender, EventArgs e)

    {

        if (!Page.IsPostBack)

        {

            DatalistDoldur();

        }

    }

Artık hersey hazır, projemizi çalıstıralım,



Ortaya çok güzel bir görüntü çı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 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

Bundan sonraki mesleki kariyerime, tüm GSM operatörleri ile entegreli çalısan Logizmo, Blogizmo vb gibi servislere sahip olan AMVG firmasında yazılım gelistirici olarak devam edecegim.

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

6 aydır çalısmakta oldugum Kumsaati Tasarım’dan ayrılmaya karar verdim. Çalısma arkadaslarımla birlikte bir çok basarılı projeye imza attık. Bu basarının bundan sonra da sürmesi tek temennimdir. Çalısma arkadaslarıma ve Kumsaati ailesine tesekkür eder bundan sonraki çalısma hayatlarında basarılar dilerim.