NAVĠGATĠON (SĠTE GEZĠNME) KONTROLLERĠ

Transkript

1 NAVĠGATĠON (SĠTE GEZĠNME) KONTROLLERĠ MENÜ KONTROLÜ Asp.Net bize hazır olarak kullanabileceğimi menü kontrolü verir. Bu kontrolle çok daha pratik menüleri hızlı bir şekilde hazırlayabiliriz. Bu işlem için öncelikle projemiz içine Site.Map XML dosyasını projemize eklemeliyiz. Bunu veri kaynağı olarak kullanacağız. Bunun içerisine linklerimizi hiyerarşi olarak ekliyoruz. XML dosyasının kullanılması English, Türkçe linklere otomatik dönüştürmemizi olarak daha kolay hale getirecektir. Buradan Bilgileri okuyacak olan SiteMapDataSource da eklenmeli. Bu nesne site.map den bilgileri okuyup Menu nesnesine aktaracaktır. Eğer XML dosyası kullanmayacaksak özelliklerden Items tıklayıp Linkleri kendimiz direk olarak ekleyebiliriz. Eğer XML bağlantı devam ediyorsa buraya eklenen linkler gözükmez.

2 Web.sitemap <?xml version="1.0" encoding="utf-8"?> <sitemap xmlns=" > <sitemapnode url="" title="ana MENÜ" description=""> /> /> /> /> /> <sitemapnode url="analink1.aspx" title="analink1" description="analink1 gider"> <sitemapnode url="altlink1.aspx" title="altlink1" description="altlink1 gider" <sitemapnode url="altlink2.aspx" title="altlink2" description="altlink2 gider" </sitemapnode> <sitemapnode url="analink2.aspx" title="analink2" description="analink2 gider"> <sitemapnode url="altlink3.aspx" title="altlink3" description="altlink3 gider" <sitemapnode url="altlink4.aspx" title="altlink4" description="altlink4 gider" </sitemapnode> <sitemapnode url="analink3.aspx" title="analink3" description="analink3 gider" </sitemapnode> </sitemap> Default.aspx Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head runat="server"> <title>untitled Page</title> </head> <body> <form id="form1" runat="server"> <div> </div> </form> </body> </html> <asp:menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1" StaticDisplayLevels="2"> </asp:menu> <asp:sitemapdatasource ID="SiteMapDataSource1" runat="server" /> PROGRAMATĠK OLARAK MENÜYÜ KONTROL ETME

3 Default.aspx Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head runat="server"> <title>untitled Page</title> </head> <body> <form id="form1" runat="server"> <div> <asp:menu ID="Menu1" runat="server"> </asp:menu> </div> </form> </body> </html> Default.aspx.cs using System; using System.Configuration; using System.Data; using System.Linq; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.HtmlControls; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Xml.Linq; public partial class _Default : System.Web.UI.Page protected void Page_Load(object sender, EventArgs e) if (!IsPostBack) MenuItem Eleman = new MenuItem(); // Eleman = new MenuItem(); Eleman.Text = "Üniversitelerimiz"; Eleman.NavigateUrl = "Default2.aspx"; Eleman.ImageUrl = "Unresmi.jpg"; Menu1.Items.Add(Eleman); //sayfada bir tane menu1 ismiyle hazır nesne bulunmalı. Yoksa kendimizi kodla Menu Menu1= new Menu(); sınıfı şeklinde oluşturmalıyız. //Gazi Eleman = new MenuItem();

4 Eleman.Text = "Gazi Üniversitesi"; Eleman.NavigateUrl = "Default3.aspx"; Eleman.ImageUrl = "Gazi.jpg"; Menu1.Items[0].ChildItems.Add(Eleman); // Eleman = new MenuItem(); Eleman.Text = "Tıp Fakültesi"; Eleman.NavigateUrl = "Default4.aspx"; Eleman.ImageUrl = "Tip.jpg"; Menu1.Items[0].ChildItems[0].ChildItems.Add(Eleman); // Eleman = new MenuItem(); Eleman.Text = "Mühendisli Fakültesi"; Eleman.NavigateUrl = "Default5.aspx"; Eleman.ImageUrl = "Muh.jpg"; Menu1.Items[0].ChildItems[0].ChildItems.Add(Eleman); // Eleman = new MenuItem(); Eleman.Text = "Fen Edebiyat Fakültesi"; Eleman.NavigateUrl = "Default6.aspx"; Eleman.ImageUrl = "Fen.jpg"; Menu1.Items[0].ChildItems[0].ChildItems.Add(Eleman); //Hacettepe Eleman = new MenuItem(); Eleman.Text = "Hacettepe Üniversitesi"; Eleman.NavigateUrl = "Default7.aspx"; Eleman.ImageUrl = "Hacettepe.jpg"; Menu1.Items[0].ChildItems.Add(Eleman); // Eleman = new MenuItem(); Eleman.Text = "Tıp Fakültesi"; Eleman.NavigateUrl = "Default8.aspx"; Eleman.ImageUrl = "Tip.jpg"; Menu1.Items[0].ChildItems[1].ChildItems.Add(Eleman); // Eleman = new MenuItem(); Eleman.Text = "Eczacılık Fakültesi"; Eleman.NavigateUrl = "Default9.aspx"; Eleman.ImageUrl = "Ecz.jpg"; Menu1.Items[0].ChildItems[1].ChildItems.Add(Eleman);

5 DROPDOWNLIST ĠN GELĠġMĠġ KULLANIMLARI (Text ve Value değerlerinin VT den alınması. Dinamik olarak bir Fakulte, Bolum, Anabilim dalları gibi hiyerarģik yapıların seçilmesi) Default.ASPX SAYFASI Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head runat="server"> <title>untitled Page</title> <style type="text/css">.style1 color: #FF0000; </style> </head> <body> <form id="form1" runat="server"> <div>  Fakülte Adını Seçiniz <asp:dropdownlist ID="FakulteListesi" runat="server" AppendDataBoundItems="True" CssClass="input-text" AutoPostBack="true" DataSourceID="SqlDataSource2" DataTextField="FakulteAdi" DataValueField="FakulteID" ValidationGroup="akayit"> </asp:dropdownlist>

6  <asp:sqldatasource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:VTbaglantisi %>" ProviderName="<%$ ConnectionStrings:VTbaglantisi.ProviderName %>" SelectCommand="SELECT [FakulteID], [FakulteAdi] FROM [Fakulteler] ORDER BY [FakulteAdi]"> </asp:sqldatasource> Bölüm Seçiniz <asp:dropdownlist ID="BolumListesi" runat="server" AutoPostBack="true" DataSourceID="BolumlerDataSource" DataTextField="BolumAdi" DataValueField="BolumID" ValidationGroup="akayit" > </asp:dropdownlist> <asp:sqldatasource ID="BolumlerDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:VTbaglantisi %>" ProviderName="<%$ ConnectionStrings:VTbaglantisi.ProviderName %>" SelectCommand="SELECT BolumID,FakulteID,BolumAdi FROM Bolumler WHERE ([FakulteID] =?)"> <SelectParameters> <asp:controlparameter ControlID="FakulteListesi" Name="FakulteID" PropertyName="SelectedValue" Type="Int32" /> </SelectParameters> </asp:sqldatasource> <span class="style1">yeni Fakülte Ekle</span> Fakültenin Adı<asp:TextBox ID="TextBoxFakulteAdi" runat="server"></asp:textbox><asp:button ID="Button1" runat="server" onclick="button1_click" Text="Button" /> <span class="style1">yeni Bölüm Ekle</span>  Fakülte Adını Seçiniz <asp:dropdownlist ID="FakulteSecinizListesi" runat="server" AppendDataBoundItems="True" CssClass="input-text" AutoPostBack="true" DataSourceID="SqlDataSource3" DataTextField="FakulteAdi" DataValueField="FakulteID" ValidationGroup="akayit"> </asp:dropdownlist>

7 <asp:sqldatasource ID="SqlDataSource3" runat="server" ConnectionString="<%$ ConnectionStrings:VTbaglantisi %>" ProviderName="<%$ ConnectionStrings:VTbaglantisi.ProviderName %>" SelectCommand="SELECT [FakulteID], [FakulteAdi] FROM [Fakulteler] ORDER BY [FakulteAdi]"> </asp:sqldatasource> Bölüm Adını Yaz <asp:textbox ID="TextBoxBolumAdi" runat="server"></asp:textbox> <asp:button ID="Button2" runat="server" Text="Button" onclick="button2_click" /> </div> </form> </body> </html> Default.ASPX.CS SAYFASI using System; using System.Configuration; using System.Data; using System.Data.OleDb; using System.Linq; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.HtmlControls; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Xml.Linq; public partial class _Default : System.Web.UI.Page protected void Page_Load(object sender, EventArgs e) BolumListesi.Items.Clear(); BolumListesi.Items.Add("Seçiniz"); OleDbConnection Baglanti; OleDbCommand Komut; OleDbDataReader Okuyucu; String BaglantiYolu = ConfigurationManager.ConnectionStrings["VTbaglantisi"].ConnectionString; //Yolu web.config dosyasından alıyor.. Baglanti = new OleDbConnection(BaglantiYolu); Baglanti.Open(); Komut = new OleDbCommand(("SELECT * FROM Bolumler WHERE FakulteID LIKE '" + FakulteListesi.SelectedValue + "'"), Baglanti); Okuyucu = Komut.ExecuteReader(); while (Okuyucu.Read()) ListItem Eleman = new ListItem(); Eleman.Text = Okuyucu["BolumAdi"].ToString(); Eleman.Value = Okuyucu["BolumID"].ToString();

8 BolumListesi.Items.Add(Eleman); Baglanti.Close(); protected void Button1_Click(object sender, EventArgs e) //Bağlantıyı Kuruyor... String BaglantiYolu = ConfigurationManager.ConnectionStrings["VTbaglantisi"].ConnectionString; //Yolu web.config dosyasından alıyor.. OleDbConnection Baglanti = new OleDbConnection(BaglantiYolu); Baglanti.Open(); OleDbCommand Komut; String Sorgu = "INSERT INTO Fakulteler (FakulteAdi) VALUES ('" + TextBoxFakulteAdi.Text + "')"; Komut= new OleDbCommand(Sorgu, Baglanti); Komut.ExecuteNonQuery(); protected void Button2_Click(object sender, EventArgs e) //Bağlantıyı Kuruyor... String BaglantiYolu = ConfigurationManager.ConnectionStrings["VTbaglantisi"].ConnectionString; //Yolu web.config dosyasından alıyor.. OleDbConnection Baglanti = new OleDbConnection(BaglantiYolu); Baglanti.Open(); OleDbCommand Komut; String Sorgu = "INSERT INTO Bolumler (FakulteID,BolumAdi) VALUES ('" + FakulteSecinizListesi.SelectedValue + "','" + TextBoxBolumAdi.Text + "')"; Komut = new OleDbCommand(Sorgu, Baglanti); Komut.ExecuteNonQuery(); Web.Config Dosyası <?xml version="1.0"?> <connectionstrings> <add name="vtbaglantisi" connectionstring="provider=microsoft.jet.oledb.4.0;data Source=" DataDirectory /vt1.mdb"" providername="system.data.oledb"/> </connectionstrings>

9 LĠSTVĠEW VE DATAPAGER KONTROLLERĠ Not: Enable Paging özelliği seçilirse DataPager nesnesi ListView in kendi içerisinde otomatik olarak oluşturulur. Bu durumda dışarıdan bir tane daha DataPager kullanmaya gerek yoktur. DEFAULT.ASPX Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head runat="server"> <title>untitled Page</title> </head> <body> <form id="form1" runat="server"> <div> <asp:listview ID="ListView1" runat="server" DataKeyNames="ID" DataSourceID="SqlDataSource1"> /> %>' /> <ItemTemplate> <span style="background-color: #E0FFFF;color: #333333;">ID: <asp:label ID="IDLabel" runat="server" Text='<%# Eval("ID") %>' /> KullaniciAdi: <asp:label ID="KullaniciAdiLabel" runat="server" Text='<%# Eval("KullaniciAdi") %>' /> Sifre: <asp:label ID="SifreLabel" runat="server" Text='<%# Eval("Sifre") %>' AdSoyad: <asp:label ID="AdSoyadLabel" runat="server" Text='<%# Eval("AdSoyad")

10 </span> </ItemTemplate> <EmptyDataTemplate> <span>no data was returned.</span> </EmptyDataTemplate> <LayoutTemplate> <div ID="itemPlaceholderContainer" runat="server" style="font-family: Verdana, Arial, Helvetica, sans-serif;"> <span ID="itemPlaceholder" runat="server" /> </div> </LayoutTemplate> </asp:listview> <asp:datapager ID="DataPager1" runat="server" PagedControlID="ListView1" PageSize="5" > <Fields> <asp:nextpreviouspagerfield ShowFirstPageButton="True" ButtonType="Image" FirstPageImageUrl="~/Resimler/Ilk.jpg" PreviousPageImageUrl="~/Resimler/Onceki.jpg" ShowNextPageButton="False" /> <asp:numericpagerfield ButtonCount="10"/> <asp:nextpreviouspagerfield ShowLastPageButton="True" ShowPreviousPageButton="False" ButtonType="Image" LastPageImageUrl="~/Resimler/Son.jpg" NextPageImageUrl="~/Resimler/sonraki.jpg" /> </Fields> </asp:datapager> </div> </form> </body> <asp:sqldatasource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:VTbaglantisi %>" ProviderName="<%$ ConnectionStrings:VTbaglantisi.ProviderName %>" SelectCommand="SELECT * FROM [Tablo1]"></asp:SqlDataSource>

11 </html> DEFAULT.ASPX.CS using System; using System.Configuration; using System.Data; using System.Linq; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.HtmlControls; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Xml.Linq; public partial class _Default : System.Web.UI.Page protected void Page_Load(object sender, EventArgs e) WEB.CONFIG <?xml version="1.0"?> <configuration> <connectionstrings> <add name="vtbaglantisi" connectionstring="provider=microsoft.jet.oledb.4.0;data Source=" DataDirectory /vt1.mdb"" providername="system.data.oledb"/> </connectionstrings> </configuration>

12 LĠSTVĠEW ĠÇĠNDE FOTOGRAF VE LĠNK BAĞLANTILARININ KULLANIMI MASTER PAGE SAYFASI (SADECE FirmaID yi almak için konuldu. Gereksiz ise çıkarınız) Master Language="C#" AutoEventWireup="true" CodeFile="FirmaMasterPage.master.cs" Inherits="Firmalar_FirmaMasterPage" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head runat="server" > <title>sanayimiz.com</title> <meta http-equiv="content-type" content="text/html; charset=iso " /> <link href="style.css" type="text/css" rel="stylesheet" /> <asp:contentplaceholder ID="head" runat="server"> </asp:contentplaceholder> </head> <body id="sayfa" runat="server" > <form id="form1" runat="server"> <table align="center" style="width: 895px; background-color: #FFFFFF; "> GEREKSİZ KODLAR ÇIKARTILMIŞTIR... <table style="width: 100%;" id="usttablo" runat="server" > </form> </body> </html> using System; using System.Collections; using System.Configuration; using System.Data; using System.Linq; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; using System.Xml.Linq; using System.Data.OleDb; public partial class Firmalar_FirmaMasterPage : System.Web.UI.MasterPage int FirmaID = 0;

13 protected void Page_Load(object sender, EventArgs e) if (!IsPostBack) //İlk yüklemede çalıştır Nesneler Nesne = new Nesneler(); buraya geldiyse oku. if (!string.isnullorempty(request.querystring["firmaid"])) //Tıklamayla FirmaID = int.parse(request.querystring["firmaid"]); //FirmaID yi String Sorgu; OleDbDataReader Okuyucu; //Firmanın Başlığını getiriyor LinkButtonFirmaBaslik.Text = Nesne.DegerOku("SELECT FirmaAdi FROM FirmaBilgileri WHERE FirmaID =? ", FirmaID); //Firmanın Adres bilgilerini getiriyor Sorgu = string.format("select * FROM IletisimBilgileri WHERE FirmaID =0 ", FirmaID); Okuyucu = Nesne.BilgileriReaderaOku(Sorgu); if (Okuyucu.Read()) LabelAdresTelefon.Text = Okuyucu["Adres"].ToString() + ", " + Okuyucu["Sehir"].ToString() + "/" + Okuyucu["Ulke"].ToString() + ", Tel:" + Okuyucu["Telefon"].ToString() + ", Fax:" + Okuyucu["Fax"].ToString(); Nesne.Kapat(); DİKKAT BURADA BAZI KODLAR ÇIKARTILDI. DİREK ÇALIŞMAZ. LİSTVİEW İÇİNDE FOTOGRAFLI ÜRÜN GÖRÜNTÜLEME

14 Page Language="C#" MasterPageFile="FirmaMasterPage.master" AutoEventWireup="true" CodeFile="UrunListesi.aspx.cs" Inherits="_UrunListesi" Title="Bilgileri Listeleme" %> <asp:content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> <link rel="stylesheet" href="script/sifr3/css/sifr.css" type="text/css" /> <link rel="stylesheet" type="text/css" href="script/shadowbox/shadowbox.css"/> <script type="text/javascript" src="script/shadowbox/shadowbox.js"></script> <script type="text/javascript">shadowbox.init( language: "tr" );</script> <style type="text/css">.mavibuton border-style:solid; border-width:1px; border-color:#3333ff; background-color:#3399ff; color:yellow; font-size:small; text-decoration:none;.saributon border-style:solid; border-width:1px; border-color:#ff9900; background-color:#ffcc00; color:#3366ff; font-size:small; text-decoration:none;.mavietiket color: #3399FF; font-family:verdana; font-size:12px;.grietiket color: #3399FF; font-family:verdana; font-size:12px;

15 div.kresim width:112px; border:1px solid #ddd; float:left; div.kresim div.resim-dis display: table; height: 100px; width:100px; #position: relative; overflow: hidden; margin:6px; div.kresim div.resim-orta #position: absolute; #top: 50%; display: table-cell; vertical-align: middle; div.kresim div.resim-ic #position: relative; #top: -50%; width:100px; text-align:center; </style> </asp:content> <asp:content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">  <div style="border: 1px solid #6699FF; padding:5px; background-color: #eef4fa; font-weight: bold; font-size: 14px; font-family: Verdana; color: #336699; text-align: center;" > ÜRÜN LİSTESİ </div> <table style="width:100%"> <tr> <td style="width:60%; " valign="top" >  <asp:listview ID="ListView1" runat="server" DataSourceID="DataSource1" GroupItemCount="1"> <LayoutTemplate> <table ID="tbl1" runat="server" cellpadding="2" width="#"> <tr> <th colspan="5"> </th> </tr> <tr ID="groupPlaceholder" runat="server"> </tr> </table> </LayoutTemplate> <GroupTemplate> <tr ID="tr1" runat="server">

16 width:thin;"></hr> <td ID="itemPlaceholder" runat="server"> </td> </tr> </GroupTemplate> <GroupSeparatorTemplate> <tr ID="Tr2" runat="server"> <td colspan="5"> <div > <hr style="color:#9dbbcc; border-bottom- </div> </td> </tr> </GroupSeparatorTemplate> <ItemTemplate> <td ID="Td1" runat="server" align="left"> <table > <tr> <td style="vertical-align:middle;"> <div class="kresim"> <div class="resim-dis"> <div class="resim-orta"> <div class="resim-ic"> ResolveUrl("../Resimler/UrunResimleriBuyuk/0"))%>" <a href="<%#eval("resimadi", rel="shadowbox[galeri];options=countertype:'skip',continuous:true,animsequence:'sync' "> runat="server" AlternateText='<%#Eval("ResimAdi") %>' ResolveUrl("../Resimler/UrunResimleriKucuk/0"))%>' /> <asp:image ID="Image1" ImageUrl='<%#Eval("ResimAdi", </a> </div> </div> </div> </div> </td> <td style="width:400px;" > <asp:hyperlink ID="LinkUrunAdi" runat="server" NavigateUrl='<%# "UrunDetay.aspx?UrunID=" + Eval("UrunID") + "&FirmaID=" + Eval("FirmaID") %>' Text='<%# Eval("UrunAdi") %>' Font- Size="14px" /> runat="server" <asp:label ID="LabelUrunOzellikleri" Text=<%#Nesneler.MetninBoyunuKisalt250(Eval("UrunOzellikleri").ToString())%> /> Tarihi:</span> runat="server" <span class="mavietiket" > Güncelleme <asp:label ID="LabelGuncellemeTarihi"

17 Text='<%# Eval("GuncellemeTarihi") %>' /> </td> <td style=" padding-left:10px; border-leftwidth:1px; border-left-color:#dddddd; border-left-style:solid;"> <table> <tr> <td class="mavietiket" > Fiyatı: </td> </tr> <tr> <td > <asp:label ID="LinkFiyat" runat="server" Text='<%# Eval("Fiyati")%>' /> <asp:label ID="LabelParaBirimi" runat="server" Text='<%# Eval("ParaBirimi")%>' /> / <asp:label ID="LabelSatisBirimi" runat="server" Text='<%# Eval("SatisBirimi")%>' /> </td> </tr> <tr> <td> <asp:linkbutton ID="LinkButtonUrunDetayi" runat="server" CssClass="MaviButon" width="70px" PostBackUrl='<%# "UrunDetay.aspx?UrunID=" + Eval("UrunID") + "&FirmaID=" + Eval("FirmaID") %>' >Ürün Detayi</asp:LinkButton> </td> </tr> <tr> <td> <asp:linkbutton ID="LinkButtonSiparisVer" runat="server" CssClass="SariButon" width="70px" PostBackUrl='<%# "SiparisVer.aspx?UrunID=" + Eval("UrunID") + "&FirmaID=" + Eval("FirmaID") %>' >Sipariş Ver</asp:LinkButton> </td> </tr> </td> </table> </td> </ItemTemplate> </td> </tr> </table> <EmptyDataTemplate> <span style="color:red;">bilgi Bulunamadı..</span> </EmptyDataTemplate>

18 </asp:listview> <div style="text-align: center;font-family: Verdana, Arial, Helvetica, sans-serif; color: #333333; font-size:medium; ">  <asp:datapager ID="DataPager1" runat="server" PageSize="4" PagedControlID="ListView1" > <Fields> <asp:nextpreviouspagerfield ButtonType="Image" ShowFirstPageButton="True" FirstPageImageUrl="Images/Ilk.jpg" ShowPreviousPageButton="True" PreviousPageImageUrl="Images/Onceki.jpg" ShowNextPageButton="False" /> <asp:numericpagerfield ButtonCount="10" /> </div> <asp:nextpreviouspagerfield ButtonType="Image" ShowNextPageButton="True" NextPageImageUrl="Images/Sonraki.jpg" ShowLastPageButton="True" LastPageImageUrl="Images/Son.jpg" ShowPreviousPageButton="False" /> </Fields> </asp:datapager>  <asp:objectdatasource ID="DataSource1" runat="server" TypeName="Nesneler" SelectMethod="UrunGetir"> <SelectParameters> <asp:querystringparameter Name="FirmaID" QueryStringField="FirmaID" Type="Int32" /> </SelectParameters> </asp:objectdatasource > </tr> </table> </td> </asp:content> ******************

19 using System; using System.Collections; using System.Configuration; using System.Data; using System.Linq; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.HtmlControls; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Xml.Linq; using System.Data.OleDb; public partial class _UrunListesi : System.Web.UI.Page protected void Page_Load(object sender, EventArgs e) *************** using System; using System.Data; using System.Configuration; using System.Linq; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.HtmlControls; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Xml.Linq; using System.Data.OleDb; using System.Drawing; using System.Drawing.Imaging; using System.Data.SqlClient; using System.Text; using System.Collections; using System.Windows.Forms; using System.Net.Mail; using System.Data.Sql; using System.IO; //şifreleme için eklendi using System.Security.Cryptography; //şifreleme için eklendi public class Nesneler OleDbConnection Baglanti; OleDbDataReader Okuyucu; //Firmaya Ait Ürün bilgilerini okuyor============================================= //if (!string.isnullorempty(firmaid)) public static DataSet UrunGetir(int FirmaID)

20 if (FirmaID!= 0) string Sorgu = "SELECT Urunler.UrunID, Urunler.FirmaID, FirmaBilgileri.FirmaAdi, Urunler.UrunAdi, Urunler.UrunOzellikleri, Urunler.Fiyati,Urunler.ParaBirimi, Urunler.SatisBirimi, UrunResimleri.ResimAdi, Urunler.GuncellemeTarihi FROM Urunler, FirmaBilgileri, UrunResimleri WHERE FirmaBilgileri.FirmaID=Urunler.FirmaID AND Urunler.UrunID=UrunResimleri.UrunID AND UrunResimleri.GosterimSirasi=1 AND Urunler.FirmaID=" + FirmaID; Nesneler Nesne = new Nesneler(); DataSet YeniDataSetim = Nesne.BilgileriDataSeteOku(Sorgu); //Bilgileri Datasete yüklüyor return YeniDataSetim; else return null; ÜRÜN DETAY <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UrunDetay.aspx.cs" Inherits="_UrunDetay" MasterPageFile="FirmaMasterPage.Master" %> <asp:content ID="Content1" runat="server" ContentPlaceHolderID="head"> </asp:content> <asp:content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> <table style="width:100%;"> <tr> <td> <table style="width: 100%; background-color: #FFFFCC;"> <tr> <tr> <td style="width:35%;" > <div class="kresim"> <div class="resim-dis"> <div class="resim-orta"> <div class="resim-ic"> AlternateText='<%#Eval("ResimAdi") %>' Height="200" /> <asp:image ID="ImageResim1" runat="server" ImageUrl='<%#Eval("ResimAdi")%>' Width="200" </div> </div> </div>

21 </td> </div> <td style="font-size:medium; vertical-align:middle; "> <table width="100%"> <tr> <td style="text-align:right; font-size:medium;" class="style13"> Markası: </td> <td style="text-align:left; color:#0066ff; fontsize:medium;"> <asp:label ID="LabelUrununMarkasi" runat="server"></asp:label> </td> </tr> <tr> <td style="text-align:right; font-size:medium;" class="style13"> Durumu: </td> <td style="text-align:left; color:#0066ff; fontsize:medium;"> <asp:label ID="LabelUrununDurumu" runat="server"></asp:label> </td> </tr> <tr> <td style="text-align:right; font-size:medium;" class="style13"> Güncelleme Tarihi: </td> <td style="text-align:left; color:#0066ff; fontsize:medium;"> <asp:label ID="LabelGuncellemeTarihi" runat="server"></asp:label> </td> </tr> <tr> <td style="text-align:right; font-size:medium;" class="style13"> Fiyatı: </td> <td style="text-align:left; color:#0066ff; fontsize:medium;"> <asp:label ID="LabelFiyati" runat="server"></asp:label> <asp:label ID="LabelParaBirimi" runat="server"></asp:label> <asp:label ID="LabelSatisBirimi" runat="server"></asp:label> </td> </tr> </table>

22 <center> <a href="javascript:history.back()"> <span style="font-size:small; border-style: solid; borderwidth:1px; text-decoration:none; border-color:#3333ff; background-color:#3399ff; color:yellow;" > < Geri Dön </span> </a> <a href="siparisver.aspx?urunid=<% Response.Write(Request.QueryString["UrunID"]); %>&FirmaID=<% Response.Write(Request.QueryString["FirmaID"]);%>" > <span style="font-size:small; border-style: solid; borderwidth:1px; text-decoration:none; border-color:#3333ff; background-color:#ffcc00; color:#3366ff;" > Sipariş Ver > </span> </a> </center> </td> </tr> <tr> <td colspan="2"> <hr style="border: 1px solid #C0C0C0" /> <fieldset style="border: 1px solid #FFCC99; padding:10px; "> <legend style="padding: 4px; border: 1px solid #CC6600; fontsize: 14px; color: #FF9900; background-color: #FFFFFF;"> ÜRÜNÜN ÖZELLİKLERİ </legend> <asp:label ID="LabelUrunOzellikleri" runat="server" Text="Label" Font-Size= "Medium" ></asp:label> </fieldset> <fieldset style="border: 1px solid #FFCC99; padding:10px; "> <legend style="padding: 4px; border: 1px solid #CC6600; fontsize: 14px; color: #FF9900; background-color: #FFFFFF;"> DİĞER AÇIKLAMALAR </legend> <asp:label ID="LabelDigerAciklamalar" runat="server" Text="Label"></asp:Label> </fieldset>

23 </td> </tr> <tr> <td colspan="2"> <fieldset style="border: 1px solid #FFCC99; padding:10px; " > <legend style="padding: 4px; border: 1px solid #CC6600; fontsize: 14px; color: #FF9900; background-color: #FFFFFF;"> ÜRÜNÜN FOTOĞRAFLARI </legend> <asp:repeater ID="UrunResimListe" runat="server"> <ItemTemplate> <center> <asp:image ID="UrunResmi" runat="server" AlternateText='<%#Eval("ResimAdi") %>' ImageUrl='<%#Eval("ResimAdi", ResolveUrl("../Resimler/UrunResimleriBuyuk/0"))%>' /> </center> </ItemTemplate> </asp:repeater> REPERA GEREK YOK. LİSTVİEW GİBİ BİR NESNEDİR. BAŞKA BİR YAPI KULLANABİLİRSİNİZ. </fieldset> <center> <a href="javascript:history.back()"> <span style="font-size:small; border-style: solid; borderwidth:1px; text-decoration:none; border-color:#3333ff; background-color:#3399ff; color:yellow;" > < Geri Dön </span> </a> <a href="siparisver.aspx?urunid=<% Response.Write(Request.QueryString["UrunID"]); %>&FirmaID=<% Response.Write(Request.QueryString["FirmaID"]);%>" > <span style="font-size:small; border-style: solid; borderwidth:1px; text-decoration:none; border-color:#3333ff; background-color:#ffcc00; color:#3366ff;" > Sipariş Ver > </span> </a> </center> </td>

24 </tr> </table> </td> </tr> </table> </asp:content> using System; using System.Collections; using System.Configuration; using System.Data; using System.Data.OleDb; using System.Linq; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.HtmlControls; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Xml.Linq; using System.Drawing; using System.Drawing.Imaging; public partial class _UrunDetay : System.Web.UI.Page protected void Page_Load(object sender, EventArgs e) string FirmaID = Request.QueryString["FirmaID"] ; string UrunID = Request.QueryString["UrunID"]; if (!string.isnullorempty(urunid)) //Ürün Id boş degilse Nesneler Nesne = new Nesneler(); UrunID); String Sorgu = string.format("select * FROM Urunler WHERE UrunID =0 ", OleDbDataReader Okuyucu = Nesne.BilgileriReaderaOku(Sorgu); while (Okuyucu.Read()) LabelUrunAdi.Text = Okuyucu["UrunAdi"].ToString(); LabelUrununDurumu.Text = Okuyucu["UrununDurumu"].ToString(); LabelUrununMensei.Text = Okuyucu["UrununMensei"].ToString(); LabelUrununMarkasi.Text = Okuyucu["UrununMarkasi"].ToString(); LabelUretimTarihi.Text = Okuyucu["UretimTarihi"].ToString(); LabelEnAzSatis.Text = Okuyucu["EnAzSatis"].ToString(); LabelSatisBirimi2.Text = Okuyucu["SatisBirimi"].ToString(); LabelTeslimatSuresi.Text = Okuyucu["TeslimatSuresi"].ToString(); LabelGuncellemeTarihi.Text = Okuyucu["GuncellemeTarihi"].ToString().Substring(0,10); LabelFiyati.Text = Okuyucu["Fiyati"].ToString(); LabelParaBirimi.Text = Okuyucu["ParaBirimi"].ToString(); LabelSatisBirimi.Text = Okuyucu["SatisBirimi"].ToString(); LabelUrunOzellikleri.Text = Okuyucu["UrunOzellikleri"].ToString(); LabelDigerAciklamalar.Text = Okuyucu["DigerAciklamalar"].ToString();

25 ImageResim1.ImageUrl = "../Resimler/UrunResimleriBuyuk/" + Nesne.DegerOku("SELECT ResimAdi FROM UrunResimleri WHERE UrunID =? AND FirmaID =? ", UrunID, FirmaID ); //Firma Resimlerini Yüklüyor Sorgu = string.format("select ResimAdi FROM UrunResimleri WHERE UrunID =0 ", UrunID); Okuyucu = Nesne.BilgileriReaderaOku(Sorgu); while (Okuyucu.Read()) UrunResimListe.Visible = true; UrunResimListe.DataSource = Nesne.BilgileriDataSeteOku(Sorgu); UrunResimListe.DataBind(); Nesne.Kapat();

26 Listview ve DataPager Kontrolleri ASP.NET 3.5 ten önce yazılımcılar Veri kaynaklarından çekilen verileri göstermek için Gridview,Form View, Datalist vb. kontrollerden birini seçmek durumundaydılar. Bu seçim genel olarak kontrolün o anki ihtiyacı ne kadar karşıladığı ile ilgiliydi. Örneğin Gridview kontrolünü seçen kullanıcı listeleme yapmaktan pek öteye gidemez, DataList i kullanan kişi ise görsel olarak etkindir ama Paging gibi çok önemli bir özellikten yoksun kalır. ASP.NET 3.5 ile hayatımıza giren ListView kontrolü ile birçok engel aşılmış oldu. ListView bir nevi bu kontrollerin birleşimi gibidir. Şimdi bir örnek yapalım ve olayı ListView örneği ile anlamlandıralım. 8.Adım: Gelen ekrandan ListViewin görünüşünü, stilini ve sayfalama işlemi olup olmayacağını seçebilirsiniz. Biraz kurcalayın. Ve OK butonuna tıklayın.

27 Artık SmartTagdan ListView e ait View lara ulaşabilirsiniz. ListView içinde barındırdığı templatelardan oluşur. Bu templateları kullanarak ListView kontrolüne hükmedebilirsiniz. Şimdi oluşturduğum Templetalera göz atalım ve açıklayalım. Aşağıdaki dizaynı inceleyerek yapıyı daha net anlayabilirsiniz. ID="ListView2" runat="server" DataKeyNames="ID" DataSourceID="AccessDataSource1"> <AlternatingItemTemplate> <span style="">id: <asp:label ID="IDLabel" runat="server" Text='<%# Eval("ID") %>' /> resim: <asp:label ID="resimLabel" runat="server" Text='<%# Eval("resim") %>' /> ad: <asp:label ID="adLabel" runat="server" Text='<%# Eval("ad") %>' /> fiyat:

28 <asp:label ID="fiyatLabel" runat="server" Text='<%# Eval("fiyat") %>' /> aciklama: <asp:label ID="aciklamaLabel" runat="server" Text='<%# Eval("aciklama") %>' /> kat: <asp:label ID="katLabel" runat="server" Text='<%# Eval("kat") %>' /> span> AlternatingItemTemplate> <LayoutTemplate> <div ID="itemPlaceholderContainer" runat="server" style=""> <span ID="itemPlaceholder" runat="server" /> div> <div style=""> <asp:datapager ID="DataPager1" runat="server"> <Fields> <asp:nextpreviouspagerfield ButtonType="Button" ShowFirstPageButton="True" ShowNextPageButton="False" ShowPreviousPageButton="False" /> <asp:numericpagerfield /> <asp:nextpreviouspagerfield ButtonType="Button" ShowLastPageButton="True" ShowNextPageButton="False" ShowPreviousPageButton="False" /> Fields> asp:datapager> div> LayoutTemplate> <InsertItemTemplate> <span style="">resim: <asp:textbox ID="resimTextBox" runat="server" Text='<%# Bind("resim") %>' /> ad: <asp:textbox ID="adTextBox" runat="server" Text='<%# Bind("ad") %>' /> fiyat: <asp:textbox ID="fiyatTextBox" runat="server" Text='<%# Bind("fiyat") %>' /> aciklama: <asp:textbox ID="aciklamaTextBox" runat="server" Text='<%# Bind("aciklama") %>' /> kat: <asp:textbox ID="katTextBox" runat="server" Text='<%# Bind("kat") %>' /> <asp:button ID="InsertButton" runat="server" CommandName="Insert" Text="Insert" /> <asp:button ID="CancelButton" runat="server" CommandName="Cancel" Text="Clear" /> span> InsertItemTemplate>

29 <SelectedItemTemplate> <span style="">id: <asp:label ID="IDLabel" runat="server" Text='<%# Eval("ID") %>' /> resim: <asp:label ID="resimLabel" runat="server" Text='<%# Eval("resim") %>' /> ad: <asp:label ID="adLabel" runat="server" Text='<%# Eval("ad") %>' /> fiyat: <asp:label ID="fiyatLabel" runat="server" Text='<%# Eval("fiyat") %>' /> aciklama: <asp:label ID="aciklamaLabel" runat="server" Text='<%# Eval("aciklama") %>' /> kat: <asp:label ID="katLabel" runat="server" Text='<%# Eval("kat") %>' /> span> SelectedItemTemplate> <EmptyDataTemplate> <span>no data was returned.span> EmptyDataTemplate> <EditItemTemplate> <span style="">id: <asp:label ID="IDLabel1" runat="server" Text='<%# Eval("ID") %>' /> resim: <asp:textbox ID="resimTextBox" runat="server" Text='<%# Bind("resim") %>' /> ad: <asp:textbox ID="adTextBox" runat="server" Text='<%# Bind("ad") %>' /> fiyat: <asp:textbox ID="fiyatTextBox" runat="server" Text='<%# Bind("fiyat") %>' /> aciklama: <asp:textbox ID="aciklamaTextBox" runat="server" Text='<%# Bind("aciklama") %>' /> kat: <asp:textbox ID="katTextBox" runat="server" Text='<%# Bind("kat") %>' /> <asp:button ID="UpdateButton" runat="server" CommandName="Update" Text="Update" /> <asp:button ID="CancelButton" runat="server" CommandName="Cancel"

30 Text="Cancel" /> span> EditItemTemplate> <ItemTemplate> <span style="">id: <asp:label ID="IDLabel" runat="server" Text='<%# Eval("ID") %>' /> resim: <asp:label ID="resimLabel" runat="server" Text='<%# Eval("resim") %>' /> ad: <asp:label ID="adLabel" runat="server" Text='<%# Eval("ad") %>' /> fiyat: <asp:label ID="fiyatLabel" runat="server" Text='<%# Eval("fiyat") %>' /> aciklama: <asp:label ID="aciklamaLabel" runat="server" Text='<%# Eval("aciklama") %>' /> kat: <asp:label ID="katLabel" runat="server" Text='<%# Eval("kat") %>' /> span> ItemTemplate> asp:listview> Buradaki ; RunTimeView: Çalışma anında son kullanıcıcnın göreceği görüntüdir. AlternatingItemTemplate: Bir biri ardına gelen kayıtlarda yapılabilecek farklılıkların ayarlanabildiği kısımdır. Örneğin; bir kayıtta resmin solda bir sonrakinde sağda gelmesini isterseniz AlternatingItemTemplate tam size göre. EditItemTemplate: Update İşlemlerinde kullanılacak template. InsertItemTemplate: Ekleme(insert) işlemi için kullanılan templatedir. ItemTemplate: Bu Template en çok kullanılacak görünümdür. Datalist te ki gibi kayıt elemanlarına ait dizaynı yapacağınız kısımdır. EmptyItemTemplate: Eğer kayıt yoksa gelecek olan görüntünün belirlendiği görünümdür. Burada da göründüğü gibi ListView e müdahele etmek işinize uygun görünümü seçip ona göre ayarlamalar yapmaktan ibarettir. Diğer Yazılarımda görüşmek üzere. Engin Demiroğ

31 LISTVIEW ORNEK -1 DEFAULT.ASPX Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head runat="server"> <title>untitled Page</title> </head> <body> <form id="form1" runat="server"> <div> <asp:listview ID="ListViewProducts" runat="server" ItemPlaceholderID="ProductItem"> <ItemTemplate> <div class="product"> <strong> <asp:label runat="server" ID="LabelId" Text='<%# Eval("Id") %>'></asp:label> :: <asp:label runat="server" ID="LabelName" Text='<%# Eval("Name") %>'></asp:label> </strong> <em> <asp:label runat="server" ID="LabelDescription" Text='<%# Eval("Description") %>'></asp:label> </em> </div> </ItemTemplate> <LayoutTemplate> <asp:placeholder runat="server" ID="ProductItem"></asp:PlaceHolder> </LayoutTemplate> <ItemSeparatorTemplate> <hr /> </ItemSeparatorTemplate> </asp:listview> <asp:datapager ID="DataPagerProducts" runat="server" PagedControlID="ListViewProducts" PageSize="3" OnPreRender="DataPagerProducts_PreRender"> <Fields>

32 <asp:nextpreviouspagerfield ShowFirstPageButton="True" ShowNextPageButton="False" /> <asp:numericpagerfield /> <asp:nextpreviouspagerfield ShowLastPageButton="True" ShowPreviousPageButton="False" /> </Fields> </asp:datapager> </div> </form> </body> </html> DEFAULT.ASPX.CS using System; using System.Configuration; using System.Data; using System.Linq; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.HtmlControls; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Xml.Linq; public partial class _Default : System.Web.UI.Page protected void Page_Load(object sender, EventArgs e) protected void DataPagerProducts_PreRender(object sender, EventArgs e) ProductList db = new ProductList(); this.listviewproducts.datasource = db.gellall(); this.listviewproducts.databind(); CLASS1.CS using System; public class Product private int? _Id; private string _Name; private string _Descrition; public Product() public Product(int Id, string Name, string Description) this._id = Id; this._name = Name; this._descrition = Description; public int? Id

33 get return _Id; set _Id = value; public string Name get return _Name; set _Name = value; public string Description get return _Descrition; set _Descrition = value; CLASS2.CS using System; using System.Collections.Generic; public class ProductList private IList<Product> _ProductDB = new List<Product>(); public ProductList() this._productdb.add(new Product(1, "Bilgisayar", "Bilgisayar zamanımızın en önemli cihazıdır")); this._productdb.add(new Product(2, "Takvim", "zamanı bize gösterir")); this._productdb.add(new Product(3, "Ayakkabı", "Yerle teması kesen faydaları gereç")); this._productdb.add(new Product(4, "Kalem", "Düşüncelerimizi yazıya döker")); this._productdb.add(new Product(5, "Telefon", "Güçlü iletişim aracıdır.")); public IList<Product> GellAll() return this._productdb; Web Site Navigation Maintaining the menu of a large web site is difficult and time consuming. In ASP.NET 2.0 the menu can be stored in a file to make it easier to maintain. This file is normally called web.sitemap, and is stored in the root directory of the web. In addition, ASP.NET 2.0 has three new navigation controls: Dynamic menus TreeViews Site Map Path The Sitemap File The following sitemap file is used in this tutorial: <?xml version="1.0" encoding="iso "?>

34 <sitemap> <sitemapnode title="home" url="/aspnet/w3home.aspx"> <sitemapnode title="services" url="/aspnet/w3services.aspx"> <sitemapnode title="training" url="/aspnet/w3training.aspx"/> <sitemapnode title="support" url="/aspnet/w3support.aspx"/> </sitemapnode> </sitemapnode> </sitemap> Rules for creating a sitemap file: The XML file must contain a <sitemap> tag surrounding the content The <sitemap> tag can only have one <sitemapnode> child node (the "home" page) Each <sitemapnode> can have several child nodes (web pages) Each <sitemapnode> has attributes defining page title and URL Note: The sitemap file must be placed in the root directory of the web and the URL attributes must be relative to the root directory. Dynamic Menu The <asp:menu> control displays a standard site navigation menu. Code Example: <asp:sitemapdatasource id="nav1" runat="server" /> <form runat="server"> <asp:menu runat="server" DataSourceId="nav1" /> </form> The <asp:menu> control in the example above is a placeholder for a server created navigation menu. The data source of the control is defined by the DataSourceId attribute. The id="nav1" connects it to the <asp:sitemapdatasource> control. The <asp:sitemapdatasource> control automatically connects to the default sitemap file (web.sitemap). Click here to see a demo of Menu, TreeView, and SiteMapPath TreeView The <asp:treeview> control displays a multi level navigation menu. The menu looks like a tree with branches that can be opened or closed with + or - symbol. Code Example: <asp:sitemapdatasource id="nav1" runat="server" /> <form runat="server"> <asp:treeview runat="server" DataSourceId="nav1" /> </form> The <asp:treeview> control in the example above is a placeholder for a server created navigation menu. The data source of the control is defined by the DataSourceId attribute. The id="nav1" connects it to the <asp:sitemapdatasource> control.

35 The <asp:sitemapdatasource> control automatically connects to the default sitemap file (web.sitemap). Click here to see a demo of Menu, TreeView, and SiteMapPath SiteMapPath The SiteMapPath control displays the trail (navigation path) to the current page. The path acts as clickable links to previous pages. Unlike the TreeView and Menu control the SiteMapPath control does NOT use a SiteMapDataSource. The SiteMapPath control uses the web.sitemap file by default. Tips: If the SiteMapPath displays incorrectly, most likely there is an URL error (typo) in the web.sitemap file. Code Example: <form runat="server"> <asp:sitemappath runat="server" /> </form> The <asp:sitemappath> control in the example above is a placeholder for a server created site path display. Using the ASP.NET 2.0 Menu Control with Site Maps There are two ways to set up and configure the Asp.NET 2.0 Menu control. Adding the Menu Control on the web page First of all, we need to place the new ASP.NET 2.0 Menu control to a new asp.net page from the toolbox window Navigation section by drag and drop method. Choosing Data Source for Menu Control When the Menu control is placed on the blank asp.net page the Tasks wizard window is opened as shown below. The menu items of the Menu control can be supplied by two methods as I have noted above. These methods are identified by the data sources of the Menu control. If you open the Data Source drop down in the Menu Tasks window, you will see an empty list. To add a new data source click the <New data source...> menu item.

36 The first screen displayed while a data source is being selected, is the screen where the type of the data source is selected. For a Menu control, two types of data sources are available; Site Map and XML File data source types. Site Map and XML File data source types. Let's begin by selecting the Site Map data source type for our simple menu control. Before starting working on Menu control with Site Map data source, we should prepare our web site's Web.sitemap file. SiteMap is a new feature of ASP.NET 2.0 which helps implementing a map of your sites web sections and pages that will help your visitors navigate to desired pages easier and quicker. SiteMaps are in a summary of your sites navigation structure. Creating a Site Map for the Web Site To add a SiteMap on your web site project using Visual Studio 2005, right click the web site project name in the solution explorer window and open the context menu. From the menu select the Add New Item... When the Add New Item dialog screen is displayed, select the Site Map among the other Visual Studio installed templates. Note that Site Map is described as a file used to create a site map. Then give the name Web.sitemap as suggested by default and click Add to finish the process.

37 Note that if you give a name different than Web.sitemap, the application will not be able to define the Site Map file correctly and this will cause errors during run-time. For example if we use a name for the.sitemap file like MySite.sitemap and configure our navigation web controls to use the Site Map as we will do for Menu control in the following steps we may have such an error: The file web.sitemap required by XmlSiteMapProvider does not exist. This error is thrown while the following method is running and the CheckSiteMapFileExists method is looking for a specific file name web.sitemap System.Web.XmlSiteMapProvider.CheckSiteMapFileExists() Continue with configuring the Menu Control Now we are ready to continue with setting up the Menu control for our web page. We have created the site map file web.sitemap for our web site. We have placed the menu control on the page and selected the Site Map as the data source type. You are requested to enter an ID for the data source with a default suggested ID name SiteMapDataSource1 for the Site Map type data source. Make no change or you can give a more descriptive name and continue. The source of the Asp.NET page related with Menu control will be now as below: <asp:menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1"></asp:Menu> <asp:sitemapdatasource ID="SiteMapDataSource1" runat="server" /> The DataSourceID property of the Menu control is mapping to the SiteMapDataSource control placed on the page. Now run the application by Ctrl+F5. The menu control displays the "Home" at first run. This is the top sitemapnode node in the website.map xml structured file. When you move the cursor on the menu control, the sub menues automatically opened

38 for display. Here is the sample web.sitemap file used for the sample. <?xml version="1.0" encoding="utf-8"?> <sitemap xmlns=" > <sitemapnode url="default.aspx" title="developement" description="kodyaz Development Resource Site"> <sitemapnode url="~/articles/articles.aspx" title="articles" description="articles for Developers" /> <sitemapnode url="~/news/news.aspx" title="news" description="latest News for Developers" /> </sitemapnode> </sitemap> It is important to note that the sitemap element requires only one sitemapnode element inside. For example, you may create the sample web.sitemap file by adding additional sitemapnode elements inside the sitemap which will fail to work. <?xml version="1.0" encoding="utf-8"?> <sitemap xmlns=" > <sitemapnode url="default.aspx" title="developement" description="kodyaz Development Resource Site"> <sitemapnode url="~/articles/articles.aspx" title="articles" description="articles for Developers" /> <sitemapnode url="~/news/news.aspx" title="news" description="latest News for Developers" /> </sitemapnode> <sitemapnode url="about.aspx" title="about us" description="about us"></sitemapnode> <sitemapnode url="disclaimer.aspx" title="disclaimer" description="disclaimer"></sitemapnode> </sitemap> This structure in the web.sitemap will cause the following error during runtime during the processing of the following methods Exactly one <sitemapnode> element is required directly inside the <sitemap> element. System.Web.XmlSiteMapProvider.BuildSiteMap() System.Web.XmlSiteMapProvider.get_RootNode() So it is important to place only one top level sitemapnode between sitemap tags in the site map file web.sitemap. The recent codes on sample page for demonstrating the usage of Menu control is as: Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> <html xmlns=" > <head runat="server"> <title>untitled Page</title> </head> <body> <form id="form1" runat="server"> <asp:menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1"> </asp:menu> <asp:sitemapdatasource ID="SiteMapDataSource1" runat="server" /> </form> </body> </html>

39 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...

40 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...

41 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.

42 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.

43 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.

44 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;

45 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. *********************** Studio Net in içerisin ajax kütüphanesinin eklenmesi (Ajax Toolkit) To add the controls in the library to the Visual Studio Toolbox, follow these steps: Aşağıdaki adımları eklemek için takip edin. Yeni bir Asp.Net projesi aç. Default sayfa tasarım görünümünde iken aşağıdaki adımlara devam et. Sol taraftaki toolbox kısmı açık olmalı. Toolbox üzerinde sağ tıklayıp Add Tab dersek yeni bölüm Toolbox (araç kutusu) içinde açılacaktır. Yada orada hazır bulunan ve içerisinde herhangi bir nesne bulunmayan General bölümü kullanılabilir. Bu bölüme herhangi kendinize ait bir isim verebilirsiniz. Sağ tuşa tıkladığımızda Coose Items kısmında Ajax kütüphanesini indirdiğimiz dizini buluyoruz. Nereye kaydettiysek oraya bakıyoruz.

46 Kütüğhaneyi indirdiğimiz yerde AjaxControlToolkit.dll dosyasını buluyoruz ve seçiyoruz. Ok. Tıkladğımızda Ardından tüm kütüphane Studio Net in içerisine yüklenmiştir. Fakat Ekranda bu nesneleri göremeyebiliriz. Bunun için Tamamen bilgisayarı kapatıp açtığımızda görebiliriz. AJAX TAB Container Extender 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.

47 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.

48 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

49 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

50 Örnek Kodlar için mail adresimi kullanabilirsiniz Kaynaklar Bu makaleye 1 yorum yapılmış :36:34 AJAX Calendar Extender 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.

51 Ö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;

52 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.

53 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 Kaynaklar Bu makaleye henüz yorum yapılmamış :14:51 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.

54 Ö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.

55 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"> <asp:label ID="Label1" runat="server" Font-Bold="True" Font-Names="Verdana" Font-Size="Small" Text="Kurtlar Vadisi Terör" ForeColor="#C00000"></asp:Label> <asp:image ID="Image1" runat="server" ImageUrl="~/70866.jpg" /> </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;

56 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 [email protected] Kaynaklar AJAX RATING(OYLAMA) KONTROLÜ Açıklama Rating kontrolü, oylamada kullanılan yıldızların sayısı ile oylama islemi yapmayı saglayan bir ajax kontrol toolkit nesnesidir. Yıldızların üzerinde gezindiginizde vereceginiz puana göre o kadar yıldız seçili gelir. Rating kontrolünün yönüyü dikey ya da yatay olarak degistirebilirsiniz. Rating kontolü ClientCallBack eventini destekledigi için oylama islemi sırasında postback islemi arkaplanda gerçeklesir. Örnek Kullanımı <ajaxtoolkit:rating ID="Rating" runat="server" CurrentRating="2" MaxRating="5" StarCssClass="ratingStar"

57 WaitingStarCssClass="savedRatingStar" FilledStarCssClass="filledRatingStar" EmptyStarCssClass="emptyRatingStar" OnChanged="Rating_Changed" /> Özellikleri AutoPostBack - True ise oylama islemi yapıldıgında postback islemi gerçeklesir CurrentRating - Rating Kontrolünün ilk degeri MaxRating - Rating Kontolünü Max. degeri StarCssClass - Rating kontrolünde yer alacak yıldızların özelliklerini belirleyen CSS sitili WaitingStarCssClass - Oylama islemi yapılırken görüntülenecek CSS sitili FilledStarCssClass - Oylama yapılırken dolu olacak yıldızlar için belirtilecek CSS sitili EmptyStarCssClass - Bos yıldızlar için belirtilecek CSS sitili RatingAlign - Rating kontolünün yönü, (dikey yatay) RatingDirection - Oylama isleminin baslangıç hizası OnChanged - Oylama islemi yapılırken tetikleyecek olan eventin adı. Tag - Rating'e eklenecek olan parametre. Örnek Kontrolümüzü tanıdık ve simdi bir örnek yapalım. Genelde oylama islemi yapılırken yıldız iconları kullanılır. Buna baglı olmadıgımızı belirtmek için ben baska bir icon kullanıyorum. Örnegimizde kitapları listeleyecegiz ve bu kitaplara ait oylama islemlerini yaptıracagız. - Oylama islemi yapılırken bu resim görüntülenecek. - Oylanacak degerlerde bu resim görüntülenecek. - Bos degerlerde bu resim görüntülenecek. Ilk olarak yeni bir AJAX tabanlı bir web projesi açalım. Projemizi olusturduktan sonra yeni örnek bir veritabanı olusturalım. Kitapevi isimli yeni bir database olusturacagım. Bu veritabanında kitaplar ve kitappuanları isimli 2 tablo olacak. Kitaplar Tablosu

58 Kitap Puanları Tablosu Tablomuzu olusturduktan sonra kitaplar tablosuna örnek 2-3 kayıt girelim Simdi sayfamıza bir Gridview Ekleyelim. Gridview'in autogenaretecolumn özelligini false yapalım ve 2 adet template field ekleyelim. 1. field da kitap adı ve açıklama yer alıcak. 2. ise rating kontolü. Benim sayfam bu sekilde oldu Simdi rating konrolümüz için gerekli olan CSS sitilleri yazalım. Ister yeni bir sitil dosyası ekleyelim, istersenized head tagları arasına yazalım hiç fark etmez <style type="text/css">.standart width:20px; height:16px; cursor:crosshair; background-repeat:no-repeat;

59 .dolu.bos.bekle background-image:url(images/dolu.gif); background-image:url(images/bos.gif); background-image:url(images/bekle.gif); </style> Simdi de Rating kontrolümüzün özelliklerini yazalım; <cc1:rating ID="Rating1" runat="server" CurrentRating="1" StarCssClass="standart" EmptyStarCssClass="bos" WaitingStarCssClass="bekle" FilledStarCssClass="dolu" Tag='<%# Eval("KitapID")%>' MaxRating="5" OnChanged="Oyla" > </cc1:rating> Evet artık oylama islemimiz hazır Geriye kalan 2 sey kaldı, birincisi kayıtları listelemek, ikincisi de oylama sonucunu oylar tablosuna yazmak. Ilk olarak listeleme islemini yapalım. SqlConnection Cnn; SqlDataAdapter Da; DataSet Ds; SqlCommand Cmd; private void KayitlariGetir() Cnn = new SqlConnection("Server=localhost; Database=kitapevi; trusted_connection=yes"); Da=new SqlDataAdapter("select * from Kitaplar",Cnn); Ds = new DataSet(); Da.Fill(Ds, "tbl"); GridView1.DataSource = Ds.Tables[0]; GridView1.DataBind(); protected void Page_Load(object sender, EventArgs e) KayitlariGetir(); Simdi projemizi çalıstırdıgımızda

60 Simdi oylama islemini yapalım. Yukarıda da belirttigimiz gibi Oyla isimli bir metod olusturacagız. public void Oyla(object sender,ajaxcontroltoolkit.ratingeventargs e) Cnn = new SqlConnection("Server=localhost; Database=kitapevi; trusted_connection=yes"); if (Cnn.State == ConnectionState.Closed) Cnn.Open(); Cmd = new SqlCommand("Insert Into KitapPuanlari(KitapID, Puan) values("+e.tag+","+e.value+")",cnn); int returnvalue = Cmd.ExecuteNonQuery(); Simdi kodumuzu çalıstıralım.

61 2. Sıradaki 2 numaralı kitaba 4 puan verdim. Oylama sırasında oylama isleminin gerçeklestiginin anlasılması için farklı bir icon koymustuk. Oda üstteki resimde görünmektedir. Bakalım oylama gerçeklesmis mi? Veritabanına gidip kontrol edelim. Evet oylama islemi gerçeklesmis 2 numaralı kitap 4 puan Bu makaleninde sonuna geldik. Baska bir makale de görüsmek üzere. 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.

62 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>

63 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;

64 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. Açıklama AJAX SlideShow Extender Slideshow extender resimleri slayt olarak göstermemize yarayan ajax nesnesidir. Sayfamıza ekleyecegimiz butonlar ile slaytı

65 baslatabilir ve resimler arasında gezinebilirsiniz. Slaytı otomatik baslatabilir ve resimler arasında dönmek için nesnemizi konfigüre edebiliriz. Resimlerimizi göstermek için bir web servisi yada slide show için image destekleyen bir metod kullanabiliriz. Slideshow 3 sn'de bir bir sonraki resmi açar. Eger sona gelmisse yeniden ilk resme döner. Bu kontol ile aynı windows uygulamalarındaki gibi resimleri slayt seklinde izleyebiliriz. Ayrıca we sayfalarımızda çok daha sık fotogaleriler olusturabiliriz. Kullanımı Özellikleri SlideShowServiceMethod - AjaxControlToolkit.Slide döndüren bir Web servisi çagırır. Bu web servisi resimlerin pathini ve diger bilgilerini içerir. Örnek web servisi [System.Web.Services.WebMethod] [System.Web.Script.Services.ScriptMethod] public AjaxControlToolkit.Slide[] GetSlides()... SlideShowServicePath - Resimler ile ilgili bilgileri döndürecek olan web servisinin adı. NextButtonID - Bir sonraki resme geçmek için kullanılacak olan button'un ID'si PlayButtonID - Slaytı baslatmak için kullanılacak olan button'un ID'si PreviousButtonID - Bir önceki resme geçmek için kullanılacak olan button'un ID'si PlayButtonText - Slayt basladıgında baslat butonuna verilecek olan text'in özelligi. StopButtonText - Slayt durduruldugunda durdur butonuna verilecek olan text'in özelligi. PlayInterval - Slayt için resimler arasındaki geçis süresi. ImageDescriptionLabelID - Resimlerin bilgilerini görüntülemek için kullanılacak olan Label'in ID'si Loop - Degeri True ise Resimlerin sürekli dönmesini saglayan özellikdie. AutoPlay - Degeri True ise Sayfa açıldıgında slayt otomatik olarak çalısır. Kontrolümüz ile ilgili bilgileri aldıktan sonra bir örnek yapalım. Sizlerden gelen feedback'ler dogrultusunda bu makalede basit bir örnek ile konuyu pekistirecegim. Örnek: Örnegimizde basit bir image galeri olusturup bu extender'i kullanacagız. Bunun için ilk olarak yeni bir Ajax Web Site olusturalım.

66 Projemizi olusturduktan sonra sayfamıza sayfamıza 3 adet buton, 1 image, 1 label ve 1 de slideshow extender'i ekleyelim. Simdi bize resimleri saglayacak olan web servisini yazalım. Bunun için sayfamıza yeni bir web servisi ekleyebiliriz ama ben aynı

67 sayfada static bir servis yazıp onu kullanacagım. [System.Web.Services.WebMethod] [System.Web.Script.Services.ScriptMethod] public static AjaxControlToolkit.Slide[] GetSlides() return new AjaxControlToolkit.Slide[] new AjaxControlToolkit.Slide("SlidePictures/1.jpg", "XP Theme 1", "XP Theme 1"), new AjaxControlToolkit.Slide("SlidePictures/2.jpg", "XP Theme 2", "XP Theme 2"), new AjaxControlToolkit.Slide("SlidePictures/3.jpg", "XP Theme 3", "XP Theme 3"), new AjaxControlToolkit.Slide("SlidePictures/4.jpg", "XP Theme 4", "XP Theme 4"), new AjaxControlToolkit.Slide("SlidePictures/1.jpg", "XP Theme 5", "XP Theme 5"); Olusturdugumuz bu web servis bize Slaytta kullanacagımız resimlerin bilgilerini saglıyor. Simdi Slideshow kontrolünün özelliklerini yazalım. Simdi bu örnegi test edelim.

68 Simdi ileri diyelim.

69 Iste çok isimize yarayacak bir kontrol daha J Bu makalenin de sonuna geldik, baska bir makalede görüsmek üzere basarı ve iyi günler dilerim. Not: Ajax Sample Site'daki örnekleri incelemeniz size daha farklı fikirler verecektir. Ajax Control Toolkit Always Visible Control Extender 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

70 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.

71 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.

72 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. ASP.NET AÇILIR PENCERE UYGULAMASI 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.

73 Ö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 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" />

74 </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";

75 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/> <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,

76 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 Web Site Navigation Maintaining the menu of a large web site is difficult and time consuming. In ASP.NET 2.0 the menu can be stored in a file to make it easier to maintain. This file is normally called web.sitemap, and is stored in the root directory of the web. In addition, ASP.NET 2.0 has three new navigation controls: Dynamic menus TreeViews Site Map Path The Sitemap File The following sitemap file is used in this tutorial: <?xml version="1.0" encoding="iso "?> <sitemap> <sitemapnode title="home" url="/aspnet/w3home.aspx"> <sitemapnode title="services" url="/aspnet/w3services.aspx"> <sitemapnode title="training" url="/aspnet/w3training.aspx"/> <sitemapnode title="support" url="/aspnet/w3support.aspx"/> </sitemapnode> </sitemapnode>

77 </sitemap> Rules for creating a sitemap file: The XML file must contain a <sitemap> tag surrounding the content The <sitemap> tag can only have one <sitemapnode> child node (the "home" page) Each <sitemapnode> can have several child nodes (web pages) Each <sitemapnode> has attributes defining page title and URL Note: The sitemap file must be placed in the root directory of the web and the URL attributes must be relative to the root directory. Dynamic Menu The <asp:menu> control displays a standard site navigation menu. Code Example: <asp:sitemapdatasource id="nav1" runat="server" /> <form runat="server"> <asp:menu runat="server" DataSourceId="nav1" /> </form> The <asp:menu> control in the example above is a placeholder for a server created navigation menu. The data source of the control is defined by the DataSourceId attribute. The id="nav1" connects it to the <asp:sitemapdatasource> control. The <asp:sitemapdatasource> control automatically connects to the default sitemap file (web.sitemap). Click here to see a demo of Menu, TreeView, and SiteMapPath TreeView The <asp:treeview> control displays a multi level navigation menu. The menu looks like a tree with branches that can be opened or closed with + or - symbol. Code Example: <asp:sitemapdatasource id="nav1" runat="server" /> <form runat="server"> <asp:treeview runat="server" DataSourceId="nav1" /> </form> The <asp:treeview> control in the example above is a placeholder for a server created navigation menu. The data source of the control is defined by the DataSourceId attribute. The id="nav1" connects it to the <asp:sitemapdatasource> control. The <asp:sitemapdatasource> control automatically connects to the default sitemap file (web.sitemap). Click here to see a demo of Menu, TreeView, and SiteMapPath SiteMapPath

78 The SiteMapPath control displays the trail (navigation path) to the current page. The path acts as clickable links to previous pages. Unlike the TreeView and Menu control the SiteMapPath control does NOT use a SiteMapDataSource. The SiteMapPath control uses the web.sitemap file by default. Tips: If the SiteMapPath displays incorrectly, most likely there is an URL error (typo) in the web.sitemap file. Code Example: <form runat="server"> <asp:sitemappath runat="server" /> </form> The <asp:sitemappath> control in the example above is a placeholder for a server created site path display. Using the ASP.NET 2.0 Menu Control with Site Maps There are two ways to set up and configure the Asp.NET 2.0 Menu control. Adding the Menu Control on the web page First of all, we need to place the new ASP.NET 2.0 Menu control to a new asp.net page from the toolbox window Navigation section by drag and drop method. Choosing Data Source for Menu Control When the Menu control is placed on the blank asp.net page the Tasks wizard window is opened as shown below. The menu items of the Menu control can be supplied by two methods as I have noted above. These methods are identified by the data sources of the Menu control. If you open the Data Source drop down in the Menu Tasks window, you will see an empty list. To add a new data source click the <New data source...> menu item. The first screen displayed while a data source is being selected, is the screen where the type of the data source is selected.

79 For a Menu control, two types of data sources are available; Site Map and XML File data source types. Site Map and XML File data source types. Let's begin by selecting the Site Map data source type for our simple menu control. Before starting working on Menu control with Site Map data source, we should prepare our web site's Web.sitemap file. SiteMap is a new feature of ASP.NET 2.0 which helps implementing a map of your sites web sections and pages that will help your visitors navigate to desired pages easier and quicker. SiteMaps are in a summary of your sites navigation structure. Creating a Site Map for the Web Site To add a SiteMap on your web site project using Visual Studio 2005, right click the web site project name in the solution explorer window and open the context menu. From the menu select the Add New Item... When the Add New Item dialog screen is displayed, select the Site Map among the other Visual Studio installed templates. Note that Site Map is described as a file used to create a site map. Then give the name Web.sitemap as suggested by default and click Add to finish the process.

80 Note that if you give a name different than Web.sitemap, the application will not be able to define the Site Map file correctly and this will cause errors during run-time. For example if we use a name for the.sitemap file like MySite.sitemap and configure our navigation web controls to use the Site Map as we will do for Menu control in the following steps we may have such an error: The file web.sitemap required by XmlSiteMapProvider does not exist. This error is thrown while the following method is running and the CheckSiteMapFileExists method is looking for a specific file name web.sitemap System.Web.XmlSiteMapProvider.CheckSiteMapFileExists() Continue with configuring the Menu Control Now we are ready to continue with setting up the Menu control for our web page. We have created the site map file web.sitemap for our web site. We have placed the menu control on the page and selected the Site Map as the data source type. You are requested to enter an ID for the data source with a default suggested ID name SiteMapDataSource1 for the Site Map type data source. Make no change or you can give a more descriptive name and continue. The source of the Asp.NET page related with Menu control will be now as below: <asp:menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1"></asp:Menu> <asp:sitemapdatasource ID="SiteMapDataSource1" runat="server" /> The DataSourceID property of the Menu control is mapping to the SiteMapDataSource control placed on the page. Now run the application by Ctrl+F5. The menu control displays the "Home" at first run. This is the top sitemapnode node in the website.map xml structured file. When you move the cursor on the menu control, the sub menues automatically opened

81 for display. Here is the sample web.sitemap file used for the sample. <?xml version="1.0" encoding="utf-8"?> <sitemap xmlns=" > <sitemapnode url="default.aspx" title="developement" description="kodyaz Development Resource Site"> <sitemapnode url="~/articles/articles.aspx" title="articles" description="articles for Developers" /> <sitemapnode url="~/news/news.aspx" title="news" description="latest News for Developers" /> </sitemapnode> </sitemap> It is important to note that the sitemap element requires only one sitemapnode element inside. For example, you may create the sample web.sitemap file by adding additional sitemapnode elements inside the sitemap which will fail to work. <?xml version="1.0" encoding="utf-8"?> <sitemap xmlns=" > <sitemapnode url="default.aspx" title="developement" description="kodyaz Development Resource Site"> <sitemapnode url="~/articles/articles.aspx" title="articles" description="articles for Developers" /> <sitemapnode url="~/news/news.aspx" title="news" description="latest News for Developers" /> </sitemapnode> <sitemapnode url="about.aspx" title="about us" description="about us"></sitemapnode> <sitemapnode url="disclaimer.aspx" title="disclaimer" description="disclaimer"></sitemapnode> </sitemap> This structure in the web.sitemap will cause the following error during runtime during the processing of the following methods Exactly one <sitemapnode> element is required directly inside the <sitemap> element. System.Web.XmlSiteMapProvider.BuildSiteMap() System.Web.XmlSiteMapProvider.get_RootNode() So it is important to place only one top level sitemapnode between sitemap tags in the site map file web.sitemap. The recent codes on sample page for demonstrating the usage of Menu control is as: Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> <html xmlns=" > <head runat="server"> <title>untitled Page</title> </head> <body> <form id="form1" runat="server"> <asp:menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1"> </asp:menu> <asp:sitemapdatasource ID="SiteMapDataSource1" runat="server" /> </form> </body> </html>

Daha göster