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

Özellikle grafikerler için uyumlu renkleri bir araya getirmek oldukça zor ama önemli bir istir. Ama renk uyumu sadece grafikerlere has degildir. Biz programcılarda hazırladıgımız arayüzlerin kullanıcıya daha güzel görünmesi için uyumlu renkleri kullanmaya dikkat ederiz. Ama zorlandıgımız zamanlarda olur tabi. Iste bu zorlandıgımız zamanlarda isimize yarayacak bir uygulama "Renk uyum cetveli". Renk uyum cetveli en iyi uyan 6 rengi size gösteriyor. Siz tonları degistirerek farklı renkler yaratabiliyorsunuz.

Renk uyum cetvelini denemek için tıklayınız .

Ilk olarak gridvView nesnesinden bahsedelim.  Gridview nesnesi bir veritabanındaki ilgili tablo içerisindeki kayıtları göstermemize yarar. Biz projemizde SQL Server 2000 içerisindeki Northwind veritabanını kullanacagız. Yeni bir Asp.Net Projesi Açtıktan sonra;

 Ilk olarak formumuz üzerine GridView nesnesini yerlestirelim.

Gridinizi ekledikten sonra eger gridimize biraz renk vermek istersek grid üzerinde sag tıklayarak Auto Format ile  hazır grid stillerini kullanabiliriz.

Gridimize güzel bir stil belirledikten sonra artık verileri çekebiliriz.

Ilk olarak veritabanı baglantısı için gerekli nesneleri tanımlarız.  Burada sqlDataAdapter, dataSet, ve sqlDataConnection nesnelerini kullanacagız. Artık tanımlama islemlerine geçebiliriz;

 Imports System

Imports System.Data

Imports System.Data.SqlClient

 Partial Class _Default

Inherits System.Web.UI.Page

Private Cnn As SqlConnection     Private Da As SqlDataAdapter     Private Ds As DataSet

End Class

Not: Nesnelerimizi aynı sayfa içerisinde tanımladıgımız için private olarak tanımladık. Eger bir class içerisinde tanımlamak istersek Public olarak tanımlamamız gerekir.

Nesnelerimizi tanımladıktan sonra veritabanı baglantımızı saglayacak baglantı adında bir Sub yazalım. Bu Sub veritabanına baglanmamızı saglayacaktır.

Partial Class _Default

    Inherits System.Web.UI.Page

    Private Cnn As SqlConnection

    Private Da As SqlDataAdapter

    Private Ds As DataSet

Private Sub SetCnn()         Cnn = New SqlConnection("Data source=localhost; database=northwind; uid=sa; pwd=")     End Sub

End Class

Evet veritabanı baglantımız artık hazır. Simdi geriye verileri databaseden gride çekmek kalıyor. Gridimizde verileri görüntülemek için geriye DataTable döndüren bir function yazabiliriz. Bu Function Dısarıdan SQLString adında bir parametre ile SQL ifadesini alacak. Bu bize ileride yeni sorgular yapmamıza yarayabilir.

Imports System

Imports System.Data

Imports System.Data.SqlClient

Partial Class _Default

    Inherits System.Web.UI.Page

    Private Cnn As SqlConnection

    Private Da As SqlDataAdapter

    Private Ds As DataSet

    Private Sub SetCnn()

        Cnn = New SqlConnection("Data source=localhost; database=northwind; uid=sa; pwd=")

    End Sub

Private Function SelectDataTable(ByVal SQLString As String)         SetCnn()         If Not Cnn Is Nothing Then             If Cnn.State = ConnectionState.Closed Then Cnn.Open()             Da = New SqlDataAdapter(SQLString, Cnn)             Ds = New DataSet()             Da.Fill(Ds, "table")             Return Ds.Tables(0)         Else             Return Nothing         End If     End Function

Functionumuzu yazdıktan sonra artık verilerimiz görüntülenmeye hazır bir sekilde bizi bekliyor. Istersek Form yüklenirken verilerimizi görüntüleyelim.

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load         GridView1.DataSource = SelectDataTable("SELECT * FROM Products")         GridView1.DataBind()     End Sub

Projemizi çalıstırdıktan Sonra verilerimiz asagıdaki gibi görüntülenir.

   

Projemizin bu kısmını basarı ile tamaladıktan sonra Projemize biraz daha hareket katalım ve projemize bir adet DetailsView Nesnesi ekleyelim.

Nesnemizi ekledikten sonra Grid üzerinde sag tıklayarak Show Smart Tag ı seçerek formumuza CommondBoundlardan "Select" i ekleriz. Böylese seç butonuna tıkladıgımızda aktif kayıt seçilecek ve seçtigimiz kayda ait detay bilgiler detailsView nesnesinde görüntülenecek.

Bunun için form yüklenirken (Form_load) Detailsview içerisinde ilk kaydı görüntüleyebiliriz. Daha Sonra grid üzerinden seçecegimiz kayıt detailsView üzerinde görüntülenir.

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load         GridView1.DataSource = SelectDataTable("SELECT * FROM Products")         GridView1.DataBind()         DetailsView1.DataSource = SelectDataTable(" SELECT top 1 * FROM Products")         DetailsView1.DataBind()     End Sub

Evet simdi projemizi çalıstırdıktan sonra grid üzerinde tüm kayıtlar görüntülenir fakat, Grid üzerindeki seç butonuna tıkladıgımızda seçili kaydın detayının gelmesi için de kısa bir kod yazmamız gerekir.

Bunun için GridView in GridView1_SelectedIndexChanged eventi içerisine asagıdaki kodu yazmamız gerekir.

Protected Sub GridView1_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles GridView1.SelectedIndexChanged         DetailsView1.DataSource = SelectDataTable("SELECT  * FROM Products WHERE ProductID=" + GridView1.SelectedRow.Cells(0).Text)         DetailsView1.DataBind()     End Sub

Bu Arada Sayfamızı Html Kısmında küçük bir degisiklik yapacagız. Bunun Nedeni Hem Gereksiz alanların gösterilmesini engellemek, hemde Sayfa dizaynının daha göresel olmasını saglamaktır.

<asp:GridView ID="GridView1" runat="server" BackColor="LightGoldenrodYellow" BorderColor="Tan"             BorderWidth="1px" CellPadding="2" ForeColor="Black" GridLines="None" Style="z-index: 100;             left: 8px; position: absolute; top: 368px" AutoGenerateColumns="False" Width="344px">             <FooterStyle BackColor="Tan" />             <Columns>                 <asp:BoundField DataField="ProductID" HeaderText="Ürün No:" />                 <asp:BoundField DataField="ProductName" HeaderText="Ürün Adı:" />                 <asp:CommandField />                 <asp:CommandField SelectText="Seç" ShowSelectButton="True" />             </Columns>             <SelectedRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />             <PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" />             <HeaderStyle BackColor="Tan" Font-Bold="True" />             <AlternatingRowStyle BackColor="PaleGoldenrod" />         </asp:GridView>

Evet artık projemizi tamamlamıs olduk. Projemizi çalıstırdıgımızda sectigimiz ürüne ait detaylı bilgi detailsView nesnesinde  görüntülenecektir.

Bir sonraki makalemizde görüsmek üzere...

Biz bu makalemizde veri kaynağı olarak dataset’i ele kullanacağız. Ben Adrotator nesnesini banner olarak değil de ürün olarak ele alıp, Sayfa her açılışında farklı bir ürün gösterip, ürün üzerine link koyacağım.

Ilk olark Projemizde Kullanacagımız Access database ismi Urunler.mdb dir. Bu tablo içerisinde tblUrunler isimli bir tablo bulunmaktadır. Bu tablo ürün bilgilerini içerir.

Bu tablo içerisindeki alan isimleri;

Yukarıdaki gibidir.

Veritabanını olusturduktan sonra Projemize bir adet AdRotator nesnesi eklenir.  

Nesnemizi ekledikten sonra banneri görüntüleyecegimiz bir function  yazalım. Farklı yöntemler de olabilir ama ben anlaması kolay olması ve yazması kolay oldugu için function içinde yapmayı tercih ettim.

Ilk olarak baglantı olusturabilmemiz için gerekli kodları yazalım.

private System.Data.OleDb.OleDbConnection Cnn; private System.Data.OleDb.OleDbDataAdapter Da; private System.Data.DataSet Ds;

Simdi ürünleri gösterecek bir fonksiyon yazabiliriz.

private System.Data.Dataset BannerGetir(string SQLString) {  Cnn = new System.Data.OleDb.OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + Server.MapPath("db/urunler.mdb"));  if (Cnn.State == ConnectionState.Closed) {    Cnn.Open();  }  Da = new System.Data.OleDb.OleDbDataAdapter(SQLString, Cnn);  Ds = new DataSet();  Da.Fill(Ds, "table");  return Ds.Tables(0); }

Geriye sadece bu fonksiyonu formdan çagırmak ve AdRotator için ImageUrl ve Navigate url özelligini ayarlamak.

Bunun içinde Form yüklenirken (Form_Load) asagıdaki kodları yazarsak AdRotator nesnesi basarılı bir sekilde çalısır.

protected void Page_Load(object sender, EventArgs e) { AdRotator1.DataSource = BannerGetir("SELECT * FROM tblUrunler"); string path = "images"; AdRotator1.ImageUrlField = "fldUrunResmi"; AdRotator1.DataBind();         }

Evet, çalıstırdıktan sonra sayfa görüntümüz asagıdaki gibidir.

Sayfamızı Refresh Edersek

Farklı bir ürün geldigini göreceksiniz..

Bir sonraki makalede görüsmek üzere, Herkese basarılar dilerim.