WebControlleri
Bu yazı dizisinde WebControllerini
anlatmaya çalışacağım. Bunun için Bilgisayarımıza IEWebControls.msi dosyasını
kurmanız gerekiyor.Bu dosya Sistemimize 4 adet yeni nesne ekleyecektir.Bu
dosyayı
http://msdn.microsoft.com/downloads/samples/internet/asp_dot_net_servercontrols/webcontrols/default.asp
adresinden indirebilirsiniz. Gerekli olan dosyayı bilgisayarımıza kurduktan
sonra. Konumuza başlayabiliriz ilk olarak MultiPage nesnesini anlatacağım.
1-MultiPage
MultiPage nedir?
Hepiniz az yada çok bir üye giriş sayfası görmüşsünüzdür. Kullanıcı bilgileri,
Hesap Bilgileri, vs... gibi bir sürü başlıklı bir site düşünün burda ya birden
fazla sayfa kullanacaksınız yada panellerle oluşturup tek tek nesnelerimiz
panellerin üzerine oluşturacağız. MultiPage bu işlemleri biraz daha
kolaylaştırıyor. WebForm üzerine birden fazla panel görmek yerine tekbir panel
ile oluşturulan, panelleri kendisi bir index numarasına göre diziyor. MultiPage
içinde "<iewc:PageView>"
bu tag sayesinde sayfacıklarımız oluşturuyoruz. İlk oluşturduğumuz PageView e "
0 " index numarasını veriliyor ve sonraki oluşturulan "<iewc:PageView>"
ile bu index numarası +1 artıyor. Şimdi
MultiPage ile ilgili bir örnek yapmaya başlayalım. VS.NET i çalıştırıyoruz. Karşımıza
gelen New Project penceresinden uygulama dili olarak C# ı, oluşturulacak proje
türü olarak ise ASP.NET WebApplication u seçiyoruz. Daha sonra Location yazılan
yere Projemizin adını IEwebControls olarak belirledikten sonra WebForm1.aspx
dosyasının adını MultiPageCs.aspx olarak belirledikten sonra References
işlemlerini yapmamaız gerekiyor.(Sekil-1) Bunun için ToolBox penceresine gelip
fare ile sağ tıklıyoruz. Costumize toolbox seçeneği ile Nesnelerimiz toolbox a
ekliyoruz.

Sekil-1
Şimdi MultiPageCs.aspx formumuzun üzerine
ToolBoxdan MultiPage nesnemizi fare ile sürükle-bırak yapıyoruz. Şimdi
MultiPage nesnemizin properties penceresindeki bazı özelliklerini
inceleyim.(tablo-1)
| ID |
MultiPage nesnemizin adını buraya yazıyoruz |
| SelectIndex |
Burda default olarak 0 dır multipage
de oluşturduğumuz pageview 0 dan başlar burayı eğer 1 verirsen oluşturduğumuz
pageview den index numaraı 1 olan sayfa ilk açıldığında gösterilir.
|
| Show Previus Page |
Önceki Sayfacığa git; |
| Show Next Page |
Sonraki Sayfacığa git; |
Tablo-1
MultiPageCs.aspx dosyamızın HTML kısmına
geçiyoruz. Burda Sayfacık(pageview) oluşturmak için kullancağımız tag
"<iewc:PageView></iewc:PageView>" Bu tag ler arasında
oluşturduğumuz nesneler örneğin label, textbox, buton vs.. diğer pageview lerde
ayrıdır. Her PageView kendi nesnelerinden sorumludur gibide düşünebiliriz.
Örnek bir tag oluşturalım;
<iewc:pageview>
<asp:label id="AdLabel" style="Z-INDEX: 108;
LEFT: 15px; POSITION: absolute; TOP: 30px"
Runat="server">Ad</asp:label>
<asp:label id="SoyadLabel" style="Z-INDEX:
107; LEFT: 15px; POSITION: absolute; TOP: 70px"
Runat="server">Soyadı</asp:label>
<asp:label id="AdresLabel" style="Z-INDEX:
106; LEFT: 15px; POSITION: absolute; TOP: 110px"
Runat="server">Adres</asp:label>
<asp:label id="MailLabel" style="Z-INDEX: 105;
LEFT: 15px; POSITION: absolute; TOP: 150px"
Runat="server">Mail</asp:label>
</iewc:pageview>
Oluşturduğumuzbu tag index numarası ilk olduğu için 0
dır.
Şimdi HTML kısmında yazacağımız kodlar
şunlar.(tanlo-2)
|
<%@ Register TagPrefix="iewc"
Namespace="Microsoft.Web.UI.WebControls"
Assembly="Microsoft.Web.UI.WebControls, Version=1.0.2.226, Culture=neutral,
PublicKeyToken=31bf3856ad364e35" %>
<%@ Page language="c#" Codebehind="MultiPageCs.aspx.cs"
AutoEventWireup="false" Inherits="IEWebControls.WebForm1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN" >
<HTML>
<HEAD>
<title>WebForm1</title>
<meta content="Microsoft Visual Studio 7.0" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5"
name="vs_targetSchema">
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<iewc:multipage
id="MultiPage_Controls" style="Z-INDEX: 101; LEFT: 96px; POSITION: absolute;
TOP: 23px" runat="server" BorderStyle="Solid" Width="440px" Height="271px"
Font-Names="Verdana" Font-Size="10pt">
<iewc:pageview>
<asp:label id="AdLabel" style="Z-INDEX: 108; LEFT: 15px;
POSITION: absolute; TOP: 30px" Runat="server">Ad</asp:label>
<asp:label id="SoyadLabel" style="Z-INDEX: 107; LEFT: 15px; POSITION:
absolute; TOP: 70px" Runat="server">Soyadı</asp:label>
<asp:label id="AdresLabel" style="Z-INDEX: 106; LEFT: 15px; POSITION:
absolute; TOP: 110px" Runat="server">Adres</asp:label>
<asp:label id="MailLabel" style="Z-INDEX: 105; LEFT: 15px; POSITION:
absolute; TOP: 150px" Runat="server">Mail</asp:label>
<asp:textbox id="AdTxt" style="Z-INDEX: 104; LEFT: 110px; POSITION:
absolute; TOP: 30px" Runat="server"></asp:textbox>
<asp:textbox id="SoyadTxt" style="Z-INDEX: 103; LEFT: 110px; POSITION:
absolute; TOP: 70px" Runat="server"></asp:textbox>
<asp:TextBox ID="AdresTxt" style="Z-INDEX: 102; LEFT: 110px; POSITION:
absolute; TOP: 110px" Runat="server"
TextMode="MultiLine"></asp:TextBox>
<asp:TextBox ID="MailTxt" style="Z-INDEX: 101; LEFT: 110px; POSITION:
absolute; TOP: 150px" Runat="server"></asp:TextBox>
</iewc:pageview>
<iewc:pageview>
<asp:Label ID="KlnAdLabel" style="Z-INDEX: 108; LEFT: 15px; POSITION:
absolute; TOP: 30px" Runat="server">Kullanıcı Adı</asp:Label>
<asp:Label ID="SifreLabel" style="Z-INDEX: 107; LEFT: 15px; POSITION:
absolute; TOP: 70px" Runat="server">Şifre</asp:Label>
<asp:Label ID="SifreTekrarLabel" style="Z-INDEX: 106; LEFT: 15px; POSITION:
absolute; TOP: 110px" Runat="server">Şifre Tekrar</asp:Label>
<asp:TextBox ID="KlnTxt" style="Z-INDEX: 105; LEFT: 110px; POSITION:
absolute; TOP: 30px" Runat="server"></asp:TextBox>
<asp:TextBox ID="SifreTxt" style="Z-INDEX: 104; LEFT: 110px; POSITION:
absolute; TOP: 70px" Runat="server" TextMode="Password"></asp:TextBox>
<asp:TextBox ID="SifreTekrarTxt" style="Z-INDEX: 103; LEFT: 110px; POSITION:
absolute; TOP: 110px" Runat="server"
TextMode="Password"></asp:TextBox>
</iewc:pageview>
<iewc:pageview>
<asp:Label ID="SonLabel" style="Z_INDEX: 108; LEFT: 15px; POSITION:
absolute; TOP: 30px" Runat="server" Font-Bold="True" Font-Size="14">Uyelik
Antlaşması...</asp:Label>
<asp:Label ID="Son1Label" style="Z-INDEX: 107; LEFT: 15px; POSITION:
absolute; TOP: 100px" Runat="server" Font-Italic="True" Font-Size="10">
Üyelik metnini okuduysanız kabul etmek için Tamam, Reddetmek için iptal
butonuna basınız...</asp:Label>
<br>
<br>
<br>
<asp:Button ID="iptalButon" style="Z-INDEX: 103; LEFT: 110px; POSITION:
absolute; TOP: 150px" Runat="server" Font-Bold="True" Font-Size="8"
Text="İptal"></asp:Button>
<asp:Button ID="tamamButon" style="Z-INDEX: 102; LEFT: 10px; POSITION:
absolute; TOP: 150px" Runat="server" Font-Bold="True" Font-Size="8"
Text="Tamam"></asp:Button>
</iewc:pageview>
<iewc:pageview>
<asp:Label ID="IptalLabel" style="Z-INDEX: 102; LEFT: 15px; POSITION:
absolute; TOP: 110px" Runat="server" ForeColor="#ff0066" Font-Bold="True"
Font-Italic="True">Uyelik anlaşmasını İptal ettiniz iyi
günler...</asp:Label>
</iewc:pageview>
</iewc:multipage>
<asp:linkbutton id="sonrakiLinkButon" style="Z-INDEX: 102; LEFT: 444px;
POSITION: absolute; TOP: 304px" runat="server" Font-Names="Verdana"
Font-Size="9pt">Sonraki >></asp:linkbutton>
<asp:linkbutton id="oncekiLinkButon" style="Z-INDEX: 103; LEFT: 102px;
POSITION: absolute; TOP: 304px" runat="server" Font-Names="Verdana"
Font-Size="9pt"><< Önceki</asp:linkbutton></form>
</body>
</HTML>
|
Tablo-2
Buraya kadar yaptığımız işlemler kısaca nesnelerimizi Oluşturduk
yani dizayn bölümünü yaptık. (Sekil-2)

Sekil-2
Yukarıdaki şekilde görüldüğü gibi 4 adet Sayfacığımız(PageView) var bunlardan
ilki Kullanıcı Bilgilerini almak için, ikincisi Üyelik Bilgileri için, üçüncüsü
ise Üyelik anlaşması için burda tamam butonuna tıklanınca İlk pageview a
dönüyor ve son pageview ise üçüncü pageview da iptal butonuna basılması
durumunda yapacağı işlemi gösteriyor.
Şimdi sayfamızın code behing bölümüne geçiyoruz.Burda şuna dikkat
etmek gerekiyor. HTML olarak eklediğimiz bir nesnenin olayını mesela bu bir
buton olabilir. Bunu Code Behing olarak göremiyoruz bunun için kendimiz bir
click eventı tanımlayacağız. Örneğimizin bütün olay yordamları private void
InitializeComponet() metodunda işlem görüyor. Bu metodun içine
private void tamamButon_Click(object sender,
System.EventsArgs e)
{
MultiPage_Controls.SelectIndex=0;
}
//*****
private void
iptalButon_Click(object sender, System.EventsArgs e)
{
sonrakiLinkButon.Enabled=false;
oncekiLinkButon.Enabled=false;
MultiPage_Controls.SelectIndex=3;
}
yukarıdaki iki metodu aşağıdaki tablodaki gibi tanımlamamız
gerekiyor(Tablo-3)
private void InitializeComponent()
{
this.sonrakiLinkButon.Click += new
System.EventHandler(this.sonrakiLinkButon_Click);
this.oncekiLinkButon.Click += new
System.EventHandler(this.oncekiLinkButon_Click);
this.tamamButon.Click
+= new System.EventHandler(this.tamamButon_Click);
this.iptalButon.Click+=new
System.EventHandler(this.iptalButon_Click);
this.Load += new
System.EventHandler(this.Page_Load);
|
Tablo-3
Bu tanımlama işleminden sonra LinkButonlarımızın hareket işlemleri
için bir metod yapıyoruz.
private void hareket(int adim)
{
MultiPage_Controls.SelectedIndex=i+adim;
switch(MultiPage_Controls.SelectedIndex)
{
case 0:
sonrakiLinkButon.Enabled=true;
oncekiLinkButon.Enabled=false;
break;
case 1:
sonrakiLinkButon.Enabled=true;
oncekiLinkButon.Enabled=true;
break;
default:
sonrakiLinkButon.Enabled=false;
oncekiLinkButon.Enabled=true;
break;
}
}
Hareket metodumuzuda oluşturduktan sonra şimdi
sonrakiLinkButon nesnemizin click olayına giriyoruz.
private void sonrakiLinkButon_Click(object sender,
System.EventArgs e)
{
hareket(+1); //
İleri gitmesi için +1 arttırıyoruz.
}
oncekiLinkButon_Click(object sender, System.EventsArgs e)
{
hareket(-1);//
geri gitmesi içim -1 değerni verdik
}
Örneğimiz burada bitmiştir. Şimdi
Code Behing daki kodlarım tümünü aşağıdaki tabloda inceleyebilirsiniz (Tablo-4)
|
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
usingMicrosoft.Web.UI.WebControls;
namespace IEWebControls
{
///
/// Summary description for
WebForm1.
public class WebForm1
: System.Web.UI.Page
{
protected
System.Web.UI.WebControls.LinkButton sonrakiLinkButon;
protected System.Web.UI.WebControls.LinkButton
oncekiLinkButon;
protected
Microsoft.Web.UI.WebControls.MultiPage MultiPage_Controls;
protected
System.Web.UI.WebControls.Button tamamButon;
protected
System.Web.UI.WebControls.Button iptalButon;
private
int i;
private
void Page_Load(object sender,
System.EventArgs e)
{
i=MultiPage_Controls.SelectedIndex;
sonrakiLinkButon.Enabled=true;
oncekiLinkButon.Enabled=false;
}
#region
Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
InitializeComponent();
base .OnInit(e);
}
private void InitializeComponent()
{
this.sonrakiLinkButon.Click += new
System.EventHandler(this.sonrakiLinkButon_Click);
this.oncekiLinkButon.Click += new
System.EventHandler(this.oncekiLinkButon_Click);
this.tamamButon.Click += new System.EventHandler(this.tamamButon_Click);
this.iptalButon.Click+=new
System.EventHandler(this.iptalButon_Click);
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
private void
iptalButon_Click(object sender,System.EventArgs e)
{
sonrakiLinkButon.Enabled=false;
oncekiLinkButon.Enabled=false;
MultiPage_Controls.SelectedIndex=3;
}
private void
tamamButon_Click(object sender,System.EventArgs e)
{
MultiPage_Controls.SelectedIndex=0;
}
private void
oncekiLinkButon_Click(object sender, System.EventArgs e)
{
hareket(-1);
}
private void
hareket(int adim)
{
MultiPage_Controls.SelectedIndex=i+adim;
switch(MultiPage_Controls.SelectedIndex)
{
case 0:
sonrakiLinkButon.Enabled=true;
oncekiLinkButon.Enabled=false;
break;
case
1:
sonrakiLinkButon.Enabled=true;
oncekiLinkButon.Enabled=true;
break;
default:
sonrakiLinkButon.Enabled=false;
oncekiLinkButon.Enabled=true;
break;
}
}
private void
sonrakiLinkButon_Click(object sender, System.EventArgs e)
{
hareket(+1);
} //metod
} //class
} //namespace
|
Tablo-4
Bu yazımda multipage i nasıl kullanılabileceğini anlatmaya
çalıştım. Bir sonraki yazımda webcontrollerinden TabSprit
nesnesini anlatmaya devam etmeye çalışacağım. Şimdilik bu kadar en kısa
zamanda görüşmek üzere. Konu ile ilgili olarak bana mail atabilirsiniz.
Mail adresim : e_paganom@hotmail.com
ERAY CAKIR
|