Kenali ASP.NET Masterpage

Dari segi bahasa, konsisten merupakan satu gaya atau cara kerja yang tidak berubah; mengikut atau selaras dengan kerja sebelumnya, mempunyai ciri-ciri yang sama. Dalam pembangunan web, konsisten bermakna wujudnya satu rekaletak yang dikhaskan untuk menguruskan elemem-elemen laman web tersebut dan diselaraskan di keseluruhan laman web. Kalau dalam PHP contohnya menggunakan rangka kerja Cake, anda boleh mengubahsuai pada fail paparan CTP, manakala untuk ASP.NET salah satu caranya, dikenali sebagai Master Page.

Apakah itu Master Page?

Dalam projek ini, yang akan terlibat ialah fail Master Page yang digunakan oleh Content Page. Anda boleh mengandaikan yang Master Page ini seperti pakaian manakala Content Page seperti badan.

Sama juga dengan halaman tadi, setiap kali anda memanggil Content Page, pelayan akan memulangkan Content Page bersama-sama dengan Master Page. Mungkin boleh dijelaskan mengikut rumus matematik dibawah:

Master Page (Site.Master) + Kandungan (Default.aspx) = Paparan

Cipta Master Page

Seperti artikel sebelum ini, saya menggunakan Visual Studio 2012 sebagai IDE utama. Tapi jangan risau sebab benda ni dah wujud sejak guna VWD 2005 lagi. Teruskan dengan mencipta satu projek laman web baru.

Sekarang, pada bahagian Solution Explorer, klik Add New Item dan pilih Maste Page dari senarai. Disini anda akan mencipta “baju” untuk Content Page nanti. Anda juga boleh bermain-main dengan CSS atau Tema untuk mencantikkan lagi rekabentuk laman web anda.

Selain itu, jika anda perasan, akan kelihatan macam satu kod yang dipanggil ContentPlaceHolder. Apa benda tu? ContentPlaceHolder ialah ruang yang disediakan pada Master Page untuk kandungan di Content Page muncul. Kalau Master Page ni baju, Placeholder tadi ialah seperti kolar atau lengan tempat leher dan tangan anda keluar.

Cipta Content Page

Dah berpuas hati? Sekarang kita akan teruskan dengan mencipta “badan” atau Content Page. Pada bahagian Solution Explorer, klik Add New Item dan pilih Content Page atau Web Form. Simpan mengikut nama yang sesuai.

Sekiranya anda memilih Content Page, satu tetingkap baru akan muncul dan anda perlu memilih Master Page yang anda cipta sebelum ini. Tapi jika anda memilih Web Form, anda perlu menetapkan Master Page secara manual di Web Form Properties.

Kod dibawah akan dipaparkan yang anda anda boleh menetapkan kandungan dalam ContentPlaceHolder tersebut. Jika anda perasan, dalam Content Page anda akan wujudnya satu ruangan yang anda boleh sunting manakala ruangan selebihnya dihalang. Ini bermakna, ruangan yang boleh disunting tadi ialah Placeholder didalam Master Page.

Dalam Content Page, anda boleh lihat ContentPlaceHolderID merujuk kepada ID ContentPlaceHolder yang wujud dalam Master Page, ini supaya kedudukan kandungan dalam Content Page dapat keluar pada kedudukan yang betul dalam Master Page. Secara analoginya, “leher” perlu keluar pada ruangan “kolar baju”, dan bukan pada “lengan”, jadi, ID tadi digunakan supaya kedudukan tersebut dapat dikeluarkan dengan tepat.

Jika anda memilih untuk melihat dalam mod design, anda akan melihat ruangan didalam ContentPlaceHolder sahaja akan dibenarkan untuk tujuan penyuntingan. Tujuan anda dihalang dari mengubah ruangan diluar Placeholder ialah bagi mengelakkan anda menggangu rekabentuk yang konsisten sekiranya terdapat lebih daripada satu Content Page yang berkongsi Master Page. Sekiranya anda telah berpuas hati, tekan kekunci F5 untuk melakukam ujilari dalam pelayar web.

Master-F5

Paparan di pelayar web adalah hubungkait diantara Master Page dan Content Page, seperti yang ditulis dalam rumus matematik tadi. Jadi, sekiranya anda telah berjaya memaparkan halaman di pelayar web, ini bermakna anda telah berjaya mengikuti langkah yang dijelaskan dalam artikel ini.


Komen telah ditutup