Asp.Net ile MasterPage Kullanimi
Makalemin iceriginde size Asp.Net ortaminda basit olarak bir master page 'i adim adim nasil yapabiliriz onu anlatacagim. Oncelikle Visual Studio'umuzu aciyoruz ve File -> New -> Web Site diyerek yeni bir web projesi olusturuyoruz. Projenin ismini MasterPageDeneme olarak tanimliyor ve Asp.Net Empty Web Site 'i seciyorum. Icerisinde sadece web.config olarak olusan bos bir proje olusturmus olduk.
Proje uzerinde sag tus yardimiyla Add New Item diyoruz. Ismini TemplatePage.Master olarak belirliyoruz. Olusturdugumuz MasterPage 'in uzantisi .master olmak zorundadir.
Olusturdugumuz MasterPage SolutionExplorer'da yerini aldiktan sonra artik sayfa uzerinde calisabiliriz.
Sayfanin icerisine menulerden Table menusunden Insert table secenegini kullanarak 2 sutun 3 satirlik bir tablo olusturuyorum.
Yukarida gormus oldugunuz gibi table kullanarak basit bir tasarim hazirlamis oldum.
Template'imizin icerisine Tools'dan bir adet ContentPlaceHolder nesnesi ekledim ki bu nesne icerisine diger sayfalari yonlendiriyor olacagiz. Yan ve ust menuleride yine tools'dan kullanmis oldugumuz menu nesnesi ile yapmis oluyoruz (Orientation ozelligini vertical veya horizantal yapmaniz yeterli olacaktir).
TemplatePage.Master Kaynak Kodlari ;
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="TemplatePage.master.cs" Inherits="TemplatePage" %>
<!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></title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<style type="text/css">
.style1
{ width: 100%; }
.style2
{ height: 35px; text-align: center; }
.style4
{ height: 217px; }
.style5
{ height: 113px; text-align: center; }
.style6
{ height: 40px; }
.style7
{ height: 217px; width: 3px; }
</style>
</head>
<body>
<form id="form1" runat="server">
<div> <table> <tr>
<td bgcolor="#35496A" colspan="2">
<asp:Label ID="Label1" runat="server" Font-Bold="True" Font-Size="18pt"
ForeColor="#F0F0F0" style="text-align: center"
Text="Nano'nun Gunlugu - Asp.Net Ile Master Page Kullanimi"></asp:Label>
</td> </tr> <tr>
<td bgcolor="#990033" colspan="2">
<asp:Menu ID="Menu2" runat="server" BackColor="#B5C7DE"
DynamicHorizontalOffset="2" Font-Names="Verdana" Font-Size="0.8em"
ForeColor="#284E98" Orientation="Horizontal" StaticSubMenuIndent="10px">
<DynamicHoverStyle BackColor="#284E98" ForeColor="White" />
<DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<DynamicMenuStyle BackColor="#B5C7DE" />
<DynamicSelectedStyle BackColor="#507CD1" />
<Items>
<asp:MenuItem Text="Ana Sayfa" Value="Ana Sayfa"></asp:MenuItem>
<asp:MenuItem Text="Kullanici Girisi" Value="Kullanici Girisi"></asp:MenuItem>
<asp:MenuItem Text="Iletisim" Value="Iletisim"></asp:MenuItem>
</Items>
<StaticHoverStyle BackColor="#284E98" ForeColor="White" />
<StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<StaticSelectedStyle BackColor="#507CD1" />
</asp:Menu>
</td> </tr> <tr>
<td bgcolor="#990033">
<asp:Menu ID="Menu1" runat="server" BackColor="#B5C7DE"
DynamicHorizontalOffset="2" Font-Names="Verdana" Font-Size="0.8em"
ForeColor="#284E98" StaticSubMenuIndent="10px">
<DynamicHoverStyle BackColor="#284E98" ForeColor="White" />
<DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<DynamicMenuStyle BackColor="#B5C7DE" />
<DynamicSelectedStyle BackColor="#507CD1" />
<Items>
<asp:MenuItem Text="AnaSayfa" Value="AnaSayfa"></asp:MenuItem>
<asp:MenuItem Text="Kullanici Girisi" Value="Kullanici Girisi"></asp:MenuItem>
<asp:MenuItem Text="Iletisim" Value="Iletisim"></asp:MenuItem>
</Items>
<StaticHoverStyle BackColor="#284E98" ForeColor="White" />
<StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<StaticSelectedStyle BackColor="#507CD1" />
</asp:Menu>
</td>
<td bgcolor="#F0F0F0">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</td> </tr> <tr>
<td bgcolor="#35496A" colspan="2">
<asp:Label ID="Label2" runat="server" Font-Bold="True" Font-Size="10pt"
ForeColor="#F0F0F0" style="text-align: center"
Text="Sevdanur Genc - Nano'nun Gunlugu"></asp:Label>
</td> </tr> </table> </div>
</form>
</body>
</html>
Simdi projemize SolutionExplorer penceresinden proje uzerinde sag tus yaparak add new item lokasyonunu kullanalim ve ardindan Ana sayfa, kullanici girisi ve iletisim sayfalari icin 3 yeni bos webform olusturalim. Bu web formlari olustururken dikkat etmemiz gereken tek nokta; pencerenin hemen sag alt kisminda bulunan Select Master Page secenegini isaretlemeniz gerekmektedir.
Ardindan asagidaki gibi karsiniza gelen pencerede projenizde daha onceden olusturmus oldugunuz MasterPage'i seciniz.
Ana Sayfaniz tipki master page 'de ki hazirlamis oldugunuz sekilde karsiniza gelecektir. Burada onceden master page 'de olusturmus oldugunuz hic bir ozelligine mudehale edemiyorsunuz. Bu sebeple bu noktadan sonra artik contentplaceholder nesnesi icerisine bir hucreli table yerlestiriniz ve icerisine kullanmak istediginiz nesneleri yerlestiriniz.
Yorumlar