Bu yazımda, Spark View Engine ile Layout(Master Page) dosyalarını, nasıl kullanabileceğimizi inceleyeceğiz. Söz konusu konuyu, makale serimizin giriş bölümünde, kısa bir şekilde incelemiştik.
Spark View Engine konusunu incelemeye başladığımda, aklıma ilk olarak “Acaba Master Page kullanımı nasıl ?” sorusu takılmıştı. Konu ile ilgili araştırmadan ve uygulama geliştirirken yaşadığım hatadan
sonra, kullanım ile ilgili bazı maddeler oluştu. Şimdi bu maddeleri görelim;
- Varsayılan Layout isimi olarak “Application.spark” ‘dır.
- Spark View Engine, Layout dosyalarını View\Layouts ya da View\Shared dizinlerinde aramaktadır. Eğer bulamaz ise, çoğu zaman boş sayfa geliyor.
Konu ile ilgili olarak, birkaç ipucu aldıktan sonra, temel anlamda nasıl gerçekleştire bileceğimizi inceleyelim.
|
<html>
<head>
<use name="Head"/>
</head>
<body>
<use name="Content"/>
</body>
</html>
|
Yukarıda, Layout tanımlamasını görmüş bulunmaktayız. Hazırlamış olduğum kullanım, klasik olarak kullandığımız, Master Page den farklı olarak “runat=Server” kelimesi ve ContentPlaceHolder kullanmadık. ContentPlaceHolder yerine <use name=”Head”/> şeklinde tanımlama yapmış olduk.(<use name=”ContentPlaceHolder adı gibi düşünülebilir” />)
Layout kullanımını görmüş olduk. Diğer bir adım olarak Content sayfasında, Layout dosyasını nasıl kullanabileceğimizi inceleyelim.
|
<content name=”Head”>
<!-- (head)Sayfa içeriği -->
</content>
<content name="Content">
<!-- (body)Sayfa içeriği -->
</content>
|
Standart olarak kullanmış olduğumuz Content Page(aspx) kullanımına benzese de, bazı farklılar göstermektedir. Bunlar;
- Master Page içersinde bulunan Content alanın, sayfa içersinde tanımlamak için “<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">” tanımlaması yerine “<Content name=”Head”> “ şeklinde tanımlama yapmaktayız.
- Kullanmış olduğumuz tanımlamalarda “runat=server” kullanmıyoruz.
Üzerinde çalıştığınız projenizde, Spark View Engin kullanır iken, faklı bir Master kullanmak istiyor iseniz, Content sayfasını <use master=”Cms”/> şeklinde bir tanımlama yapabilirsiniz(<use master=”seçmek istediğiniz master adı”/>). Bu bölümüne kadar, temel kullanımları incelemiş olduk. Şimdi ise, küçük bir senaryo geliştirerek, konuyu daha iyi anlayalım.
Üzerinde çalışacağımız senaryo için,ASP.Net MVC projesi başlatalım.Çalışmamızda kullanmak için, yukarda da görmüş olduğunuz gibi Layouts klasörü oluşturalım.
Not: ilk makalemde, Spark View Engine projenize nasıl kuracağınızdan bahsettiğim için, bu noktayı atlıyorum.
Hazırlayacağımı uygulama temel olması amacıyla, Layouts klasörüne “.spark” uzantılı iki dosya ekleyelim.
Varsayılan Layout kullanımını görmek için, dosyaların birinin adını “Application.spark” olarak atayalım.Senaryomuz için oluşturduğumuz Layout dosyaları , için aşağıdaki içirikleri kullanalım.
Application.spark
|
<html>
<head>
<title> <use content="Title"/></title>
<use content="Head"/>
</head>
<body style="background-color:Silver;">
<use content="Main"/>
!{Html.ActionLink("Home","Index")}
!{Html.ActionLink("About","About")}
</body>
</html>
|
Not: Hazırladığımız Layout dosyalarında farklı oluşturmak için, background-color özelliklerini değiştirelim. .
Html.spark
|
<html>
<head>
<title> <use content="Title"/></title>
<use content="Head"/>
</head>
<body style="background-color:White;">
<use content="Main"/>
!{Html.ActionLink("Home","Index")}
!{Html.ActionLink("About","About")}
</body>
</html>
|
Layout dosyalarını oluşturduktan sonra, ikici adıma geçelim. Bu adımda, Layout dosyalarını kullanacak olan, Content sayfalarını hazırlayalım.
Not: Varsayılan Layout(Application) dosyası, kullanımı için her hangi bir tanımlama yapmamıza gerek bulunmamaktadır.
|
<content name="Title">
Home Page
</content>
<content name="Head">
</content>
<content name="Main">
<h2>${Html.Encode(ViewData["Message"])}</h2>
<p>
To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
</p>
</content>
|
Aşağıda, varsayılan Layout dışında, farklı bir Layout dosyasını nasıl kullanacağımız, örneklendirilmiştir. Dikkat edecek olur iseniz, yukarıdaki kullanım şeklinde farklı olarak, kullanacağımız Layout dosyasını “<use master=”Html” /> “ şeklinde bir tanımlama ile seçiyoruz.
|
<use master="Html"/>
<content name="Title">
About Us
</content>
<content name="Head">
</content>
<content name="Main">
<h2>About</h2>
<p>
Put content here.
</p>
</content>
|
Senaryomuzu yazdıktan sonra, oyuncularımızı sahneye davet, 
ederek uygulamamızı çalıştıralım.
Varsayılan Layout
Seçime bağlı olarak, hazırladığımız Layout(Html Layout)
Bu yazımda, Spark View Engine uygulamalarında Layout kullanımını inceleyerek, basit bir uygulama geliştirdik. Konu ile ilgili sorularınızı info@ibrahimatay.org mail adresi yönetebilirsiniz.
Herkese kolay gelsin.
IBRAHIM ATAY
Blog: http://www.ibrahimatay.org
Twitter : http://twitter.com/ibrahim_atay
