WEB KULLANICI KONTROLLERİ ve ANASAYFA KULLANMA(Master Page)

... konulu sunumlar: "WEB KULLANICI KONTROLLERİ ve ANASAYFA KULLANMA(Master Page)"— Sunum transkripti:

1 WEB KULLANICI KONTROLLERİ ve ANASAYFA KULLANMA(Master Page)

2 WEB KULLANICI KONTROLLERİ
Kullanıcı kontrolleri bir içeriğin birden fazla sayfada kullanılmasına olanak sağlar. Bir web sayfasına eklenerek içerik sağlar ve içeriğin yönetiminin tek bir yerden yapılmasını sağlar. Web kullanıcı kontrolleri sunucu taraflı çalışan bir form içermezler. Bu nedenle çalışmak için mutlaka sunucu taraflı çalışan bir web formun içine eklenmelidir. Web kullanıcı kontrollerinin dosya uzantısı ascx’dir. Web kullanıcı kontrolleri normal ASP.NET sayfaları gibi programlanabilir ve kodları farklı bir dosyada tutulabilir. Kod sayfasının uzantısı da ASP.NET sayfalarına benzer şekilde .ascx.cs’dir.

3 Web kullanıcı kontrolü kodları, klasik ASP
Web kullanıcı kontrolü kodları, klasik ASP.NET sayfalarının kodlarına benzerlik göstermektedir. .aspx direktifi ile başlarken .ascx direktifi ile başlamakta ve kontrol ayarlarının bir kısmı bu alanda gerçekleştirilebilmektedir.

4 Yukarıdaki kod incelenecek olursa:  Arka planda kullanılacak olan programlama dili Language özelliği ile belirlenmektedir.  PageLoad gibi olayların otomatik olarak tetiklenmesini sağlamak amacı ile AutoEvenWireup özelliği true olarak atanmıştır.  Arka plandaki kodları tutacak olan dosya CodeFile özelliği ile belirlenmektedir  UserControl’ün sınıf adı Inherits özeliğiyle belirtilmektedir.

5 Web Kullanıcı Kontrolleri Oluşturma
Bir web sitesine yeni bir kullanıcı kontrolü eklemek için:  Web Site > Add New Item komutunu seçin ya da Solution Explorer panelinde proje adını sağ tıklayın ve Add açılır menüsünü kullanın.  Ekrana gelen Add New Item – Form Site iletişim penceresinden Web User Control komutunu seçin.

6  Name alanına web kullanıcı kontrolüne uygun bir isim verilebilir
 Name alanına web kullanıcı kontrolüne uygun bir isim verilebilir. Değiştirilmezse programlama yazılımı sıralı olarak isim atayacaktır.  Web kullanıcı kontrolü programlama yazılımı tarafından otomatik olarak proje dosyalarına eklenecek ve ekrana getirilecektir.

7 Web Kullanıcı Kontrolleri Ekleme
Web kullanıcı kontrolleri hazırlandıktan sonra uygulama çalıştırılacak olursa ekrana kullanıcı kontrolü yerine uygulama açılış sayfası gelir. Çünkü web kullanıcı kontrolleri tek başlarına çalışmazlar, mutlaka bir sunucu taraflı çalışan form içine eklenmelidirler. Programlama yazılımı hazırlanan web kullanıcı kontrollerinin doğrudan Solution Explorer panelinden sayfaya sürüklenerek eklenmesine izin verir. Web kullanıcı kontrolü sürüklendikten sonra sayfada doğrudan görüntülenecektir. Web kullanıcı kontrolü sayfaya sürüklenerek eklendikten sonra, sayfa kodlarına @Page direktifinden hemen direktifi eklenir. Bu direktif ile sayfa içerisinde kullanılan kullanıcı kontrolünün konumu ve sayfa içerisindeki etiket adı tanımlamaları yapılır.

8 Eklenen web kullanıcı kontrolünün kodları, HTML ve sunucu kontrolleri kodları sayfasına eklenir.
Tasarım görünümünde ise, web kullanıcı kontrolünün tasarlanan görünümü eklenir.

9 Kullanıcı tarafından gerçekleştirilen sürükleyerek web kullanıcı kontrolünü ekleme işleminden sonra gerçekleşen işlemler programlama yazılımı tarafından otomatik olarak yapılır. Kullanıcı kontrolünde değişiklik yapıldığı zaman, web kullanıcı kontrolünün eklendiği sayfalar yine programlama yazılımı tarafından otomatik olarak güncellenir.

10 Web Kullanıcı Kontrolleri Tasarlama
Web kullanıcı kontrollerinin tasarım sayfası, klasik ASP.NET sayfalarına benzerlik göstermektedir. Bu nedenle web kullanıcı kontrolleri tasarlamanın klasik ASP.NET sayfalarını tasarlamaktan bir farkı yoktur. Örnek: Bir Login panelini WebUserControl ile tasarlayın.  Projeye yeni bir WebUserControl ekleyin.  WebUserControl tasarım alanına aşağıdaki kontrolleri ekleyin.

11  Buton Click olayına aşağıdaki kodları ekleyin
 Buton Click olayına aşağıdaki kodları ekleyin. Kullanıcı adı = “İrfan”, şifre=“Sarica” olarak belirlenmiştir. if (TextBox1.Text == ‘’İrfan" && TextBox2.Text == ‘’Sarica") { Label3.Text = "Giriş Başarılı"; } else { Label3.Text = "Kullanıcı Adı ya da Şifre yanlış!"; }  Yeni bir web form ekleyin.  Web forma oluşturduğunuz Web kullanıcı kontrolünü ekleyin

12 ANASAYFA KULLANMA (Master Page)
Bir web sitesi birden fazla sayfadan oluşur. Bu sayfalarda içerik değişirken her sayfada tekrarlanan ögeler ve özellikler vardır. Web sitesi hazırlanırken bir şablon oluşturarak şablon üzerinde içerik değişikliği ile sayfalar kolaylıkla hazırlanabilir. Ancak sayfa sayısı arttıkça web sitesinde güncelleme yapma bütün sayfaların tek tek elden geçirilerek değiştirilmesi anlamına gelmektedir. Bu durum zaman konusunda tasarımcılara çeşitli sıkıntılara sebep olacaktır. CSS (Cascading Style Sheets) sayfaları kullanılarak web sitesinin sayfalarının özelliklerine doğrudan müdahale edilebilir. Bu şekilde sitenin tüm sayfalarının stil özellikleri tek bir yerden kontrol edilerek kolaylıkla güncelleme yapılabilir (CSS konusuna ilerleyen konularda yer verilecektir). Ancak tüm sayfalarda yer alan menü, resim, logo vb. içerik değişikliğinde bu yöntem işe yaramayacaktır. Daha önceki konularda bahsedilen Web Kullanıcı Kontrolleri ile ASP.NET’te kullanılarak bu duruma çözüm getirilmiştir. ASP.NET’in yeni sürümleri ile birlikte web kullanıcı kontrollerinin yanında Anasayfa (MasterPage) özelliği eklenerek tasarımcılara büyük kolaylıklar sağlanmıştır.

13 MasterPage kullanımı ile birlikte sitenin tasarımı oluşturulmaktadır
MasterPage kullanımı ile birlikte sitenin tasarımı oluşturulmaktadır. MasterPage üzerinde sabit kalması ve değişmesi istenen alanlar belirlenir. MasterPage kullanılarak siteye yeni eklenen bir sayfa tasarım uygulanır. MasterPage üzerinde yapılan bir değişiklik programlama yazılımı ile MasterPage kullanılan tüm sayfalarda otomatik olarak güncellenmektedir.

14 Anasayfa Oluşturma MasterPage sayfaları standart ASP.NET sayfaları ile benzerlik göstermektedir. Dosya uzantısı .master’dır. ASP.NET direktifi ile başlarken MasterPage direktifi ile başlamaktadır. Temel bu iki fark haricinde tasarımı standart ASP.NET sayfaları ile aynıdır. Web sitesine bir MasterPage eklemek için;  Add New Item – FormSite iletişim penceresinden MasterPage komutunu seçin.

15 MasterPage sayfasında tüm sayfalarda görüntülenmesi istenen alanlar belirlenebilir. Sayfalara özgü alanlar ise ContentPlaceHolder kontrolü ile belirlenir. ContentPlaceHolder kontrolü, MasterPage sayfalarından türeyen sayfalarda içeriği değişen alanları ifade eder. Programlama yazılımı yeni eklenen MasterPage sayfasına iki tane ContentPlaceHolder kontrolü ekler. Birincisi sayfa tanımlamaların yapılması için Head etiketi içinde, ikincisi ise içeriğin eklenmesi için Body etiketi içindedir. <head runat="server"> <title></title> <asp:ContentPlaceHolder id="head" runat="server"> </asp:ContentPlaceHolder> </head> <body> <form id="form1" runat="server"> <div> <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </div> </form> </body>

16 Anasayfadan Web Sayfası Türetme
Bir web projesinde birden fazla MasterPage kullanılabilir. Programlama yazılımı web sitesine yeni bir web form eklerken MasterPage sayfalarından birinin seçilerek sayfanın türetilmesine olanak sağlar. MasterPage sayfasından sayfa türetmek için;  Add New Item – FormSite iletişim penceresinden Web Form komutunu seçin.

17  Web form komutu seçildikten sonra Add New Item – FormSite iletişim penceresi sol alt bölümünde Select Master Page seçeneği aktif hale gelecektir. Bu alanı işaretleyin.

18  Add butonuna tıklayın
 Add butonuna tıklayın. Ekrana gelen Select a Master Page iletişim penceresinden uygun MasterPage sayfasını seçin ve onaylayın.

19 MasterPage sayfasından sayfa türetmenin diğer bir yolu ise, MasterPage sayfası üzerinde sağ tıklayıp Add Content Page komutunun seçilmesidir. Bu durumda programlama yazılımı otomatik olarak seçilen MasterPage sayfasından türemiş yeni bir sayfa web sitesine ekleyecektir. MasterPage sayfasından türemiş olan sayfanın kodları aşağıdaki gibi olacaktır. Kodlar incelenecek direktifi ile başlayan satırda hangi MasterPage sayfasından türetildiği belirtilmektedir. Ayrıca MasterPage sayfasında Form etiketi kullanıldığı için türeyen sayfa kodlarında Form etiketi yer almaz. Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %> <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"></asp:Content> MasterPage sayfaları tarayıcıda tek başlarına görüntülenmez. MasterPage görüntülenmek istenmesi durumunda MasterPage sayfasından türeyen bir sayfa ile görüntülenmelidir.