ASP.NET Master Page Kullanımı

ASP.NET'te web uygulamaları geliştirirken görsel tarafa da önem veririz. Web uygulamalarında değişmeyen alanları MasterPage kullanarak tanımlayabiliriz.

Yaygın olarak web sitelerdeki

  • Üst, sol menü alanları,
  • Footer(alt kısım) alanı,
  • Reklamların olduğu alanlar
  • Blog sitelerindeki kategori alanı master page'de kodlanır.
Eğer Master Page kullanmasaydık uygulamamızdaki bütün sayfalar için aynı kodları tekrar tekrar yazmak zorunda kalacaktık.Böylece kontrol etmesi zor bir hale gelecekti. Geliştirme süresi de uzun olacaktı MasterPage'de ortak alanları tek seferde kodlarız.

Master Page'nin dışında kalan alanlar içerik(content) kısımları olup, sayfaları ayırıcı yapar.

Örnek bir Master Page oluşturup ardından Master Page'yi kullanan bir sayfa ekleyelim.

Visual Studio'da ASP.NET Web Application Projesi açıp, Projemize sağ tıklayıp Web Form Master Page'ye tıklayalım. Master Page'ler .Master uzantılıdır. Site1.Master adında Master Page oluşturduktan sonra Üst Menü oluşturalım.

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="UsingMasterPage.Site1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:BulletedList ID="BulletedList1" runat="server">
                <asp:ListItem Style="width:20%;list-style-type:none;display:inline-block">Ana Sayfa</asp:ListItem>
                <asp:ListItem Style="width:20%;list-style-type:none;display:inline-block">Hakkımızda</asp:ListItem>
                <asp:ListItem Style="width:20%;list-style-type:none;display:inline-block">Ürünler</asp:ListItem>
                <asp:ListItem Style="width:20%;list-style-type:none;display:inline-block">İletişim</asp:ListItem>
            </asp:BulletedList>
        </div>
    <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

Üst menümüzde Ana Sayfa,Hakkımızda,Ürünlerimiz ve İletişim alanları var.
Stil olarak ;
  • Menü alanlarını yan yana getirmek için display:inline-block,
  • BulletedList default olarak madde işareti ile sıralanır.list-style-type:none ile madde işaretlerini kaldırdık. 
  • Sayfanın %20'si kadar her alan için genişlik vererek menümüzü oluşturduk.


  • ContentPlaceHolder1 ID'li ContentPlaceHolder, sayfamızın içerik(body) kısmı için tanımlanmış alandır. 
  • head ID'li ContentPlaceHolder, sayfamızın head alanı için tanımlanmış alandır. 
Projemize sağ tıklayıp Web Forms With Master Page sayfası oluşturuyoruz.Sayfamızın adı Hakkimizda olsun.



Bu sayfa az önce oluşturulan Master Page'mizi kullanacak.Yani iki sayfada da üst menü değişmeyecek sadece içerik farklı olacaktır. 




<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="Hakkimizda.aspx.cs" Inherits="UsingMasterPage.Hakkimizda" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    Burasi Hakkımızda Köşesi
</asp:Content>
Hakkimizda.aspx sayfasında içeriği değitirdik.MasterPage'deki ContentPlaceHolder1 ID'li alan içeriği değişecek alanımızdı. Burası Hakkımızda Köşesi yazısını bu alana yazdık.

Aynı işlemleri Ana Sayfa,İletişim ve Ürünler sayfasında da yapabiliriz.

Master Page yöntemi hazır olan template giydirmede de işimize yarayan bir yöntemdir. Content kısmı hariç geriye kalan menü, footer gibi alanları Master Page kısmına alabiliriz.

Yorumlar

Yorum Gönder