Bu makalemde Asp.Net'de bir web sayfasının genel olarak nasıl oluşturulduğunu göreceğiz.
Merhaba arkadaşlar. File|New|Web Site ile bir Asp.Net/C# projesi oluşturarak başlıyoruz.
Projemizi oluşturduğumuzda Solution Explorer'a Default.aspx olarak gelen sayfamızı üzerinde sağ tıklayıp Delete komutunu vererek siliyoruz.
Şimdi adım adım sayfalarımızı oluşturalım.
Bu adımda MasterPage dediğimiz sayfamızı oluşturacağız. Peki nedir bu MasterPage? MasterPage sitemizin ana kalıbını bulunduran sayfamızdır. Ne demek bu? Ör; Normal WebForm sayfamızda bir menü yaptık varsayalım. Bu sayfadaki menümüzden başka bir sayfaya link verdik. Kullanıcı linke tıkladı ve diğer sayfaya gitti, baktı ki bu sayfada menü felan yok çünkü biz menüyü önceki sayfada yaptık, geri nasıl gidicek bu kullanıcı? İşte burada MasterPage imdadımıza koşuyor. Bu menüyü MasterPage içerisinde yaptığımızda diğer sayfalardan erişimimizde mümkün oluyor. Bunun nasıl olduğunu makalenin sonunda eminim daha iyi anlayacaksınız.
Şimdi sayfamıza WebSite | Add New Item ile yeni bir MasterPage sayfası ekliyoruz.
Bunun ismini istediğiniz gibi değiştirebilirsiniz. Ben burada varsayılan olarak atadığı ismi kullanacağım.
Sayfamız Solution Explorer'a bu şekilde eklenecektir.
MasterPage'i ekledikten sonra yukarıdaki resimde olduğu gibi bir sayfa gelecektir. Bu sayfada yer alan ContentPlaceHolder nesnesi bizim ihtiyacımızı karşılayacak olan nesnedir. Nasıl olduğunu sonraki adımlarda daha rahat göreceğiz.
Şimdi MasterPage sayfamızın basit bir tasarımını yapalım.
Burada eklediğimiz nesneleri açıklamak gerekirse; TreeView bizim sayfamızın menüsünü oluşturacak nesnedir. SiteMap site haritasını gösteren nesnedir. ContentPlaceHolder'da MasterPage'imiz içinde diğer sayfalardan erişebileceğimiz içerik bölümüdür.
Sayfamızın html taglari;
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>TreeView ile Menü Yapıyoruz</title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="formicerik" runat="server">
<div>
<table align="center" width="700" border="1">
<tr>
<td colspan="2" style="text-align: center">
<h2>
Asp.Net TreeView ile Menü Yapımı</h2>
</td>
</tr>
<tr>
<td colspan="2">
<asp:SiteMapPath ID="SiteMapPathHaritaNesnesi" runat="server">
</asp:SiteMapPath>
</td>
</tr>
<tr>
<td width="150">
<asp:TreeView ID="TreeViewMenuNesnesi" runat="server"
DataSourceID="SiteMapDataSource">
</asp:TreeView>
<br />
<asp:SiteMapDataSource ID="SiteMapDataSource" runat="server" />
</td>
<td width="450">
<div>
<asp:ContentPlaceHolder ID="iceriksayfasiCPH" runat="server">
</asp:ContentPlaceHolder>
</div>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
2. Bu adımda diğer sayfalarımızı oluşturacağız. Yine Web Site|Add New Item ile yeni bir WebForm ekliyoruz.
Bu adımda dikkat etmemiz gereken bir nokta var. Normal WebForm'ları eklerken Select master page seçeneğini işaretlemiyorduk. Ama bu sefer bunu işaretlememiz gerekiyor. Çünkü eklenecek olan bu sayfa MasterPage kalıbı içinde yer alacak. Bu seçeneği işaretledikten sonra Add butonuna tıklıyoruz.
Şimdi karşımıza gelen pencere bize MasterPage sayfamızı belirmemizi istiyor. Burada sayfamıza eklediğimiz MasterPage'ler görünüyor. Birden fazlada MasterPage kullanmak mümkündür. Bunun için bir sınırlama yok. Bunuda seçtikten sonra OK butonuna tıklıyoruz.
Bu şekilde aynı işlemi yaparak "Anasayfa.aspx", "Dokumanlar.aspx", "Giris.aspx", "Hakkimizda.aspx", "Makaleler.aspx" şeklinde 5 tane sayfa ekliyoruz. Siz isteğinize göre istediğiniz sayıda sayfa ekleyebilirsiniz.
Burada eklediğimiz bir sayfanın görünümünü inceleyelim. Gördüğünüz gibi sayfada ContentPlaceHolder(iceriksayfasiCPH) dışında başka bir bölgeye etki edemiyorsunuz. Çünkü diğer kısımları MasterPage içinde yaptık. ContentPlaceHolder ile de kullanıcının diğer sayfalardan etki edeceği alanı belirledik. Eğer bu tasarımı WebForm'larda yapsaydık birini güncellediğimizde diğerlerinide tek tek güncellememiz gerekecekti. Ama MasterPage'de böyle bir olay yok. Genel olduğu için MasterPage'de yaptığınız değişiklikler bütün sayfalarda aynen uygulanır. Buda kullanışlığının ayrı bir avantajı…
Burada altı kırmızı ile çizili olan taglari sayfa eklendiğinde kendi atıyor. Bunların ID'lerini istediğimiz gibi değiştirebiliriz. "head" yazan bildiğimiz head tagidir. Diğeride içeriği barındıracak kısımdır.
Sayfalarımızı eklediğimizde bu şekilde bir görünüm elde edeceğiz.
3. Bu adımda sitemizin haritasını oluşturacağız. Bunun için ilk olarak Website| Add New Item ile bir tane SiteMap nesnesi ekliyoruz.
Add dedikten sonra Solution Explorer'da bu şekilde görebiliriz.
Şimdi sıra SiteMap içinde sitemizin haritasını çıkarmaya. Bunun için Web.sitemap üzerinde çift tıklıyoruz ve aşağıdaki gibi düzenliyoruz.
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="Anasayfa.aspx" title="Anasayfa" description="">
<siteMapNode url="Giris.aspx" title="Giriş" description=""/>
<siteMapNode url="Dokumanlar.aspx" title="Dökümanlar" description="" />
<siteMapNode url="Makaleler.aspx" title="Makaleler" description=""/>
</siteMapNode>
<siteMapNode url="Hakkimizda.aspx" title="Hakkımızda" description=""/>
</siteMapNode>
</siteMap>
Burada url; sayfanın adı, title; menünün adı; description; menünün üzerinde geldiğimizde çıkacak açıklamadır.
Anamenüyü <siteMapNode url=""> </siteMapNode> şeklinde yaptık. Bunun alt menülerini oluşturmak içinde bu taglerin arasına <siteMapNode url=""/> şeklinde alt menüleri belirttik. Yani kategorileme gibi alt menüyü içde anamenüyü dışta belirttik.
+ Anasayfa
++ Giriş
+++ Dökümanlar
+++ Makaleler
++ Hakkımızda
4. Bu kısımda haritamızı menü nesnelerimiz ile bağlayacağız. Bunun içinde sayfaya Toolbox'dan SiteMapDataSource nesnesini ekliyoruz.
Bunu ekledikten sonra TreeView nesnesini seçtikten sonra sağ üst köşesinde bulunan küçük ok simgesine tıklıyoruz. Buradan açılan menüde Choose Data Source kısmında veri kaynağını belirtiyoruz. Buda saydamıza daha önce eklediğimiz SiteMapDataSource olarak belirliyoruz. Daha sonra menümüzün direk olarak oluştuğunu görüceksiniz.
Burada aklınıza şöyle bir soru gelebilir. Peki bu olayı SiteMap nesnesi için neden yapmadık. Çünkü SiteMap nesnesi sayfa çalıştığında otomatikmen bunu çekecektir. Bu arada sayfaya eklediğimiz SiteMap nesnesi ile Solution Explorer'daki SiteMap'ı karıştırmatın. Birisinde harita oluşturulurken diğeri haritayı sayfada gösterir.
5. Bu adımda sitemizin başlangış sayfamızı belirleyip sitemizin nasıl çalıştığına bakacağız. Bunun için Solution Explorer'daki Anasayfa.aspx üzeirnde sağ tıklayarak Set as Start Page'e tıklıyoruz.
Solution Explorer'daki sayfalarımızında en son görünümü resimdeki gibidir.
Bu makalemiz bu kadar. Görüşmek üzere...
Kaynak dosyayı indirmek için tıklayın
buldum çünkü
