Jquery ile HTML MasterPage Oluşturmak

Web sitelerinde menüler, reklamlar vb alanların her sayfada bulundukları dikkatinizi çekmiştir. Peki her sayfa için bu alanlar tekrar tekrar Html olarak oluşturuluyor mu? Tabi ki hayır. Bu alanlar masterpage olarak adlandırılan ve her sayfa sabit bulunacak alanları içinde tutan bir sayfadan geliyor. Sayfada değişecek alanlar ise sayfanın kendi içerisinde oluşturuluyor ve daha sonra masterpage'in içine entegre oluyor. Peki masterpage kullanmazsak ne olur?

Otuz sayfalık bir projeniz olduğunu düşünün. Masterpage kullanmıyorsunuz ve her sayfanızda 5 tane menümüz, altında sabit footerımız ve arkada bir arkaplan resmi olduğunu varsayalım. Bu durumda menülerden birinde değişiklik yaptığınızda otuz sayfada da teker teker bu işlemi uygulamanız gerekecek. Bu hem maliyet açısından hemde hata yapma oranı açısından büyük bir dezavantaj. Biz bu sorunu jquery ile çözeceğiz.

İlk olarak masterpage'imizi oluşturalım.

Sayfamızda sabit alanlarımız bulunmakta. Bununda dışında container id'li bir div bulunuyor. Bu div bizim diğer sayfalarımızdaki alanları içine alacak. Şimdi bir de bir sayfa yapalım ve masterpage'imize bağlayalım.

İşte asıl noktaya geldik. Burada Jquery metodumuz devreye giriyor. MainContent id'li alanımıza jquery load metoduyla masterpage'imizi entegre ediyoruz. Daha sonra masterpage'imizde bulunan container alanına artık sayfamızda bulunan html'i append ederek işlemi sonlandırıyoruz.

Son görünüm ise şu şekilde.

MasterPage:

Page1: