C#nedir?com
 
YAZAR HAKKINDA
Turhal Temizer
Turhal Temizer
http://www.turhaltemizer.com
İletişme geçmek için tıklayın.
92 Makalesi yayınlanmakta.
Yazar hakkında detaylı bilgi için tıklayın.
Yayınlanan diğer makaleleri için tıklayın.
İlgili etiketler: asp.net detayli framework hazirlamis islemler kavramini kontrol master oldugu olusturulmus sonrasinda tabani tasarim yardimi yazimizda ASP.NET Turhal Temizer
 
YAZI HAKKINDA
Türü : Makale
Serbest Köşede C#nedir?com üyelerinin hazırladıkları yazılar yayınlanır. Bu yazılar editör incelemesine girmeden yayınlanır.
Seviyesi : Başlangıç
Kategori : ASP.NET
Yayınlanma Tarihi : 8.7.2009
Okunma Sayısı : 20591
Yorum Sayısı : 0     yorum yaz
Site İçi AramaSİTE İÇİ ARAMA
Üye Girişini AçÜye GİRİŞİ
Üye girişi için tıklayın.
Kullanıcı Adı
Şifre
 
Beni her zaman hatırla
Bir hafta boyunca kullanıcı bilgilerinizi kullanıcı çıkışı yapana kadar hatırlar. (Paylaşılan bilgisayarlarda önerilmez.)
 
Şifremi / Kullanıcı Adımı unuttum.
 
.net TV RSS Serbest KÖŞE (?)
Serbest Köşede C#nedir?com üyelerinin hazırladıkları yazılar yayınlanır. Bu yazılar editör incelemesine girmeden yayınlanır.
emre TAŞ
XML - Deniz Kılınç
emre TAŞ
yazının devamı >
emre TAŞ
Decompiling and Reverse Engineering .Net Radyo
emre TAŞ
yazının devamı >
emre TAŞ
Masaüstü mü ? İnternet Mi? .Net Radyo
emre TAŞ
yazının devamı >
emre TAŞ
.Net Kavramları - .Net Radyo
emre TAŞ
yazının devamı >
emre TAŞ
Yeni Başlayanlar için - .Net Radyo
emre TAŞ
yazının devamı >
Makale Gönder Bende Yazmak İstiyorum
.net TV RSSBlogroll
Turhal Temizer 'in Blogu
ChatBot UI Sample 26.4.2018
Turhal Temizer 'in Blogu
C# – IRR Function 26.4.2018
Burak Selim Şenyurt
.Net Core ile Amazon DynamoDB'yi Kullanmak 26.4.2018
Burak Selim Şenyurt
Express API Hizmetini Heroku Üzerine Taşımak 26.4.2018
  Diğer Herşey
Sponsorlar
BT Akademi
Medya Portakal
Video Hosting Sponsoru
Csharpnedir.com bir Ineta üyesidir
Uzman Abi
Her Yönüyle C# - Sefer Algan
Asp.Net MVC Framework - Master Pages Kullanımı - I
 
Kapat
Sayfayı Yazdır Sık Kullanılanlara Ekle Arkadaşıma Gönder MySpace Del.Ico.Us Digg Facebook Google Mixx Reddit StumbleUpon
Microsoft ’un web projelerini hazırlarken bizlere mimari tasarıları daha basit ve kullanışlı bir biçimde kullanmamızı sağlayan Asp.Net MVC Framework ’ü daha önceki yazılarımızda detaylı bir biçimde tanımaya çalıştık. Peki neler yapabiliyorduk. Son kullanıcıdan gelen istekler doğrultusunda başka bir sayfaya nasıl yönlendirebileceğimizi, Controller katmanı ile veri tabanı işlemlerini nasıl işleyip görsel sayfaya ileteceğimizi, model katmanı yardımı ile veri tabanı ile haberleşmelerin çok daha basit bir şekilde yapılabileceğini, veri tabanını aktif olarak kullandığımızda nasıl bir uygulama geliştirdiğimizi ve view sayfaları nasıl kolayca oluşturabileceğimizi detaylı olarak daha önceki yazılarımızda inceledik ve neler yapabileceğimizi gördük. Ayrıca uygulamalarımızda MVC tasarımını kullandığımızda daha önceden oldukça fazla uğraştığımız işlemleri ne kadar kolaylıkla yapabildiğimizi defalarca yapmış olduğumuz pratiklerde doğrulamış olduk. Bu yazımızda ise Asp.Net sayfalarında tasarım standardı açısından sıkça kullandığımız Master Pages kavramını MVC Framework ’te kullanım yapısını detaylı olarak inceliyor olacağız.

Asp.Net uygulamaların Master Page kullanmamızın sebebini kısaca hatırlayacak olursak. Benzer tarzda tasarım şablonu kullanacak olduğumuz sayfalarda tekrardan o tasarımsal öğeleri serverdan çağırıp sayfa üzerinde yüklenmemesini beklememek için oluşturulmuş başarılı bir yapıdır. Özellikle tasarım yapısı üzerinde herhangi bir değişiklik yok ise ve sadece içerikler değişecekse çok önemli bir tercih durumundadır. Aynı Asp.Net uygulamalarında olduğu gibi MVC uygulamalarında da Master Page kavramı önemli bir yer tutmaktadır. Varsayılan olan mavi bir tasarımı olan Master Page kullanılmaktadır. Peki biz bu tasarımı değil de kendi tasarımımızı Master Page ’e taşımak istersek neler yapmamız gerekir. Gelin hep birlikte bunu incelemeye çalışalım.

Her zaman olduğu gibi ilk olarak yapmamız gereken Visual Studio 2008 SP1 geliştirme ortamında bir Asp.Net MVC Framework Web uygulaması oluşturuyoruz. Proje dosyasının içerisinden ilk olarak varsayılan olarak oluşturulan Master Page ’in yerini bulalım.



MVC tasarımını dikkate alarak araştırmalarımızı yaptığımızda görsel öğelerin view katmanında olduğunu görürüz. Master Page her yerde kullanılacak bir içerik olduğu içinde view içerisinde Shared klasörünün içerisinde yer alır.

Biz uygulamamızda bu otomatik olarak oluşturulan Master Page ’i kullanmak yerine kendimize bir tane oluşturalım. Ama ilk olarak oluşturulmuş olan Site.Master ’ı siliyoruz. Sonrasında da Add- NewItem yolunu izleyerek web sitesine yeni bir Master Page ekliyoruz.



Master Page ’i sorunsuzca projeye ekledikten sonra nasıl bir içerik oluşturulacağının düşünülmesinin zamanı gelmiştir. Basit olması açısında içeriğe göre değiştirilebilir iki sütun ekleyelim. Bu değişen içerik eklemeyi Asp.Net ’ten de alışık olduğu gibi <asp:ContentPlaceHolder> yardımı ile yapacağız. İçeriği arttırdıktan sonra temel CSS ile Master Page ’in içerisine stil özellikleri de ekliyoruz ve bu yaptığımız işlemler sonrasında elimizdeki değişikler aşağıdaki gibi olacaktır.

View\Shared\Site.Master
<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>

<!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><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>

   <style type="text/css">
      html
      {
         background-color:Gray;
      }

      .column
      {
         float:left;
         width:300px;
         border:solid 1px black;
         margin-right:10px;
         padding:5px;
         background-color:white;
         min-height:500px;
      }

   </style>
   <asp:ContentPlaceHolder ID="head" runat="server">
   </asp:ContentPlaceHolder>
</head>
<body>
   <h1>Sitem</h1>

   <div class="column">
      <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
      </asp:ContentPlaceHolder>
   </div>
   <div class="column">
      <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
      </asp:ContentPlaceHolder>
   </div>
</body>
</html>

Eklemiş olduğumuz içerik kontrollerini body ’nin içerisine <div> taglarının arasına yerleştiriyoruz. Ayrıca div taglarının sütün gibi hareket etmesi için stil özelliğine daha önceden hazırlamış olduğumuz column ’u tanımlıyoruz. Yaptığımız bu işlemler sonucunda Master Page ’in görünümü aşağıdaki gibi olacaktır.



Basit fakat bizlerin hazırlamış olduğu bir Master Page ’e sahip olduk.

Master Page ’i Kullanan View Sayfa Oluşturmak

Asp.Net uygulamalarında Master Page ’ten yararlanarak web sayfaları oluşturabilmemiz mümkündü. Bunun bize en büyük yararı oluşturmuş olduğumuz sayfalarda Master Pages üzerinde belirtmiş olduğumuz içerik kontrol alanlarının düzenlenebilmesi ve diğer taraflar üzerinde herhangi bir değişiklik yapmadan hazırlıyor olmamızdır. MVC Framework ’ten yararlanarak hazırlamış olduğumuz web sayfalarında da Master Page Asp.Net uygulamalarında olduğu gibi kullanılmaktadır.

View klasörünün içerisinde yer alan Home klasörünün üzerinde sağ tıklama sonrasında karşımıza gelen menüden Add - NewItem seçeneğine tıklayarak ekrandan MVC View Content Page  i seçerek Master Page ’i kullanabileceği bir web sayfa oluşturmaya başlıyoruz.


Sayfa tipimizi seçip ekle dediğimizde hazırlamış olduğumuz Master Page ’ler den istediğimizi seçmek için bir ekran çıkacaktır.


Tamam dedikten sonra artık Master Page ’i kullanan bir web sayfası uygulamamızda oluşturulmuş olacaktır. Oluşturulan sayfanın arka plan kodları aşağıdaki gibi oluşturulmuştur.

View\Home\Index.aspx
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
</asp:Content>

Standart olarak projelere eklenmiş olan *.aspx sayfalardan farklı olarak HTML ve Body tagları yer almaktadır. Bu taglar Master Page de oluşturulduğu için yalnızca belirttiğimiz içerik kontrol alanları sayfada gözükmüştür ve sayfa içerisinde kullanıcılara göstermek istediğimiz içerikleri buralardan yayınlarız. Örnek olması açısında body taglarının içerisine eklemiş olduğumuz <asp:content> ’lerin içerisinde biraz değişiklik yaparak aldığımız sonuca hep birlikte çok atalım.

View\Home\Index.aspx
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
   İlk içerik kontrol alanı
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
   İkinci içerik kontrol alanı
</asp:Content>

Yaptığımız düzenleme sonrasında ekran değişikliğimiz aşağıdaki gibi olacaktır.



Yapılmış olan değişikler sonrasında web sayfamızın içeriği istediğimiz gibi olmuştur.

Master Page yardımı ile oluşturulan view sayfanın içeriğini düzenlemek

İlk olarak düzenleme yapağımız yer sayfamızın başlığı olacaktır. Oluşturmuş olduğumuz web sayfası internet tarayıcısında açıldığında pencerenin en üst kısmında yer alan bölümü düzenleyelim. Asp.Net ten ve diğer bütün web sayfası kodlama yapılarından alışık olduğumuz üzere title bölümünde belirtmemiz yeterli olacaktır.

Sayfamızın markup kod tarafında en üstte yer alan <Page> </Page> bölümün aralığının içerisinde yer alan title özelliğini değiştirerek sayfa başlığını sorunsuzca oluşturmuş oluruz.


Yapmış olduğumuz işlemi hazırlanmış olan Master Pages ile ilişkilendirerek tekrardan yapalım. Bu durumda ilk olarak oluşturulan Master Pages içerisine koyduğumuz içerik kontrol alanlarını hatırlamamız gerekir ve bir tane head bölümünün içerisine <asp:contentplaceholder> ekledik. Alana başlık, meta ve diğer birçok kriteri ekleyebilmemiz mümkündür. Bu özellikten yararlanarak aspx sayfasının içerisinde aşağıdaki değişiklikleri uyguluyoruz.

View\Home\Index.aspx
<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
   <title>Başlık buraya yazılacak</title>
   <meta name="description" content="İçindekiler buraya" />
   <meta name="keywords" content="ana arama kriterleri buraya" />

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
   İlk içerik kontrol alanı
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
   İkinci içerik kontrol alanı
</asp:Content>

Asp.Net uygulamaları ile uygulamadığımız tekniklerin birebir aynısıdır. Bu örneklerin bu kadar detaylı olarak gösterilmesinin sebebi Master Pages kavramının temel yapısının alışık olduğumuz Asp.Net Master Pages kavramından bir farkının olmadığını da göstermek amacıyladır. Yapmış olduğumuz işlemler sonrasında karşımıza gelen ekran görüntüsü aşağıdaki gibi olacaktır.



Yaptığımız işlemler sonucunda gayet başarılıyız. :)

Bu yazımızda Asp.Net MVC Framework ile hazırlanmış olan uygulamalarda Master Pages kavramını nasıl kullanabileceğimizi ve içerik düzenlemelerini nasıl kullanabileceğimizi detaylı bir biçimde incelemeye çalıştık. Bir sonraki MVC Framework yazımızda Master Pages kavramını incelemeye devam ederken veri tabanı işlemleri ile ilişkilerine de detaylı bir biçimde değineceğiz.

Umarım yararlı olabilmiştir.

Turhal Temizer
turhal.temizer@csharpnedir.com
http://turhal.blogspot.com
Makale:
Asp.Net MVC Framework - Master Pages Kullanımı - I ASP.NET Turhal Temizer
  • Yazılan Yorumlar
  • Yorum Yaz
Bu konu hakkında yayınlanan yorum bulunmamaktadır.
"Yorum Yaz" tabını kullanarak sizde yorumlarınızı yazabilirsiniz.
Yorum yazabilmek için üye girişi yapmalısınız. Üye girişi için tıklayın.
Üye değilseniz Üyel Ol linkine tıklayarak üyeliğinizi hemen başlatabilirisniz.
 
  • Bu Konuda Son 10
  • Eklenen Son 10
  • Bu Konuda Geçmiş 10
Bu Konuda Yazılmış Yazılmış 10 Makale Yükleniyor
Son Eklenen 10 Makale Yükleniyor
Bu Konuda Yazılmış Geçmiş Makaleler Yükleniyor