- Katılım
- 3 Ağustos 2012
- Mesajlar
- 3,288
- Reaksiyon puanı
- 2,930
- Puanları
- 358
ASP.NET MVC ile static bir web sitesi kurabiliriz. Bu web sitesinde master page tekniği kullanacağız.
Master Page Nedir?
Master Page genellikle web sitelerinde header(baş kısım) ve footer(alt kısım) olmak üzere belirlenir.
Bir web sitesinde içerik değişse de başlık kısmı değişmez. Yani siz sitede dolanırken başlık ve alt kısımlar sabit kalır. Bu teknik master page oluyor. Peki kullanmamızda ne gibi bir fayda var?
Eğer siteniz çok fazla trafik alıyorsa ve sayfaların boyutları sizin için çok önemli ise her sayfaya footer, header gibi bölümleri ayrı ayrı eklemeniz doğru olmaz. Bunun yanında 2. menü gibi farklı bölümlerde dahil.
Dolasıyla sitemizin daha hızlı yüklenmesi ve daha derli toplu kodlama için master page tekniğini kullanabiliriz.
Bu yazımızda static bir master page içeren ASP.NET MVC metodolojisi ile web sitemizi kodlayacağız.
İlk olarak Visual Studio üzerinden yeni bir ASP.NET Web Uygulaması başlatıyoruz.
Boş bir proje olacak ve MVC kullanacak.
Solution Explorer altında oluşan klasörlerden Controller klasörünü sağ tıklayın ve yeni bir controller oluşturun.
Bu şekilde sitemizden gelen istekleri yakalayacağız.
Adını HomeController olarak belirliyoruz.
Şimdi View klasörü altında yeni bir klasör oluşturacağız. Bu klasör bizim sabit sayfalarımızı tutacak.
Bu sayfalar
Header
Gövde
Footer
şeklinde olacak.
Gövde ismini _Layout olarak belirleyeceğiz. Adettendir.
View klasörünü sağ tıklayın ve yeni bir klasör oluşturun.
Klasörün ismi Shared olsun.
Bu klasörüde sağ tıklayın ve Add View seçeneği ile yeni bir View ekleyin.
View eklerken çıkan pencereden Options bölümündeki tüm seçenekleri kaldırın ve ismini _Layout olarak belirleyin.
Şimdi tekrar aynı klasör içerine 2 yeni View daha ekleyin ancak bu Viewlar eklenirken “Create as a partial view” seçeneğini seçin.
_Head ve _Footer isimli sayfaları bu şekilde ekleyin.
Şimdi Controller altına eklediğimiz HomeController.cs dosyasını açın ve İndex üzerini sağ tıklayıp Add View seçeneğini seçin.
Açılan pencereden options kısmından layout page kullanacağınızı seçin ve açılan diğer bölümden _Layout isimli sayfayı seçin.
Bu eklemeden sonra artık web sitemizin iskeleti hazır.
Şimdi Shared klasörü altında ki _Layout adlı dosyayı tıklayın ve açılan HTML kodlarını düzenleyelim.
Body tagları arasındaki,
@ işareti ile bir C# kodu yazacağımızı belirtiyoruz.
@Html.Partial Html sayfası olarak bir partial sayfasını çağıracağımızı söylüyoruz.
(“_Head”) adlı sayfayı çağıracağız.
@RenderBody() Web sitemizin içerik kısmının nereye yerleşeceğini bu kod ile gösteriyoruz. Yerini değiştirebilirsiniz.
@Html.Partial(“_Footer”) Partial olarak footer sayfasının burada gösterileceğini söylüyoruz.
Şimdi gelelim Head ve Footer sayfalarını düzenlemeye.
Ben kısa olarak bu sayfaları görebiliyormuyuz diye anlamak için sayfalara basit h2 tagları ekleyeceğim.
_Footer.cshtml içerisine
_Head.cshtml içerisine
View/Home altında ki index.cshtml içerisine
Yazdıktan sonra Projemizi başlatıyoruz.
Görünüm şu şekilde olacak. Artık sitemizin iskeleti hazır. Düzenlemeye başlayabilirsiniz.
* Alıntı değildir. Tarafımca hazırlanmıştır.
Master Page Nedir?
Master Page genellikle web sitelerinde header(baş kısım) ve footer(alt kısım) olmak üzere belirlenir.
Bir web sitesinde içerik değişse de başlık kısmı değişmez. Yani siz sitede dolanırken başlık ve alt kısımlar sabit kalır. Bu teknik master page oluyor. Peki kullanmamızda ne gibi bir fayda var?
Eğer siteniz çok fazla trafik alıyorsa ve sayfaların boyutları sizin için çok önemli ise her sayfaya footer, header gibi bölümleri ayrı ayrı eklemeniz doğru olmaz. Bunun yanında 2. menü gibi farklı bölümlerde dahil.
Dolasıyla sitemizin daha hızlı yüklenmesi ve daha derli toplu kodlama için master page tekniğini kullanabiliriz.
Bu yazımızda static bir master page içeren ASP.NET MVC metodolojisi ile web sitemizi kodlayacağız.
İlk olarak Visual Studio üzerinden yeni bir ASP.NET Web Uygulaması başlatıyoruz.
Boş bir proje olacak ve MVC kullanacak.
Solution Explorer altında oluşan klasörlerden Controller klasörünü sağ tıklayın ve yeni bir controller oluşturun.
Bu şekilde sitemizden gelen istekleri yakalayacağız.
Adını HomeController olarak belirliyoruz.
Şimdi View klasörü altında yeni bir klasör oluşturacağız. Bu klasör bizim sabit sayfalarımızı tutacak.
Bu sayfalar
Header
Gövde
Footer
şeklinde olacak.
Gövde ismini _Layout olarak belirleyeceğiz. Adettendir.
View klasörünü sağ tıklayın ve yeni bir klasör oluşturun.
Klasörün ismi Shared olsun.
Bu klasörüde sağ tıklayın ve Add View seçeneği ile yeni bir View ekleyin.
View eklerken çıkan pencereden Options bölümündeki tüm seçenekleri kaldırın ve ismini _Layout olarak belirleyin.
Şimdi tekrar aynı klasör içerine 2 yeni View daha ekleyin ancak bu Viewlar eklenirken “Create as a partial view” seçeneğini seçin.
_Head ve _Footer isimli sayfaları bu şekilde ekleyin.
Şimdi Controller altına eklediğimiz HomeController.cs dosyasını açın ve İndex üzerini sağ tıklayıp Add View seçeneğini seçin.
Açılan pencereden options kısmından layout page kullanacağınızı seçin ve açılan diğer bölümden _Layout isimli sayfayı seçin.
Bu eklemeden sonra artık web sitemizin iskeleti hazır.
Şimdi Shared klasörü altında ki _Layout adlı dosyayı tıklayın ve açılan HTML kodlarını düzenleyelim.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>_Layout</title>
</head>
<body>
@Html.Partial("_Head")
@RenderBody()
@Html.Partial("_Footer")
</body>
</html>Body tagları arasındaki,
@ işareti ile bir C# kodu yazacağımızı belirtiyoruz.
@Html.Partial Html sayfası olarak bir partial sayfasını çağıracağımızı söylüyoruz.
(“_Head”) adlı sayfayı çağıracağız.
@RenderBody() Web sitemizin içerik kısmının nereye yerleşeceğini bu kod ile gösteriyoruz. Yerini değiştirebilirsiniz.
@Html.Partial(“_Footer”) Partial olarak footer sayfasının burada gösterileceğini söylüyoruz.
Şimdi gelelim Head ve Footer sayfalarını düzenlemeye.
Ben kısa olarak bu sayfaları görebiliyormuyuz diye anlamak için sayfalara basit h2 tagları ekleyeceğim.
_Footer.cshtml içerisine
HTML:
<h1>Footer</h1>_Head.cshtml içerisine
HTML:
<h1>Head</h1>View/Home altında ki index.cshtml içerisine
HTML:
<h1>Gövde</h1>Yazdıktan sonra Projemizi başlatıyoruz.
Görünüm şu şekilde olacak. Artık sitemizin iskeleti hazır. Düzenlemeye başlayabilirsiniz.
* Alıntı değildir. Tarafımca hazırlanmıştır.
Son düzenleme:
