Beranda>Tutorial Pemrograman Jaringan>Tutorial ASP.NET

Penjelasan rinci tentang halaman master di ASP.NET 2.0

Penulis：Eve Cole Waktu Pembaruan：2009-06-30 16:37:05
Untuk mengurangi masalah perubahan seluruh situs saat mengubah satu halaman selama desain web, konsep master ditambahkan setelah vs2003 ditingkatkan ke vs2005.

Anda dapat menganggapnya sebagai "template halaman web". Perbedaannya adalah Anda tidak perlu lagi memperbarui setiap halaman. Setelah Anda memodifikasinya, semua halaman web akan diubah untuk selamanya.

Mari kita mulai dengan demonstrasi penggunaan master sederhana:

1. Pertama buka visual studio 2005, buat website asp.net baru, sistem file, C#.

2. Di Solution Explorer, klik kanan untuk membuat item baru:



3. Pilih halaman master:



4. Buka MasterPage.master, di dalamnya terdapat kontrol contentplaceholder, hati-hati jangan sampai menulis apa pun di kontrol tersebut.

Kami pergi ke tampilan desain dan menambahkan teks header dan footer di luar kontrol ini.



5. Setelah disimpan, kita bisa menggunakannya untuk membuat halaman lain. Ada dua metode. 1. Klik kanan di mana saja pada halaman master dan klik Tambahkan Halaman Konten; 2. Buat item baru di Solution Explorer dan centang "Pilih Halaman Master" saat membuat halaman aspx.



6. Pilih halaman master yang sesuai



7. Hanya ada beberapa kalimat berikut dalam kode sumber halaman yang baru dibuat:


  1. ＜%@PageLanguage="C#"MasterPageFile="~/MasterPage.master"AutoEventWireup="true"
    CodeFile="Default2.aspx.cs"Inherits="Default2"Title="UntitledPage"%＞
  2. ＜asp:ContentID="Content1"ContentPlaceHolderID="ContentPlaceHolder1"Runat="Server"＞
  3. ＜/asp:Content＞

Kita dapat melihat kontrol konten, yang sesuai dengan kontrol ContentPlaceHolder1 pada halaman master dan dikonversi ke halaman tampilan:



8. Teks di header dan footer berwarna abu-abu, dan kita hanya bisa mengeditnya di konten.

Setelah menyimpan, kunjungi halaman default2.aspx, F5., kita melihat halaman:


9. Seperti yang diharapkan, mari kita lihat kode sumbernya:


  1. ＜!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
  2. ＜htmlxmlns="http://www .w3.org/1999/xhtml"＞
  3. ＜head＞＜title＞
  4. UntitledPage
  5. ＜/title＞＜/head＞
  6. ＜body＞
  7. ＜formname="aspnetForm"method="post"action="Default2.aspx"id="aspnetForm "＞
  8. ＜div＞
  9. ＜inputtype="hidden"name="__VIEWSTATE"id="__VIEWSTATE"
    value="/wEPDwULLTEwMDUyNjYzMjhkZASHJAhe9XmxUHPbOeONMX2y6XYi"/＞
  10. ＜/div＞
  11. ＜div＞
  12. thisisthepage'sheader＜br/＞
  13. thispage'scontent: hello,world!＜br/＞
  14. thisisthepage'sfooter ＜/div＞
  15. ＜/bentuk＞
  16. ＜/tubuh＞
  17. ＜/html＞

Konten master ditempatkan di div, tetapi halaman konten tidak ditempatkan di div terpisah, yang berarti tidak ada kode berlebihan yang akan ditambahkan ke subhalaman di master. Hal ini memberi kita fleksibilitas besar dalam pemrograman dan tata letak halaman web. Kita dapat memanfaatkan sepenuhnya pemosisian CSS+DIV, dan kita juga dapat menggunakan pemosisian tabel. Tidak perlu mengubah setiap halaman saat memodifikasi.

10. Untuk master yang bukan merupakan bagian dari konten tetap, kita dapat menggunakan beberapa ContentPlaceHolder1 untuk tata letak.



11. Akan ada dua konten di subhalaman terkait:



Kode yang dihasilkan:


  1. ＜!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
  2. ＜htmlxmlns="http://www .w3.org/1999/xhtml"＞
  3. ＜head＞＜title＞
  4. UntitledPage
  5. ＜/title＞＜/head＞
  6. ＜body＞
  7. ＜formname="aspnetForm"method="post"action="Default3.aspx"id="aspnetForm "＞
  8. ＜div＞
  9. ＜inputtype="hidden"name="__VIEWSTATE"id="__VIEWSTATE"
    value="/wEPDwUKMTY1NDU2MTA1MmRkPjWLPyqA5JXcW5ivHc0NiYajQTU="/＞
  10. ＜/div＞
  11. ＜div＞
  12. ini adalah header halaman＜br/＞
  13. ＜table＞
  14. ＜tr＞
  15. ＜td＞
  16. ohmyContent1
  17. ＜/td＞
  18. ＜td＞
  19. himyContent2
  20. ＜/td＞
  21. ＜/tr＞
  22. ＜ /tabel＞
  23. ini adalah footer halaman 
  24. ＜/div＞
  25. ＜/form＞
  26. ＜/body＞
  27. ＜/html＞

12. Gunakan secara fleksibel. Meskipun CSS juga dapat menggunakan DIV untuk mengatasi masalah ini, tampilan beberapa kontrol non-standar sulit dikontrol dengan CSS. Jika Anda membuat kumpulan master lain, MasterPage2.master, Anda dapat melakukan pengaturan dinamis Medium:

dilindungi kekosongan Page_PreInit(pengirim objek, EventArgs e)
{
MasterPageFile = "~/MasterPage2.master";
}

Ayo ke sini dulu, katanya aplikasi nested juga bisa digunakan, tapi untuk saat ini cukup digunakan bersamaan dengan temanya saja.
Artikel Terkait