Sem GÖKSU - Kişisel Web Sitesi Ana Sayfa | Hakkımda | Çalışmalarım | Kitap Önerileri | Fotoğraflarım | RSS RSS | İletişim
İçerik Kategorileri
Makale Kategorileri
Etiket Bulutu
Arama
Tema
Kaynaklar
Takip Ettiklerim

ASP.NET Ajax

ModalPopup Kontrolü ile Kullanıcı Dostu Mesaj Pencereleri Çıkarmak


ASP.NET ile uğraşırken kullanıcıyı nasıl bilgilendireceğimiz geliştirici için her zaman sorun olmuştur. Bazen label’lar kullanırken bazı durumlarda da javascript’ten faydalanarak alert metodu kullanılır ve kullanıcıya bir mesaj penceresi çıkarılır. Label kullanıldığında kullanıcı hatanın nerede yazdırıldığını algılayamıyor, alert kullanıldığında ise görsel olmayan bir pencere ile karşılaşıyoruz ve kişiselleştiremiyoruz. Kullanıcıya mesaj verirken başka bir işleminde yaptırılmasını istersek ne label nede alert bizim ihtiyaçlarımızı karşılayamayacaktır.

Örneğin üye girişi gerektiren bir sistemimiz var, kullanıcı bu alana girmek istediğin de hem kullanıcıyı bilgilendiren bir mesaj çıkartmamız hem de üye girişi formunun görüntülenmesini istersek ne yapacağız? İşte bu durumda bizim işimizi çözecek şey ASP.NET AJAX Modal Popup kontrolüdür. Modal popup kontrolü sayfamızın üzerine yeni bir layer(div) açarak kullanıcının layerin altında kalan kısmı ile işlem yapmasını engelleyerek sadece bizim açtığımız layer ile işlem yapmasını sağlar. Bizde bu oluşturduğumuz layer üzerine hata mesajlarını gösterebileceğimiz labeller ekleyebilir, üzerinde formlar oluşturup mesaj penceremizi istediğimiz gibi kişiselleştirebiliriz.

Not:Bu işlemi yapabilmemiz için AJAX Control Toolkit’i indirip kurmamız gerekmektedir. ASP.NET AJAX Control Toolkit’i indirmek için http://www.asp.net/Ajax/ajaxcontroltoolkit adresini kullanabilirsiniz.

Yeni bir ASP.NET projesi başlattıktan sonra. Sayfamıza bir adet UserControl ekleyelim. Adı WebMessageBox olsun. UserControl için HTML kodumuz aşağıdaki gibi olacaktır.

[WebMessageBox.ascx]

<%@Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

// Modal Popup kontrolünü dinamik olarak çağıracağımız için TargetControlID’ye bir değer atayamıyoruz. Bu özelliğe bir değer atamazsak hata verecek bunu engellemek için de formda görünmeyen bir buton ekledik.
<asp:Button ID="btnShow" runat="server" Style="display: none;" />

<asp:Panel ID="pnlPopup" runat="server" Style="background-color: White; width: 420px; border-width: 2px; border-color: gray; font-size: 10pt; font-family: Tahoma; line-height: 15px; border: 1px solid #A6A6A6;">
<div style="background-color: red; background-repeat: repeat-x; width: 415px; height: 22px; padding-top: 3px; text-align: left; padding-left: 5px; font-weight: bold;">
<span style="color: #FFFFFF; direction: ltr;">Mesaj Kutusu</span></div>
<div style="padding: 5px;">
<div style="padding: 10px;">
<div style="float: left; padding-right: 10px;">
//Hata olduğunda kullanıcıyı bilgilendirecek olan resim dosyası…
<asp:Image ID="imgIcon" runat="server" />
</div>
<div>
//Hata Mesajının gösterileceği textbox…
<asp:Label ID="lblMessage" runat="server"></asp:Label>
<div style="width:100%; text-align:right; padding-top:20px">
// Açılan ModalPopup kontrolünü kapatacak olan buton…
<asp:Button ID="btnClose" Text="Kapat" runat="server" CausesValidation="False" />
</div>
</div>
</div>
</div>
</asp:Panel>
<cc1:ModalPopupExtenderID="ModalPopupExtender1" runat="server" TargetControlID="btnShow" PopupControlID="pnlPopup" BackgroundCssClass="modalBackground" DropShadow="true" />

ModalPopup kontrolünün arka BackgroundCssClass özelliği içinde bir CSS class’ı oluşturalım.

[WebMessageBox.css]

.modalBackground
{
background-color: black; filter: alpha(opacity=70);opacity: 0.7;
}


Yaptıklarımızı inceleyecek olursak, lblMessage kontrolünü MessageBox açıldığında içerisinde göstereceğimiz hata mesajı için, imgIcon kontrolünü kullanıcıyı bilgilendiren bir resim için, btnClose’u da açılan popup penceresini kapatmak için ekledik. Peki btnShow butonunu neden ekledik? Bununda nedeni aslında basit, Modal PopupControl’ünün TargetControlID parametresine mutlaka bir değer atamak zorundayız. Bunun için bizde forma bir buton ekledik display özelliğini kapattık ve ModaPopupControl’ün TargetControlID özelliğine bu kontrolü atayıp bu sorunu çözdük.

Buton’un display özelliği kapalı olduğu için bu kontrolü kullanamıyoruz. Zaten bizim amacımız da bu değil. Bizim yapmamız gereken istediğimiz yerden bu UserControl içerisindeki ModalPopupExtender’i çağırmak. ModalPopup kontrolünün server-side çalışan Show isimli bir metodu var. Bu metot ModalPopup kontrolünün kullanıcıya gösterilmesini sağlıyor.

ModalPopupExtender.Show()


Bizde bu metodu kullanarak kod tarafından modalpopup kontrolünü görünebilir hale getirelim. Bunun için UserControl’ün kod dosyasına gidip bir metot yazalım. Bu metot ilgili yerlere değerlerini atasın ve değerleri atadıktan sonra da ModalPopup’ın gösterilmesini sağlasın.

[WebMessageBox.ascx.cs]

publicvoid Show(string Mesaj, string Action)
{
    if (Action == "success") // Burayı enumda yapabilirsiniz…
    {
        imgIcon.ImageUrl = "success.gif"
    }
    else if (Action == "error")
    {
        imgIcon.ImageUrl = "error.gif";
    }
    lblMessage.Text = Mesaj;
    ModalPopupExtender.Show();
}


WebMesageBox kontrolümüz hazır, şimdi bu usercontrol’ü bir sayfaya ekleyelim. Aynı zamanda bir buton ekleyelim. Bu buton WebMessageBox’ın görüntülenmesini sağlayacak.

[Default.aspx]

<%@Register src="WebMessageBox.ascx" tagname="WebMessageBox" tagprefix="uc1" %>

<
asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<uc1:WebMessageBox ID="WebMessageBox1" runat="server" />
<br/> <br />
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />


Şimdi de buton’un click eventine gidelim ve UserControl içerisinde yer alan metodu kullanarak MessageBox’ı çıkartalım.

[Default.aspx.cs]

protectedvoid Button1_Click(object sender, EventArgs e)
{
    WebMessageBox1.Show("İşlem Başarılı", "success");
}


Sayfayı Çalıştıralım ve butona tıkalaylım,

Birde kodu aşağıdaki gibi değiştirelim,

[Default.aspx.cs]

protectedvoid Button1_Click(object sender, EventArgs e)
{
    WebMessageBox1.Show("Hata var…", "error");
}

Sayfadaki butona tekrar tıklayalım,

Hoş geldin WebMessageBox… Kaynak kodları indirmek için tıklayınız. Başka bir makale de görüşmek üzere. ASP.NET ile kalın J

Sem GÖKSU
www.semgoksu.com | www.yazilimgunlugu.com
sem.goksu@yazilimgunlugu.com

Kaynaklar
asp.net/ajax

Bu makaleye 3 yorum yapılmış. | 26.02.2009 18:14:22

AJAX ListSearch Extender


ListSearchExtender

List SearchExrender kontrolü ASP.NET Dropdownlist ve Listbox itemleri içinde yazarak aramayapmamizi saglar. Listeleme elemanlari üzerine tiklandiginda Bir uyari mesaji çikarörnegin; arama için birkaç harf giriniz. Bu uyariya sitil verebilir vepozisyonun belirleyebiliriz.

Kullanimi

<ajaxToolkit:ListSearchExtender id="LSE" runat="server"
TargetControlID="ListBox1"
PromptText="Type to search"
PromptCssClass="ListSearchExtenderPrompt"
PromptPosition="Top" /> 

Özellikleri

PromptText - Listeleme elemanina tiklandigindagösterilecek olan mesaj

PromptCssClass - Uyari mesajina uygulanacak olan sitil adi

PromptPosition - Uyari mesajinin gösterilecegi yer. Bottomve Top degerlerini alir.

Örnek

Buanlattiklarimizi bir örnekle devam ettirelim. Örnegimizde Dropdownlist veListbox elemanlarinda arama yapacagiz. Örnegimize baslayalim ve ilk olarak birAJAX Projesi açalim.

Simdiolusturdugumuz bu sayfaya 1 adet Dropdownlist ve Listbox ekleyelim. Bukontrollerde arama yapmak için 2 adet de ListSearch Extender ekleyelim. Benimolusturdugum sayfa asagidaki gibidir.


Benlisteleme elemanlarina bir miktar item ekledim. Bu elemanlari Databaseden dedoldurabiliriz. Ama suan için buna gerek yok.

Simdi ilkolarak Listbox için ListSearch Extenderinin gerekli propertylerini yazalim.

<cc1:ListSearchExtender ID="ListSearchExtender2" runat="server"TargetControlID="ListBox1"PromptText="Aramayapmak için yaziniz..." PromptPosition="Top" PromptCssClass="modalPopup">

</cc1:ListSearchExtender>

Yukarida ="text/css">

.modalPopup {

background-color:#ffffdd;

border-width:2px;

border-style:solid;

border-color:Gray;

padding:0px;

}

</style>

Simdidedropdownlist için ListSearch Extender için gerekli kodlari yazalim. Hiçbir farkyok sadece TargetControlID Propertysini degistirecegiz.

<cc1:ListSearchExtender ID="ListSearchExtender1" runat="server"TargetControlID="DropDownList1"PromptText="Aramayapmak için yaziniz..." PromptPosition="Top" PromptCssClass="modalPopup">

</cc1:ListSearchExtender>

Simdi buyazdiklarimizi test edelim;

Simdi aramaiçin bir seyler yazalim; örnegin " Sem " : )

Simdi dediger DropdownList' deneyelim;

Simdi aramayapmak için bir seyler yazalim;

Gerçektençok kullanisli ve ise yarayacak bir kontrol : ) Projelerinizde güle gülekullanin : )

Bumakalenin de sonuna geldik, baska bir makalede görüsmek üzere basari ve iyigünler dilerim.

SemGÖKSU
MCP | MCAD.NET | MCTS | ASP.NET MVP

ÖrnekKodlar için mail adresimi kullanabilirsiniz
askisem@hotmail.com

Kaynaklar
http://ajax.asp.net

Bu makaleye 1 yorum yapılmış. | 09.03.2007 10:21:38

AJAX ve AJAX Control Toolkit Kurulumu


AJAX ve AJAX Control Toolkit Kurulumu

Yazılıramı takip edenler de bilirler, simdiye kadar hep ajax control toolkit nesnelerinden bahsettim. Ama gelen sorular ve istekler üzerine bu makale de ajax özelliklerinin ve ajax control toolkit nesnelerinin Visual Studio'ya nasıl ekleneceginden bahsedecegim.

Ilk olarak web uygulamalarımızda AJAX uygulamalarını gelistirebilmek için ASP.NET 2.0 AJAX Extensions 1.0'i yüklememiz gerekir.

ASP.NET 2.0 AJAX Extensions 1.0'i asagıdaki adresten indirelim. 

ASP.NET 2.0 Ajax Extension 1.0



Next, Next, Next...



Evet AJAX 2.0 Extension'ı kurduktan sonra, su anda en son versiyonu yayınlanan ASP.NET 2.0 AJAX Futures January CTP yi indirelim. Bu bize ASP.NET 2.0 AJAX yada ASP.NET AJAX Control Toolkit için yeni özellikleri yüklememizi saglar. ASP.NET 2.0 AJAX Futures January CTP yi asagıdaki adresten indirelim.

ASP.NET 2.0 AJAX Futures January CTP

Simdi bunu kuralım.



Klasik olarak Next, Next, Next...



ASP.NET 2.0 AJAX Futures January CTP yi de kurduktan sonra geriye kalan tek sey Control toolkit nesnelerinin Visual studio'ya eklenmesi. Ajax Control Toolkit'i asagıdaki adresten indirelim.

Ajax Control Toolkit



Simdi indirdigimiz bu dosyalara göz atalım.



Ajax contollerinin yer aldıgı sample site ve derlenecek olan projelerin yer aldıgı bir klasör bulunuyor. Simdi AjaxControlToolkit Projesini açalım ve projemizi derleyelim.



Projemizi derledikten sonra Visul Studio Toolbox üzerinde yeni bir tab olusturalım.



Bu tab üzerinde sag tıklayalım ve açılan pencereden Choose Item 'ı Seçelim



Açılacak olan pencere de browse tıklayalım ve derlemis oldugumuz AjaxControlToolkit.DLL dosyasını seçelim.



Open seçenegini seçelim.



Gördüldügü gibi Ajax nesneleri artık tüm projelerimiz de kullanmak üzere hazır : )

Simdi Visual Studio üzerinde yeni bir proje açmaya deneyelim;



Artık projemiz de ajax özelliklerini ve ajax nesnelerini kullanabiliriz...

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
www.semgoksu.com

Örnek Kodlar için mail adresimi kullanabilirsiniz

semgoksu@ semgoksu.com

Kaynaklar

http://ajax.asp.net

Bu makaleye 2 yorum yapılmış. | 20.02.2007 22:00:57

DataBound Kontroller ile SQL Paging Kullanımı


DataBound Kontroller ile SQL Paging Kullanımı

SQL Server 2005 ile gelen ROW_NUMBER() fonksiyonu ile SQL Server üzerinde sayfalama yapmak artık çok kolay. ROW_NUMBER() fonksiyonu bize kayıtlarımızın yanında bir satır numarası olusturur ve sayfalamamız ve indexlememiz için bize yardımcı olur. 

Row_Number() Kullanımı: 

select top 10 row_number() over (order by name asc) as SatyrNO, ProductID, Name,ProductNumber  from Production.Product



Gördügümüz gibi bize geriye satır no isimli bir field döndürüyor ve 1 den artarak bize satır numarası olusturuyor.

Bu özellikle windows uygulamaları için güzel bir çözüm oldu. Web uygulamarında pagingleme oldukça basitti ama onunda dezavantajları vardı. Özellikle çok fazla kayıt içeren data datagride yüklendiginde tüm veri hem gride yüklenirken oldukça zorlanıyordu hemde sayfalar arasında gezinirken veri tekrar tekrar yükleniyordu.

SQL server ile gelen ROW_NUMBER() fonksiyonu ile bize identity gibi artan bir satır numarası döner ve biz bu satır numarası üzerinde istedigimiz degerleri gönderir istedigimiz kadar kaydı görüntüleyebiliriz. Yani grid üzerinde kaç kayıt görüntülemek istersek o kadar kayıt gride yüklenecek. Buda inanılmaz bir performans kazancı olacak.

Örnek:

select * from (select row_number() over (order by name asc) as SatirNo, ProductID, Name,ProductNumber   from Production.Product) Products where (SatirNo between  20 and 30)



Gördügümüz gibi bize 20 ve 30 satır numarası arasındaki kayıtlar geri döndü.

Artık örnegimize geçebiliriz.

Yeni bir web site açalım ve bir grid ekleyelim. Gridimizi ekledikten ve pagin içinde bir label ekleyelim.  Grid üzerinde 10 kayıt görüntüleyecegiz ve diger kayıtlara geçmek için olusturacagımız paging ile diger sayfalardaki kayıtlara geçecegiz.

Not: Aynı islemi Datalist ve Repeater ile de yapabiliriz. Ben anlasılır olması için Gridview üzerinde yapacagım.



Kodumuzu yazmaya baslayalım; ilk olarak connection stringi ayarlayalım.

    SqlConnection Cnn;

    SqlCommand Cmd;

    DataSet Ds;

    SqlDataAdapter Da; 

  private string CnnStr() // Connection Stringi ayarladık

    {
        return "Data Source=*******;initial Catalog=*******;Uid=*******;pwd=*******";
    }


Connection Stringimizi olusturduk, simdi de Datayı çekecek olacak void'i yazalım.

    private void DatayiGetir(int Start, int End) // Görüntülenecek datayı çektik..

    {

        Cnn = new SqlConnection(CnnStr());

        string sqlstr = "select * from (select row_number() over (order by InsertionDate asc) as SatirNo, InsertionDate, UpdateDate from Messages) Messages where (SatirNo between  " + Start + " and " + End + ")";

        Da = new SqlDataAdapter(sqlstr, Cnn);

        Ds = new DataSet();

        Da.Fill(Ds, "tbl");

        GridView1.DataSource = Ds.Tables[0];

        GridView1.DataBind(); 

    }


Voidimizi yazdıktan sonra simdi de sayfamızdaki paginglemeyi ayarlayalım. Bunun için öncelikle ihtiyacımız olan Toplam kayıt sayısıdır. Buradan sayfalanacak olan sayfa sayısını bulacagız.

    private int KayitSayisi() // Sayfalama için Toplam kayıt sayısını aldık.

    {

        Cnn = new SqlConnection(CnnStr());

        string sqlstr = "select Count(*)  from Messages";

        if (Cnn.State == ConnectionState.Closed) Cnn.Open();

        Cmd = new SqlCommand(sqlstr,Cnn);

        int recordCount= (int)Cmd.ExecuteScalar();

        return recordCount;

    }

Toplam kayıt sayısını aldıktan sonra simdi Sayfa sayısını bulalım ve pagini ekrana basalım.

privatevoid PagingiOlustur()

    {

        int ToplamSayfaSayisi;

        StringBuilder sb = new StringBuilder();

        if (KayitSayisi() % 10 == 0)

        {

            ToplamSayfaSayisi = KayitSayisi() / 10;

        }

        else

        {

            ToplamSayfaSayisi = KayitSayisi() / 10 + 1;

        }

        for (int i = 0; i < ToplamSayfaSayisi; i++)

        {

                sb.Append("<a href=SQLPagingAndCustomDataGrid.aspx?Sayfa=" + +(i) + ">" + (i + 1) + "</a>\n");

        }

        Label1.Text = sb.ToString();

    }

Pagingimizi olusturduktan sonra artık paging isleminin çalısması için Formumuzun loadında Datayı getirecek vodidi ve paging olusturacak voidi çagıralım.

  private int SayfaNo, Baslangic, Bitis;

    protected void Page_Load(object sender, EventArgs e)

    { 

      if (!Page.IsPostBack)

        {

            if (Request.QueryString["Sayfa"] != null)

            {

                SayfaNo = Convert.ToInt32(Request.QueryString["Sayfa"]);

            }

            else

            {

                SayfaNo = 0;

            }

            Baslangic=(SayfaNo *10) + 1;

            Bitis = Baslangic +  10 -1;

 

            PagingiOlustur();

            DatayiGetir(Baslangic,Bitis);       

        }

    }



Simdi Projemizi çalıstıralım;



Satır numaralarına dikkat ederseniz 1 den 10 a kadar devam ediyor.  2. sayfaya geçelim.



Yine satır numaralarına dikkat edersek  10 dan 20 ye kadar yani 2. sayfadaki kayıtları gösteriyor. Gerçekten çok hızlı : )

Sizde uyguladıgınızda datanın gridview ile paginglenmesine göre daha performanslı oldugunu göreceksiniz.

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://msdn.com

Bu makaleye henüz yorum yapılmamış. | 17.02.2007 01:51:21

AJAX DragPanel Extender


AJAX DragPanel Extender

DragPanel Extender WenForm üzerindeki kontrolleri web form üzerinde baska bir yere sürüklenmesini saglar. DragPanel Panel nesnesini hedef alır ve "Drag Handle" gibi kullanmak için kontrole eklenen ek paramatreler alır.

Bu kontrolü özellikle web sayfalarımızın reklam bannerlarında kullanırız. Buda sitemize hareketlilik kazandırır. Bende bu makalemde bu nesneniyi reklam banner örnegini kullanarak anlatacagım.

Kullanımı:

<ajaxToolkit:DragPanelExtender
ID="DPE1" runat="server"
TargetControlID="Panel3"
DragHandleID="Panel4"  />

Özellikleri:

    TargetControlID - Tasınacak olan Panel'in ID'si
    DragHandleID - Tasınacak panel için Tasınacagı panelin ID'si. Kullanıcı paneli bu panelin içerisinde bi yere tasıyabilecek.

Örnek:
Evet arkadaslar örnegimizde Reklam bannerlerini form üzerinde ordan oraya tasıyacagız  : )

Ilk olarak bir AJAX projesi açalım.


 
Daha Sonra sayfamıza 2 adet panel ekleyelim ve içerisine reklamını aldıgımız firmanın logosunu koyalım. Ayrıca bir adet de DragPanel Extender nesnesi ekleyelim.
Benim yaptıgım form asagıdaki gibidir.


 
Panel için yazdıgım kodlar;

  
  <asp:Panel ID="Panel1" runat="server" Direction="LeftToRight" HorizontalAlign="Left"
                ScrollBars="Horizontal" Width="100%" Height="800px">           
                    <asp:Panel ID="Panel3" runat="server" BorderStyle="Solid" BorderWidth="2px" Width="242px">
                        &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
                        <asp:Label ID="Label1" runat="server" Font-Bold="True" Font-Names="Verdana" Font-Size="Small"
                            Text="Kurtlar Vadisi Terör" ForeColor="#C00000"></asp:Label>
                        <br />
                        <br />
                        &nbsp; &nbsp;
                        <asp:Image ID="Image1" runat="server" ImageUrl="~/70866.jpg" /><br />
                        <br />
                </asp:Panel>
       </asp:Panel>

Panelimizi yani reklam bannerimizi tasınabilir hale getirelim.


<cc1:DragPanelExtender ID="DragPanelExtender11" runat="server"  DragHandleID="Panel1"
             TargetControlID="Panel3" />

Simdi projemizi çalıstıralım.
 


Reklam bannerimizi tasıyalım;


 
Evet reklam bannerimizi ordan oraya savurduk : )

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

Bu makaleye henüz yorum yapılmamış. | 15.02.2007 22:14:49

1 2 3
Ana Sayfa | Hakkımda | Çalışmalarım | Kitap Önerileri | Fotoğraflarım | RSS | İletişim
Sem Göksu 2004-2009 © Tüm Hakları Saklıdır.