Ders 11 - IbrahimCayiroglu.Com

Transkript

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.
Web.sitemap
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<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"
Inherits="_Default" %>
CodeFile="Default.aspx.cs"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1"
StaticDisplayLevels="2">
</asp:Menu>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
</div>
</form>
</body>
</html>
PROGRAMATĠK OLARAK MENÜYÜ KONTROL ETME
Default.aspx
</head>
<body>
<div>
<asp:Menu ID="Menu1" runat="server">
</asp:Menu>
</div>
</form>
</body>
</html>
Default.aspx.cs
using
using
using
using
using
using
using
using
using
using
using
System;
System.Configuration;
System.Data;
System.Linq;
System.Web;
System.Web.Security;
System.Web.UI;
System.Web.UI.HtmlControls;
System.Web.UI.WebControls;
System.Web.UI.WebControls.WebParts;
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.Text = "Gazi Üniversitesi";
Eleman.ImageUrl = "Gazi.jpg";
Menu1.Items[0].ChildItems.Add(Eleman);
//
Eleman.Text = "Tıp Fakültesi";
Eleman.ImageUrl = "Tip.jpg";
Menu1.Items[0].ChildItems[0].ChildItems.Add(Eleman);
//
Eleman.Text = "Mühendisli Fakültesi";
Eleman.ImageUrl = "Muh.jpg";
//
Eleman.Text = "Fen Edebiyat Fakültesi";
Eleman.ImageUrl = "Fen.jpg";
//Hacettepe
Eleman.Text = "Hacettepe Üniversitesi";
Eleman.ImageUrl = "Hacettepe.jpg";
Menu1.Items[0].ChildItems.Add(Eleman);
//
Eleman.Text = "Tıp Fakültesi";
Eleman.ImageUrl = "Tip.jpg";
//
Eleman.Text = "Eczacılık Fakültesi";
Eleman.ImageUrl = "Ecz.jpg";
}
}
}
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
<style type="text/css">
.style1 {
color: #FF0000;
}
</style>
</head>
<body>
<div>

Fakülte Adını Seçiniz<br />
 <asp:DropDownList ID="FakulteListesi" runat="server"
AppendDataBoundItems="True" CssClass="input-text"
AutoPostBack="true"
DataSourceID="SqlDataSource2"
DataTextField="FakulteAdi"
DataValueField="FakulteID"
ValidationGroup="akayit">
</asp:DropDownList>

<asp:SqlDataSource ID="SqlDataSource2" runat="server"
ConnectionString="<%$ ConnectionStrings:VTbaglantisi %>"
ProviderName="<%$ ConnectionStrings:VTbaglantisi.ProviderName %>"
SelectCommand="SELECT [FakulteID], [FakulteAdi] FROM [Fakulteler] ORDER
BY [FakulteAdi]">
</asp:SqlDataSource>
<br />
Bölüm Seçiniz
<br />
<asp:DropDownList ID="BolumListesi" runat="server"
AutoPostBack="true"
DataSourceID="BolumlerDataSource"
DataTextField="BolumAdi"
DataValueField="BolumID"
ValidationGroup="akayit" >
</asp:DropDownList>
<asp:SqlDataSource ID="BolumlerDataSource" runat="server"
SelectCommand="SELECT BolumID,FakulteID,BolumAdi FROM Bolumler WHERE
([FakulteID] = ?)">
<SelectParameters>
<asp:ControlParameter ControlID="FakulteListesi" Name="FakulteID"
PropertyName="SelectedValue" Type="Int32" />
</SelectParameters>
<br />
<span class="style1">Yeni Fakülte Ekle</span><br />
<br />
Fakültenin Adı<asp:TextBox ID="TextBoxFakulteAdi"
runat="server"></asp:TextBox><asp:Button ID="Button1" runat="server"
onclick="Button1_Click" Text="Button" />
<br />
<span class="style1">Yeni Bölüm Ekle</span><br />
<br />

Fakülte Adını Seçiniz<br />
 <asp:DropDownList ID="FakulteSecinizListesi" runat="server"
AppendDataBoundItems="True" CssClass="input-text"
AutoPostBack="true"
DataSourceID="SqlDataSource3"
DataTextField="FakulteAdi"
DataValueField="FakulteID"
ValidationGroup="akayit">
</asp:DropDownList>

SelectCommand="SELECT [FakulteID], [FakulteAdi] FROM [Fakulteler] ORDER BY
[FakulteAdi]">
<br />
Bölüm Adını Yaz
<br />
<asp:TextBox ID="TextBoxBolumAdi" runat="server"></asp:TextBox>
<br />
<asp:Button ID="Button2" runat="server" Text="Button" onclick="Button2_Click"
/>
<br />
<br />
</div>
</form>
</body>
</html>
Default.ASPX.CS SAYFASI
using
using
using
using
using
using
using
using
using
using
using
using
System;
System.Data;
System.Data.OleDb;
System.Linq;
System.Web;
System.Web.UI;
System.Xml.Linq;
{
{
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();
BolumListesi.Items.Add(Eleman);
}
Baglanti.Close();
}
protected void Button1_Click(object sender, EventArgs e)
{
//Bağlantıyı Kuruyor...........
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...........
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>
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
</head>
<body>
<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") %>' />
<br />
KullaniciAdi:
<asp:Label ID="KullaniciAdiLabel" runat="server"
Text='<%# Eval("KullaniciAdi") %>' />
<br />
Sifre:
<asp:Label ID="SifreLabel" runat="server" Text='<%# Eval("Sifre") %>'
/>
<br />
AdSoyad:
<asp:Label ID="AdSoyadLabel" runat="server" Text='<%# Eval("AdSoyad")
%>' />
<br />
<br />
</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>
<br />
<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>
<br />
SelectCommand="SELECT * FROM [Tablo1]"></asp:SqlDataSource>
</div>
</form>
</body>
</html>
DEFAULT.ASPX.CS
using
using
using
using
using
using
using
using
using
using
using
System;
System.Data;
System.Linq;
System.Web;
System.Web.UI;
System.Xml.Linq;
{
{
}
}
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>
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" %>
<head runat="server" >
<title>SANAYIMIZ.COM</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
<link href="style.css" type="text/css" rel="stylesheet" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body id="Sayfa" 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
using
using
using
using
using
using
using
using
using
using
using
using
System;
System.Collections;
System.Data;
System.Linq;
System.Web;
System.Web.UI;
System.Xml.Linq;
System.Data.OleDb;
public partial class Firmalar_FirmaMasterPage : System.Web.UI.MasterPage
{
int FirmaID = 0;
{
if (!IsPostBack) //İlk yüklemede çalıştır
{
Nesneler Nesne = new Nesneler();
if (!string.IsNullOrEmpty(Request.QueryString["FirmaID"])) //Tıklamayla
buraya geldiyse
{
FirmaID = int.Parse(Request.QueryString["FirmaID"]); //FirmaID yi
oku.
String Sorgu;
//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
<%@ 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>
.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;
}
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">
<td ID="itemPlaceholder" runat="server">
</td>
</tr>
</GroupTemplate>
<GroupSeparatorTemplate>
<tr ID="Tr2" runat="server">
<td colspan="5">
<div >
<hr style="color:#9dbbcc; border-bottomwidth:thin;"></hr>
</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">
<a href="<%#Eval("ResimAdi",
ResolveUrl("../Resimler/UrunResimleriBuyuk/{0}"))%>"
rel="shadowbox[Galeri];options={counterType:'skip',continuous:true,animSequence:'sync'}
">
<asp:Image ID="Image1"
runat="server" AlternateText='<%#Eval("ResimAdi") %>'
ImageUrl='<%#Eval("ResimAdi",
ResolveUrl("../Resimler/UrunResimleriKucuk/{0}"))%>' />
</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") %>' FontSize="14px" />
<br />
<asp:Label ID="LabelUrunOzellikleri"
runat="server"
Text=<%#Nesneler.MetninBoyunuKisalt250(Eval("UrunOzellikleri").ToString())%>
/>
<br /><span class="MaviEtiket" > Güncelleme
Tarihi:</span>
<asp:Label ID="LabelGuncellemeTarihi"
runat="server"
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"
/> /
<asp:Label ID="LabelSatisBirimi"
runat="server" Text='<%# Eval("SatisBirimi")%>' />
</td>
</tr>
runat="server" Text='<%# Eval("ParaBirimi")%>'
<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
runat="server" CssClass="SariButon" width="70px"
PostBackUrl='<%#
"SiparisVer.aspx?UrunID=" + Eval("UrunID") + "&FirmaID=" + Eval("FirmaID") %>' >Sipariş
Ver</asp:LinkButton>
ID="LinkButtonSiparisVer"
</td>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</ItemTemplate>
<EmptyDataTemplate>
<span style="color:Red;">Bilgi Bulunamadı..</span>
</EmptyDataTemplate>
</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"
<asp:NumericPagerField ButtonCount="10" />
<asp:NextPreviousPagerField ButtonType="Image"
ShowNextPageButton="True"
NextPageImageUrl="Images/Sonraki.jpg"
ShowLastPageButton="True"
LastPageImageUrl="Images/Son.jpg"
ShowPreviousPageButton="False"
</Fields>
/>
</asp:DataPager>
</div>

<asp:ObjectDataSource ID="DataSource1" runat="server"
TypeName="Nesneler"
SelectMethod="UrunGetir">
<SelectParameters>
<asp:QueryStringParameter Name="FirmaID"
QueryStringField="FirmaID" Type="Int32" />
</SelectParameters>
</asp:ObjectDataSource >
<br />
</td>
</tr>
</table>
</asp:Content>
******************
using
using
using
using
using
using
using
using
using
using
using
using
using
System;
System.Collections;
System.Data;
System.Linq;
System.Web;
System.Web.UI;
System.Xml.Linq;
System.Data.OleDb;
public partial class _UrunListesi : System.Web.UI.Page
{
{
}
}
***************
using
using
using
using
using
using
using
using
using
using
using
using
using
using
using
using
using
System;
System.Data;
System.Linq;
System.Web;
System.Web.UI;
System.Xml.Linq;
System.Data.OleDb;
System.Drawing;
System.Drawing.Imaging;
System.Data.SqlClient;
System.Text;
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;
//Firmaya Ait Ürün bilgilerini okuyor=============================================
//if (!string.IsNullOrEmpty(FirmaID))
public static DataSet UrunGetir(int FirmaID)
{
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;
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">
<br />
<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">
<asp:Image ID="ImageResim1" runat="server"
AlternateText='<%#Eval("ResimAdi") %>'
ImageUrl='<%#Eval("ResimAdi")%>' Width="200"
Height="200" />
</div>
</div>
</div>
</div>
</td>
<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>
class="style13">
Durumu:
</td>
<asp:Label ID="LabelUrununDurumu"
</td>
</tr>
<tr>
class="style13">
Güncelleme Tarihi:
</td>
<asp:Label ID="LabelGuncellemeTarihi"
</td>
</tr>
<tr>
class="style13">
Fiyatı:
</td>
<asp:Label ID="LabelFiyati" runat="server"></asp:Label>
 
<asp:Label ID="LabelParaBirimi"
<asp:Label ID="LabelSatisBirimi"
</td>
</tr>
</table>
<br />
<br />
<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>
<br />
</td>
</tr>
<tr>
<td colspan="2">
<br />
<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>
<br />
<asp:Label ID="LabelUrunOzellikleri" runat="server"
Text="Label" Font-Size= "Medium" ></asp:Label>
<br />
</fieldset>
<br />
<br />
<fieldset style="border: 1px solid #FFCC99; padding:10px; ">
   DİĞER AÇIKLAMALAR   </legend>
<br />
<asp:Label ID="LabelDigerAciklamalar" runat="server"
Text="Label"></asp:Label>
<br />
</fieldset>
<br />
<br />
</td>
</tr>
<tr>
<td colspan="2">
<fieldset style="border: 1px solid #FFCC99; padding:10px; " >
  ÜRÜNÜN FOTOĞRAFLARI   </legend>
<br />
<br />
<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>
<br />
<br />
</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.
<br />
<br />
</fieldset>
<br />
<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>
<br />
<br />
</td>
</tr>
</table>
</td>
</tr>
</table>
</asp:Content>
using
using
using
using
using
using
using
using
using
using
using
using
using
using
using
System;
System.Collections;
System.Data;
System.Data.OleDb;
System.Linq;
System.Web;
System.Web.UI;
System.Xml.Linq;
System.Drawing;
System.Drawing.Imaging;
public partial class _UrunDetay : System.Web.UI.Page
{
{
string FirmaID = Request.QueryString["FirmaID"] ;
string UrunID = Request.QueryString["UrunID"];
if (!string.IsNullOrEmpty(UrunID)) //Ürün Id boş degilse
{
String Sorgu = string.Format("SELECT * FROM Urunler WHERE UrunID ={0} ",
UrunID);
OleDbDataReader Okuyucu = Nesne.BilgileriReaderaOku(Sorgu);
{
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();
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);
{
UrunResimListe.Visible = true;
UrunResimListe.DataSource = Nesne.BilgileriDataSeteOku(Sorgu);
UrunResimListe.DataBind();
}
}
Nesne.Kapat();
}
}
}
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.
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:
<br />
resim:
<asp:Label ID="resimLabel" runat="server" Text='<%# Eval("resim") %>' />
<br />
ad:
<asp:Label ID="adLabel" runat="server" Text='<%# Eval("ad") %>' />
<br />
fiyat:
<asp:Label ID="fiyatLabel" runat="server" Text='<%# Eval("fiyat") %>' />
<br />
aciklama:
<asp:Label ID="aciklamaLabel" runat="server" Text='<%# Eval("aciklama") %>' />
<br />
kat:
<asp:Label ID="katLabel" runat="server" Text='<%# Eval("kat") %>' />
<br />
<br />
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") %>' />
<br />
ad:
<asp:TextBox ID="adTextBox" runat="server" Text='<%# Bind("ad") %>' />
<br />
fiyat:
<asp:TextBox ID="fiyatTextBox" runat="server" Text='<%# Bind("fiyat") %>' />
<br />
aciklama:
<asp:TextBox ID="aciklamaTextBox" runat="server"
Text='<%# Bind("aciklama") %>' />
<br />
kat:
<asp:TextBox ID="katTextBox" runat="server" Text='<%# Bind("kat") %>' />
<br />
<asp:Button ID="InsertButton" runat="server" CommandName="Insert"
Text="Insert" />
<asp:Button ID="CancelButton" runat="server" CommandName="Cancel"
Text="Clear" />
<br />
<br />
span>
InsertItemTemplate>
<SelectedItemTemplate>
<span style="">ID:
<br />
resim:
<br />
ad:
<br />
fiyat:
<br />
aciklama:
<br />
kat:
<br />
<br />
span>
SelectedItemTemplate>
<EmptyDataTemplate>
<span>No data was returned.span>
EmptyDataTemplate>
<EditItemTemplate>
<span style="">ID:
<asp:Label ID="IDLabel1" runat="server" Text='<%# Eval("ID") %>' />
<br />
resim:
<asp:TextBox ID="resimTextBox" runat="server" Text='<%# Bind("resim") %>' />
<br />
ad:
<asp:TextBox ID="adTextBox" runat="server" Text='<%# Bind("ad") %>' />
<br />
fiyat:
<asp:TextBox ID="fiyatTextBox" runat="server" Text='<%# Bind("fiyat") %>' />
<br />
aciklama:
<asp:TextBox ID="aciklamaTextBox" runat="server"
Text='<%# Bind("aciklama") %>' />
<br />
kat:
<asp:TextBox ID="katTextBox" runat="server" Text='<%# Bind("kat") %>' />
<br />
<asp:Button ID="UpdateButton" runat="server" CommandName="Update"
Text="Update" />
<asp:Button ID="CancelButton" runat="server" CommandName="Cancel"
Text="Cancel" />
<br />
<br />
span>
EditItemTemplate>
<ItemTemplate>
<span style="">ID:
<br />
resim:
<br />
ad:
<br />
fiyat:
<br />
aciklama:
<br />
kat:
<br />
<br />
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ğ
LISTVIEW ORNEK -1
DEFAULT.ASPX
</head>
<body>
<div>
<br />
<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>
<br />
<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>
<br />
<asp:DataPager ID="DataPagerProducts" runat="server" PagedControlID="ListViewProducts"
PageSize="3" OnPreRender="DataPagerProducts_PreRender">
<Fields>
<asp:NextPreviousPagerField ShowFirstPageButton="True"
<asp:NumericPagerField />
<asp:NextPreviousPagerField ShowLastPageButton="True"
ShowPreviousPageButton="False" />
</Fields>
</asp:DataPager>
<br />
</div>
</form>
</body>
</html>
DEFAULT.ASPX.CS
using
using
using
using
using
using
using
using
using
using
using
System;
System.Data;
System.Linq;
System.Web;
System.Web.UI;
System.Xml.Linq;
{
{
}
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
{
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
önemli cihazıdır"));
gereç"));
}
Product(1, "Bilgisayar", "Bilgisayar zamanımızın en
Product(2, "Takvim", "zamanı bize gösterir"));
Product(3, "Ayakkabı", "Yerle teması kesen faydaları
Product(4, "Kalem", "Düşüncelerimizi yazıya döker"));
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-8859-1" ?>
<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:TreeView runat="server" DataSourceId="nav1" />
</form>
The <asp:TreeView> control in the example above is a placeholder for a server created navigation menu.
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:
<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.
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.
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>
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
for display.
Here is the sample web.sitemap file used for the sample.
<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.
</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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
</head>
<body>
<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1">
</asp:Menu>
</form>
</body>
</html>
AJAX ve AJAX Control Toolkit Kurulumu
AJAX ve AJAX Control Toolkit Kurulumu
Yazılıramı takip edenler de bilirler, simdiye kadar hep ajax control toolkit nesnelerinden bahsettim. Ama gelen sorular ve istekler
üzerine bu makale de ajax özelliklerinin ve ajax control toolkit nesnelerinin Visual Studio'ya nasıl ekleneceginden bahsedecegim.
Ilk olarak web uygulamalarımızda AJAX uygulamalarını gelistirebilmek için ASP.NET 2.0 AJAX Extensions 1.0'i yüklememiz
gerekir.
ASP.NET 2.0 AJAX Extensions 1.0'i asagıdaki adresten indirelim.
ASP.NET 2.0 Ajax Extension 1.0
Next, Next, Next...
Evet AJAX 2.0 Extension'ı kurduktan sonra, su anda en son versiyonu yayınlanan ASP.NET 2.0 AJAX Futures January CTP yi
indirelim. Bu bize ASP.NET 2.0 AJAX yada ASP.NET AJAX Control Toolkit için yeni özellikleri yüklememizi saglar.
ASP.NET 2.0 AJAX Futures January CTP yi asagıdaki adresten indirelim.
ASP.NET 2.0 AJAX Futures January CTP
Simdi bunu kuralım.
Klasik olarak Next, Next, Next...
ASP.NET 2.0 AJAX Futures January CTP yi de kurduktan sonra geriye kalan tek sey Control toolkit nesnelerinin Visual studio'ya
eklenmesi. Ajax Control Toolkit'i asagıdaki adresten indirelim.
Ajax Control Toolkit
Simdi indirdigimiz bu dosyalara göz atalım.
Ajax contollerinin yer aldıgı sample site ve derlenecek olan projelerin yer aldıgı bir klasör bulunuyor. Simdi AjaxControlToolkit
Projesini açalım ve projemizi derleyelim.
Projemizi derledikten sonra Visul Studio Toolbox üzerinde yeni bir tab olusturalım.
Bu tab üzerinde sag tıklayalım ve açılan pencereden Choose Item 'ı Seçelim
Açılacak olan pencere de browse tıklayalım ve derlemis oldugumuz AjaxControlToolkit.DLL dosyasını seçelim.
Open seçenegini seçelim.
Gördüldügü gibi Ajax nesneleri artık tüm projelerimiz de kullanmak üzere hazır : )
Simdi Visual Studio üzerinde yeni bir proje açmaya deneyelim;
Artık projemiz de ajax özelliklerini ve ajax nesnelerini kullanabiliriz...
Bu makalenin de sonuna geldik, baska bir makalede görüsmek üzere basarı ve iyi günler dilerim.
***********************
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.
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.
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.
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
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
Örnek Kodlar için mail adresimi kullanabilirsiniz
[email protected]
Kaynaklar
http://ajax.asp.net
Bu makaleye 1 yorum yapılmış. |
14.02.2007 14: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.
Ö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;
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.
Evet arkadaslar gördügümüz gibi bu islemi de yapmak çok kolay. Ajaxın nimetlerinden yatarlanmaya devam ediyoruz :)
Sem GÖKSU
[email protected]
Kaynaklar
http://ajax.asp.net
Bu makaleye henüz yorum yapılmamış. |
14.02.2007 13: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.
Örnek:
Evet arkadaslar örnegimizde Reklam bannerlerini form üzerinde ordan oraya tasıyacagız : )
Ilk olarak bir AJAX projesi açalım.
Daha Sonra sayfamıza 2 adet panel ekleyelim ve içerisine reklamını aldıgımız firmanın logosunu koyalım. Ayrıca bir adet de
DragPanel Extender nesnesi ekleyelim.
Benim yaptıgım form asagıdaki gibidir.
Panel için yazdıgım kodlar;
<asp:Panel ID="Panel1" runat="server" Direction="LeftToRight" HorizontalAlign="Left"
ScrollBars="Horizontal" Width="100%" Height="800px">
<asp:Panel ID="Panel3" runat="server" BorderStyle="Solid" BorderWidth="2px" Width="242px">
        
<asp:Label ID="Label1" runat="server" Font-Bold="True" Font-Names="Verdana" Font-Size="Small"
Text="Kurtlar Vadisi Terör" ForeColor="#C00000"></asp:Label>
<br />
<br />
   
<asp:Image ID="Image1" runat="server" ImageUrl="~/70866.jpg" /><br />
<br />
</asp:Panel>
</asp:Panel>
Panelimizi yani reklam bannerimizi tasınabilir hale getirelim.
<cc1:DragPanelExtender ID="DragPanelExtender11" runat="server" DragHandleID="Panel1"
TargetControlID="Panel3" />
Simdi projemizi çalıstıralım.
Reklam bannerimizi tasıyalım;
Evet reklam bannerimizi ordan oraya savurduk : )
Sem GÖKSU
[email protected]
Kaynaklar
http://ajax.asp.net
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"
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
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 
.standart
{
width:20px;
height:16px;
cursor:crosshair;
background-repeat:no-repeat;
}
.dolu
{
background-image:url(images/dolu.gif);
}
.bos
{
background-image:url(images/bos.gif);
}
.bekle
{
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();
}
{
KayitlariGetir();
}
Simdi projemizi çalıstırdıgımızda
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.
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.
Simdiolusturdugumuz bu sayfaya 1 adet Dropdownlist ve Listbox ekleyelim. Bukontrollerde arama yapmak için 2 adet de
ListSearch Extender ekleyelim. Benimolusturdugum sayfa asagidaki gibidir.
Benlisteleme elemanlarina bir miktar item ekledim. Bu elemanlari Databaseden dedoldurabiliriz. Ama suan için buna gerek yok.
Simdi ilkolarak Listbox için ListSearch Extenderinin gerekli propertylerini yazalim.
<cc1:ListSearchExtender ID="ListSearchExtender2" runat="server"TargetControlID="ListBox1"PromptText="Aramayapmak
için yaziniz..." PromptPosition="Top" PromptCssClass="modalPopup">
</cc1:ListSearchExtender>
Yukarida ="text/css">
.modalPopup {
background-color:#ffffdd;
border-width:2px;
border-style:solid;
border-color:Gray;
padding:0px;
}
</style>
Simdidedropdownlist için ListSearch Extender için gerekli kodlari yazalim. Hiçbir farkyok sadece TargetControlID Propertysini
degistirecegiz.
<cc1:ListSearchExtender ID="ListSearchExtender1"
runat="server"TargetControlID="DropDownList1"PromptText="Aramayapmak için yaziniz..." PromptPosition="Top"
PromptCssClass="modalPopup">
</cc1:ListSearchExtender>
Simdi buyazdiklarimizi test edelim;
Simdi aramaiçin bir seyler yazalim; örnegin " Sem " : )
Simdi dediger DropdownList' deneyelim;
Simdi aramayapmak için bir seyler yazalim;
Gerçektençok kullanisli ve ise yarayacak bir kontrol : ) Projelerinizde güle gülekullanin : )
Bumakalenin de sonuna geldik, baska bir makalede görüsmek üzere basari ve iyigünler dilerim.
AJAX SlideShow Extender
Açıklama
Slideshow extender resimleri slayt olarak göstermemize yarayan ajax nesnesidir. Sayfamıza ekleyecegimiz butonlar ile slaytı
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.
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ı
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/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.
Simdi ileri diyelim.
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
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.
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.
Örneğin üye girişi gerektiren bir sistemimiz var, kullanıcı bu alana girmek istediğin de hem kullanıcıyı bilgilendiren bir mesaj
çıkartmamız hem de üye girişi formunun görüntülenmesini istersek ne yapacağız? İşte bu durumda bizim işimizi çözecek şey
ASP.NET AJAX Modal Popup kontrolüdür. Modal popup kontrolü sayfamızın üzerine yeni bir layer(div) açarak kullanıcının
layerin altında kalan kısmı ile işlem yapmasını engelleyerek sadece bizim açtığımız layer ile işlem yapmasını sağlar. Bizde bu
oluşturduğumuz layer üzerine hata mesajlarını gösterebileceğimiz labeller ekleyebilir, üzerinde formlar oluşturup mesaj
penceremizi istediğimiz gibi kişiselleştirebiliriz.
Not:Bu işlemi yapabilmemiz için AJAX Control Toolkit’i indirip kurmamız gerekmektedir. ASP.NET AJAX Control Toolkit’i
indirmek için http://www.asp.net/Ajax/ajaxcontroltoolkit adresini kullanabilirsiniz.
Yeni bir ASP.NET projesi başlattıktan sonra. Sayfamıza bir adet UserControl ekleyelim. Adı WebMessageBox olsun.
UserControl için HTML kodumuz aşağıdaki gibi olacaktır.
[WebMessageBox.ascx]
<%@Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
// Modal Popup kontrolünü dinamik olarak çağıracağımız için TargetControlID’ye bir değer atayamıyoruz. Bu özelliğe bir değer
atamazsak hata verecek bunu engellemek için de formda görünmeyen bir buton ekledik.
<asp:Button ID="btnShow" runat="server" Style="display: none;" />
<asp:Panel ID="pnlPopup" runat="server" Style="background-color: White; width: 420px; border-width: 2px; border-color: gray;
font-size: 10pt; font-family: Tahoma; line-height: 15px; border: 1px solid #A6A6A6;">
<div style="background-color: red; background-repeat: repeat-x; width: 415px; height: 22px; padding-top: 3px; text-align: left;
padding-left: 5px; font-weight: bold;">
<span style="color: #FFFFFF; direction: ltr;">Mesaj Kutusu</span></div>
<div style="padding: 5px;">
<div style="padding: 10px;">
<div style="float: left; padding-right: 10px;">
//Hata olduğunda kullanıcıyı bilgilendirecek olan resim dosyası…
<asp:Image ID="imgIcon" runat="server" />
</div>
<div>
//Hata Mesajının gösterileceği textbox…
<asp:Label ID="lblMessage" runat="server"></asp:Label>
<div style="width:100%; text-align:right; padding-top:20px">
// Açılan ModalPopup kontrolünü kapatacak olan buton…
<asp:Button ID="btnClose" Text="Kapat" runat="server" CausesValidation="False" />
</div>
</div>
</div>
</div>
</asp:Panel>
<cc1:ModalPopupExtenderID="ModalPopupExtender1" runat="server" TargetControlID="btnShow"
PopupControlID="pnlPopup" BackgroundCssClass="modalBackground" DropShadow="true" />
ModalPopup kontrolünün arka BackgroundCssClass özelliği içinde bir CSS class’ı oluşturalım.
[WebMessageBox.css]
.modalBackground
{
background-color: black; filter: alpha(opacity=70);opacity: 0.7;
}
Yaptıklarımızı inceleyecek olursak, lblMessage kontrolünü MessageBox açıldığında içerisinde göstereceğimiz hata mesajı için,
imgIcon kontrolünü kullanıcıyı bilgilendiren bir resim için, btnClose’u da açılan popup penceresini kapatmak için ekledik. Peki
btnShow butonunu neden ekledik? Bununda nedeni aslında basit, Modal PopupControl’ünün TargetControlID parametresine
mutlaka bir değer atamak zorundayız. Bunun için bizde forma bir buton ekledik display özelliğini kapattık ve
ModaPopupControl’ün TargetControlID özelliğine bu kontrolü atayıp bu sorunu çözdük.
Buton’un display özelliği kapalı olduğu için bu kontrolü kullanamıyoruz. Zaten bizim amacımız da bu değil. Bizim yapmamız
gereken istediğimiz yerden bu UserControl içerisindeki ModalPopupExtender’i çağırmak. ModalPopup kontrolünün server-side
çalışan Show isimli bir metodu var. Bu metot ModalPopup kontrolünün kullanıcıya gösterilmesini sağlıyor.
ModalPopupExtender.Show()
Bizde bu metodu kullanarak kod tarafından modalpopup kontrolünü görünebilir hale getirelim. Bunun için UserControl’ün kod
dosyasına gidip bir metot yazalım. Bu metot ilgili yerlere değerlerini atasın ve değerleri atadıktan sonra da ModalPopup’ın
gösterilmesini sağlasın.
[WebMessageBox.ascx.cs]
publicvoid Show(string Mesaj, string Action)
{
if (Action == "success") // Burayı enumda yapabilirsiniz…
{
imgIcon.ImageUrl = "success.gif";
}
else if (Action == "error")
{
imgIcon.ImageUrl = "error.gif";
}
lblMessage.Text = Mesaj;
ModalPopupExtender.Show();
}
WebMesageBox kontrolümüz hazır, şimdi bu usercontrol’ü bir sayfaya ekleyelim. Aynı zamanda bir buton ekleyelim. Bu buton
WebMessageBox’ın görüntülenmesini sağlayacak.
[Default.aspx]
<%@Register src="WebMessageBox.ascx" tagname="WebMessageBox" tagprefix="uc1" %>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<uc1:WebMessageBox ID="WebMessageBox1" runat="server" />
<br/> <br />
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
Şimdi de buton’un click eventine gidelim ve UserControl içerisinde yer alan metodu kullanarak MessageBox’ı çıkartalım.
[Default.aspx.cs]
protectedvoid Button1_Click(object sender, EventArgs e)
{
WebMessageBox1.Show("İşlem Başarılı", "success");
}
Sayfayı Çalıştıralım ve butona tıkalaylım,
Birde kodu aşağıdaki gibi değiştirelim,
[Default.aspx.cs]
protectedvoid Button1_Click(object sender, EventArgs e)
{
WebMessageBox1.Show("Hata var…", "error");
}
Sayfadaki butona tekrar tıklayalım,
Hoş geldin WebMessageBox… Kaynak kodları indirmek için tıklayınız. Başka bir makale de görüşmek üzere. ASP.NET ile kalın
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-8859-1" ?>
<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:Menu runat="server" DataSourceId="nav1" />
</form>
The <asp:Menu> control in the example above is a placeholder for a server created navigation menu.
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:TreeView runat="server" DataSourceId="nav1" />
</form>
The <asp:TreeView> control in the example above is a placeholder for a server created navigation menu.
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:
<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.
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.
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>
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
for display.
Here is the sample web.sitemap file used for the sample.
</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.
</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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
</head>
<body>
<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1">
</asp:Menu>
</form>
</body>
</html>

Ders 11 - IbrahimCayiroglu.Com

Transkript

Benzer belgeler

Örnek Script İncelemesi

Web Programlama - MSGSÜ İstatistik

Sample CV

İNTERNET TABANLI PROGRAMLAMA

Bültenin PDF haline ulaşmak için tıklayın.

İNTERNET İnternet dünya genelinde bilgisayar ağlarını birbirine

İş Deneyimleri