16 Ara 2006 AJAX DropShadow Extender ve Datalist ile Kullanımı Kategori: AJAX Etiketler: ASP.NETASP.NET Ajax 0 Yorum 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
16 Ara 2006 AJAX Validator Callout Extender Kategori: AJAX Etiketler: ASP.NETASP.NET AjaxASP.NET 2.0 1 Yorum Merhaba arkadaşlar, bu makalemizde ajax control toolkit’in nesnelerinden Validator Callout Extender nesnesini ele alacağız.Validator Callout Extender AçıklamaValidatorCallout 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ÖKSUMCP | MCAD.NET | MCTS Örnek Kodlar için mail adresimi kullanabilirsiniz askisem@hotmail.com Kaynaklar http://atlas.asp.net
26 Kas 2006 Ajax Control Toolkit – Watermark Extender & Popup Control Extender Kategori: AJAX Etiketler: ASP.NETASP.NET Ajax 0 Yorum Merhaba arkadaşlar bu makalemizde Ajax’ın watermark extender ve popup control extender kontrollerinden bahsedeceğiz. Watermark Extender Textbox Watermark ASP.NET textbox kontrollerine uyarı özelligi kazandırılabilen AJAX kontrolüdür. Textbox nesnesi bos oldugunda kullanıcıya mesaj verilebilir. Yine CSS ekleyerek textbox'ın görünüm özelliklerini degistirip kullanıcıyı daha fazla bilgilendirebiliriz. Kullanıcı textbox'tan baska bir yere odaklandıgında belirlemis oldugumuz "watermark text" kullanıcıya gösterilir. Kullanıcıya daha fazla bilgi verilmek istediginde çok kullanıslıdır. Özellikleri; TargetControlID="TextBox1" // Baglı olacagı ASP.NET Textbox kontrolü WatermarkText="Lütfen Mail Adresini Giriniz" // Kullanıcıya verilecek mesaj WatermarkCssClass="watermarkCSS" // Hata verilecegi zaman textbox nesnesine uygulanacak sitilin adı. Nesnemizi ve özelliklerini inceledikten sonra dilerseniz bir örnek ile konuyu daha iyi kavrayalım. Örnegimiz su sekilde olacak; bir web sitesi üzerinde maillist olusturdugumuzu varsayalım. Kullanıcıdan mail adresini isteyip veritabanına kaydedecegiz. Eger kullanıcı mail adresini girmediyse textbox nesnesine bizim belirleyecegimiz sitil ve uyarı mesajını gösterecegiz. Bunun için Visual Studio 2005 açıp bir atlas projesi açalım. Formumuz üzerine 1 adet Textbox, 1 adet Buton ekleyelim. Textbox kullanıcıdan mail adresini alacak ve database'e kaydedecek. (Bu sadece örnek amaçlıdır. Database'e kaydetme islemini bu örnekte yapmayacagız.) Dizaynımızı tamamladıktan sonra, sayfamıza TextBoxWatermarkExtender nesnesi ekleyelim. Evet, form tasarımımızı tamamladık. Simdi artık Projemize atlas özelliklerini kazandırabiliriz. Bunun için Sayfamızın HTML kısmını açıp ilk olarak bir textbox için bir CSS olusturalım. <style type="text/css"> .SemSitil { background-color: #333366; color:Yellow; } </style> Formumuzun Head tagları arasını yukarıdaki sitil dosyasını ekleyelim. Son adım olarak WatermarkExtender nesnesini özelliklerini de yazalım. <cc1:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" runat="server"> <cc1:TextBoxWatermarkProperties TargetControlID="TextBox1" WatermarkCssClass="SemSitil" WatermarkText="Lütfen E-mail Adresini Giriniz"> </cc1:TextBoxWatermarkProperties> </cc1:TextBoxWatermarkExtender> Evet artık örnegimizi çalıstırabiliriz. Simdi Textbox içerisine girelim; Textbox1 nesnesi içerisine girdigimizde textbox'ın içerisi bosalır. Eger bos bırakıp baska bir yere geçersek yine yukarıdaki gibi bizi uyaracaktır. Eger bir seyler yazarsak yazdıgımız sekilde kalır. Popup Control Extender Popup control extender kontrolü içerige ek olarak eklenen bir açılabilir pencere (Popup) özelligi kazandırır. Bu pencere update panel içerisinde çalısır, bu yüzden server side çalısmasına ragmen sayfanın refresh etmesini engeller. Bu popup ayrıca içerige(HTML Elementleri) eklenecek bilgileri tutar. Bu konrola ait özellikler · TargetControlID - Eklenecek kontorlün ID'si · PopupControlID - Gösterilecek olan popupun ID'si · Position - Popupun gösterilecegi yer. (Left, Right, Top, Bottom, Center) · CommitProperty - Popupun sonucu · CommitScript - Popup sonucuna ek bilgi koymak için script Evet, bu kontrolümüzü de tanıdıktan sonra yeni bir örnek ile bu konuyu da pekistirelim. Örnegimizde bir mail formu tasarlayacagız ve mail gönderecegimiz kisiyi popup pencereden seçtirecegiz. Bunun için projemize yeni bir sayfa daha ekleyelim. Sayfamız üzerine 1- Script Menager 1- PopupControlExtender 1- Update panel 1- Panel 1- RadioButtonList Kontrolü ekleyelim. 1- Textbox 1- Buton ekleyelim Benim tasarlamıs oldugum form asagıdaki gibidir. Simdi ilk olarak AtlasControlToolkit'i projemize import edelim. Imports AtlasControlToolkit Daha sonra RadioButtonList1SelectedIndexChanged ewentine asagıdaki kodları ekleyelim. Protected Sub RadioButtonList1_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) If Not (String.IsNullOrEmpty(RadioButtonList1.SelectedValue)) Then PopupControlExtender.GetCurrent(Me.Page).Commit(RadioButtonList1.SelectedValue) End If RadioButtonList1.ClearSelection() End Sub Daha sonra sayfamızın HTML kısmına gidip Popup Control Extender kontrolünün özelliklerini ayarlayalım. <atlasToolkit:PopupControlExtender ID="PopupControlExtender1" runat="server"> <atlasToolkit:PopupControlProperties TargetControlID="MyTextBox" PopupControlID="Panel1" CommitProperty="value" CommitScript="e.value += ’;’;" Position="Right" /> </atlasToolkit:PopupControlExtender> HTML deki özellikleri de ayarladıktan sonra artık bu örnegimizi de çalıstırabiliriz. Ilk olarak kime isimli textbox üzerine tıklayalım ve popup formumuz açıldıgını görelim Açılan popup formdan mail gönderecegimiz kisiyi seçelim; Sem Göksu'yu seçtim ben (: Bu makalenin de sonuna geldik, baska bir makalede görüsmek üzere basarı ve iyi günler dilerim. Sem GÖKSU MCP | MCAD.NET Örnek Kodlar için mail adresimi kulalnabilirsiniz askisem@hotmail.com Kaynaklar http://atlas.asp.net
26 Kas 2006 Ajax Control Toolkit – FilteredTextbox Extender Kategori: AJAX Etiketler: ASP.NETASP.NET Ajax 0 Yorum Merhaba arkadaşlar bu makalemizde Ajax Filtered Textbox Extender kontrolünün nasıl kullanıldığına göz atacağız. FilteredTextbox Extender Açıklama: FilteredTextBox, kullanıcıların textbox içerisine geçersiz karakter girmelerini engelleyen Atlas kontrolüdür. Örnegin sadece sayısal degerleri girmemiz, yâda sadece küçük harf girmemize izin veren bunun dısındaki karakterleri kabul etmeyen atlas kontrolüdür. Özellikleri: · TargetControlID - Filtrelenecek atlas kontrolünün ID'si · FilterType - Filtreleme tipini belirler (Numbers, LowercaseLetters, UppercaseLetters, ve Custom. Eger Custom Seçilirse ValidChars içerisinde izin verilecek karakterler yazılır) · ValidChars - Custom Type seçilmisse Geçerli olacak karakterler bura da belirtilir. Örnek Uygulama: Numbers , LowercaseLetters , UppercaseLetters , ve Custom özelliklerini daha iyi anlamamız için bir örnek uygulama yapacagız. Visual Studio içerisinde yeni bir atlas projesi olusturalım. Daha Sonra projemize 4 adet Textbox, 4 adet label ve 4 adet FilteredTextBox kontrolü ekleyelim. 4 filtreleme tipini de bu textboxlarda inceleyecegiz. Benim tasarlamıs oldugum sayfa asagıdaki gibidir. 1. Textbox da Custom Tipi yani bizim belirleyecegimiz karakterleri, 2. textbox da yalnızca küçük harfteki karakterlere, 3. textbox da sadece büyük harfteki karakterlere, 4. textbox da da sadace Numeric degerlere izin veren FilteredTextboxExtender Atlas özellikleri yazacagız. Custom özellik için yazacagımız FilteredTextboxExtender Özellikleri; <asp:TextBox ID="txtCustom" runat="server" Font-Names="Verdana" Font-Size="Small"></asp:TextBox> <asp:Label ID="Label1" runat="server" Text="Custom" Font-Bold="True" Font-Names="Verdana" Font-Size="Small"></asp:Label> <cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender1" runat="server"> <cc1:FilteredTextBoxProperties FilterType="Custom, Numbers" TargetControlID="txtCustom" ValidChars=",." /> </cc1:FilteredTextBoxExtender> Burada sadece Numeric degerlere ve "," , "." Karakterlerine izin verilir. lowercaseLetters özellik için yazacagımız FilteredTextboxExtender Özellikleri; <asp:TextBox ID="txtKucukHarf" runat="server" Font-Names="Verdana" Font-Size="Small"></asp:TextBox> <asp:Label ID="Label2" runat="server" Text="Küçük Harf" Font-Bold="True" Font-Names="Verdana" Font-Size="Small"></asp:Label> <cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender2" runat="server"> <cc1:FilteredTextBoxProperties FilterType="lowercaseLetters" TargetControlID="txtKucukHarf" /> </cc1:FilteredTextBoxExtender> Burada sadece küçük harf girisine izin verilecek. UppercaseLetters özellik için yazacagımız FilteredTextboxExtender Özellikleri; <asp:TextBox ID="txtBuyukHarf" runat="server" Font-Names="Verdana" Font-Size="Small"></asp:TextBox> <asp:Label ID="Label3" runat="server" Text="Büyük Harf" Font-Bold="True" Font-Names="Verdana" Font-Size="Small"></asp:Label> <cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender3" runat="server"> <cc1:FilteredTextBoxProperties FilterType="UppercaseLetters" TargetControlID="txtBuyukHarf" /> </cc1:FilteredTextBoxExtender> Burada sadece büyük harf girisine izin verilecek. Numbers özellik için yazacagımız FilteredTextboxExtender Özellikleri; <asp:TextBox ID="txtNumeric" runat="server" Font-Names="Verdana" Font-Size="Small"></asp:TextBox> <asp:Label ID="Label4" runat="server" Text="Numeric" Font-Bold="True" Font-Names="Verdana" Font-Size="Small"></asp:Label> <cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender4" runat="server"> <cc1:FilteredTextBoxProperties FilterType="Numbers" TargetControlID="txtNumeric" /> </cc1:FilteredTextBoxExtender> Burada da sadece Numeric degerlere izin verilecektir. Son olarak projemizi çalıstıralım ve test edelim. Görüldügü gibi 1. textboxda sadece Numeric degerler ve geçerli kıldıgımız "," ve "." 2. textboxda yalnızca küçük harf 3. textbox da yalnızca büyük harf. 4. textboxda da sadece Numeric degerlere izin verildi. Bu makalenin de sonuna geldik, baska bir makalede görüsmek üzere basarı ve iyi günler dilerim. Sem GÖKSU MCP | MCAD.NET Örnek Kodlar için mail adresimi kullanabilirsiniz askisem@hotmail.com Kaynaklar http://atlas.asp.net
26 Kas 2006 Ajax Control Toolkit – Always Visible Control Extender Kategori: AJAX Etiketler: ASP.NETASP.NET Ajax 0 Yorum Merhaba arkadaşlar bu makalemizde Ajax Always Visible Control Extender kontrolünün nasıl kullanıldığına göz atacağız.Açıklama AlwaysVisibleControl içerik kaydırıldıgında yâda yeniden boyutlandırıldıgında sayfa background'u üzerinde float görünen sayfa kontrollerine izin veren basit bir kontroldür. Içerigi degistirseniz bile sizin belirlemis oldugunuz yerde kalır. Sayfa yüklenirken flash kontrolüne yakalanmamak için kontrolün pozisyonunu absolutely olarak belirlemeliyiz Özellikler · TargetControlID - Sürekli gösterilecek olan kontrolün ID'si · HorizontalOffset - Browserin yatay kenarından pixel olarak uzaklıgı. Varsayılan olarak 0'dır. · HorizontalSide - Yatay olarak browser üzerindeki tarayıcının pozisyonunu belirler (Left, Center, yada Right) Varsayılanı Left'dir. · VerticalOffset - Browserin dikey kenarından pixel olarak uzaklıgı. Varsayılan olarak 0'dır. · VerticalSide - Dikey olarak browser üzerindeki tarayıcının pozisyonunu belirler (Top, Middle, yada Bottom) Varsayılanı Top'dır. · ScrollEffectDuration - Kontrolün pozisyonunun degistiginde scroll efektinin süresinin uzunlugu. Varsayılan olarak 1 saniyedir. Örnek Uygulama Kontrolümüz ile ilgili bilgi edindikten sonra örnek bir uygulama yapabiliriz. Ofis içerisinde kullanılan bir Intranet uygulaması yaptıgımızı var sayalım. Bu uygulama içerisinde kullanıcılar birbirlerini mesaj gönderebiliyorlar. Kullanıcı programını açtıgı anda maili olup olmadıgını görmek isteyecektir. Yine aynı sekilde sayfa içerisinde dolasırken mesajı olup olmadıgını görmek isteyebilir. Burada Always Visible Control Extender kontrolünü kullanabiliriz. Kullanıcı sayfanın neresinde olursa olsun Always Visible Control Extender kontrolü ile mesajı olup olmadıgını görebilir. Artık örnegimize geçebiliriz, yeni bir atlas projesi olusturalım. Projemizi olusturduktan sonra Sayfamızın scroll barların çıkması için biraz uzun bir metin, 1 panel, 1 label 1update panel ve 1 de buton ekleyelim. Benim sayfa tasarımım asagıdaki gibidir. Kullanıcı sayfada gezinirken maili olup olmadıgını kontrol edebilecek. Bunun için ilk olarak maili olup olmadıgını kontrol edecek kodları yazalım. Private MailSayisi As Integer = 1 ’ bu deger normalde DB’den gelecek Ama bizim amacımız bu degil bu yüzdeb manuel olarak belirledik. Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load MailKontrolET() End Sub Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click MailSayisi = MailSayisi - 1’ mail okundugunda mail MailKontrolET fonksiyonu yeniden çalısıyor. MailKontrolET() End Sub Protected Sub MailKontrolET()’ burada mail olup olmadıgı kontrol ediliyor. If MailSayisi > 0 Then Label1.Text = "Okunmamıs Mesajınız Var" Else Label1.Text = "Hiç Mesajınız Yok" End If End Sub Simdi artık Always Visible Control Extender kontrolümüzü çalıstıracak kodalara geçelim. <cc1:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender1" runat="server"> <cc1:AlwaysVisibleControlProperties HorizontalOffset="0" HorizontalSide="right" ScrollEffectDuration="0.1" TargetControlID="Panel1" VerticalOffset="0" VerticalSide="Bottom" /> </cc1:AlwaysVisibleControlExtender> Always Visible Control Extender özelliklerinide yazdıktan sonra projemizi çalıstırabiliriz. Evet, nesnemiz belirledigimiz gibi sag alt kösede yer alıyor. Simdi sayfamızı asagıya dogru kaydıralım. Gördügünüz gibi nesnemizde bizimle birlikte gelir. Simdi okunmamıs olan maili okuyalım ve atlasın baska bir nimeti olan UpdatePanel'den yararlanalım. Evet, sayfamız yenilenmeden mesajımızı okuduk. Yeni mesajımız var mı yok mu kontrol edebiliyoruz. Normal de bir timer nesnesi ile mailimiz olup olmadıgını belirli sürelerle kontrol ettirebilirdik. Ama suan için bizim esas konumuz bu olmadıgı için sadece manuel olarak islem yaptırdık. Bu makalenin de sonuna geldik, baska bir makalede görüsmek üzere basarı ve iyi günler dilerim. Sem GÖKSU MCP | MCAD.NET Örnek Kodlar için mail adresimi kullanabilirsiniz askisem@hotmail.com Kaynaklar http://atlas.asp.net