Catatan
Akses ke halaman ini memerlukan otorisasi. Anda dapat mencoba masuk atau mengubah direktori.
Akses ke halaman ini memerlukan otorisasi. Anda dapat mencoba mengubah direktori.
oleh Scott Mitchell
Membahas bagaimana URL di halaman master dapat rusak karena file halaman master berada di direktori relatif yang berbeda dari halaman konten. Lihat URL rebasing melalui ~ dalam sintaks deklaratif dan menggunakan ResolveUrl dan ResolveClientUrl secara terprogram. (Lihat juga
Pengantar
Dalam semua contoh yang telah kita lihat sejauh ini, halaman master dan konten telah terletak di folder yang sama (folder akar situs web). Tetapi tidak ada alasan mengapa halaman master dan konten harus berada di folder yang sama. Anda pasti dapat membuat halaman konten di subfolder. Demikian pula, Anda dapat membuat ~/MasterPages/ folder tempat Anda menempatkan halaman master situs Anda.
Salah satu masalah potensial dengan menempatkan halaman master dan konten di folder yang berbeda melibatkan URL yang rusak. Jika halaman master berisi URL relatif dalam hyperlink, gambar, atau elemen lainnya, tautan akan tidak valid untuk halaman konten yang berada di folder lain. Dalam tutorial ini kami memeriksa sumber masalah ini serta solusinya.
Masalah dengan URL Relatif
URL di halaman web dikatakan sebagai URL relatif jika lokasi sumber daya yang dituju relatif terhadap lokasi halaman web dalam struktur folder situs web. URL apa pun yang tidak dimulai dengan garis miring ke depan (/) atau protokol (seperti http://) relatif karena diselesaikan oleh browser berdasarkan lokasi halaman web yang berisi URL.
Misalnya, situs web kami memiliki ~/Images/ folder dengan satu file gambar, PoweredByASPNET.gif. File Site.master halaman master memiliki <img> elemen di footerContent wilayah dengan markup berikut:
<div id="footerContent">
<img src="Images/PoweredByASPNET.gif" alt="Powered by ASP.NET!" />
</div>
Nilai src atribut dalam <img> elemen adalah URL relatif karena tidak dimulai dengan / atau http://. Singkatnya src , nilai atribut memberi tahu browser untuk melihat di Images subfolder untuk file bernama PoweredByASPNET.gif.
Saat mengunjungi halaman konten, markup di atas dikirim langsung ke browser. Luangkan waktu sejenak untuk mengunjungi About.aspx dan melihat sumber HTML yang dikirim ke browser. Anda akan menemukan bahwa markup yang sama persis di halaman master dikirim ke browser.
<div id="footerContent">
<img src="Images/PoweredByASPNET.gif" alt="Powered by ASP.NET!" />
</div>
Jika halaman konten berada di folder akar (apa adanya About.aspx) semuanya berfungsi seperti yang diharapkan karena ada subfolder yang Images relatif terhadap folder akar. Namun, hal-hal diuraikan jika halaman konten berada di folder yang berbeda dari halaman master. Untuk mengilustrasikan ini, buat subfolder bernama Admin. Selanjutnya, tambahkan halaman konten bernama Default.aspx ke Admin folder, pastikan untuk mengikat halaman baru ke Site.master halaman master.
Catatan
Dalam tutorial Menentukan Judul, Tag Meta, dan Header HTML Lainnya dalam tutorial Halaman Master , kami membuat kelas halaman dasar kustom bernama BasePage yang secara otomatis mengatur judul halaman konten (jika tidak ditetapkan secara eksplisit). Jangan lupa untuk memiliki kelas code-behind halaman yang baru dibuat yang berasal dari BasePage sehingga dapat menggunakan fungsionalitas ini.
Setelah Anda membuat halaman konten ini, Penjelajah Solusi Anda akan terlihat mirip dengan Gambar 1.
Gambar 01: Folder Baru dan Halaman ASP.NET Telah Ditambahkan ke Proyek
Selanjutnya, perbarui Web.sitemap file untuk menyertakan entri baru <siteMapNode> untuk pelajaran ini. XML berikut menunjukkan markup lengkap Web.sitemap , yang sekarang menyertakan penambahan elemen ketiga <siteMapNode> .
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="~/Default.aspx" title="Home">
<siteMapNode url="~/About.aspx" title="About the Author" />
<siteMapNode url="~/MultipleContentPlaceHolders.aspx" title="Using Multiple ContentPlaceHolder Controls" />
<siteMapNode url="~/Admin/Default.aspx" title="Rebasing URLs" />
</siteMapNode>
</siteMap>
Halaman yang baru dibuat Default.aspx harus memiliki empat kontrol Konten yang sesuai dengan empat ContentPlaceHolders di Site.master. Tambahkan beberapa teks ke kontrol Konten yang mereferensikan MainContent ContentPlaceHolder lalu kunjungi halaman melalui browser. Seperti yang ditunjukkan Gambar 2, browser tidak dapat menemukan PoweredByASPNET.gif file gambar. Apa yang terjadi di sini?
Halaman ~/Admin/Default.aspx konten dikirim HTML yang sama untuk footerContent wilayah seperti About.aspx halaman:
<div id="footerContent">
<img src="Images/PoweredByASPNET.gif" alt="Powered by ASP.NET!" />
</div>
<img> Karena atribut elemen src adalah URL relatif, browser mencoba mencari folder yang Images relatif terhadap lokasi folder halaman web. Dengan kata lain, browser mencari file Admin/Images/PoweredByASPNET.gifgambar .
Gambar 02: PoweredByASPNET.gif File Gambar Tidak Dapat Ditemukan (Klik untuk melihat gambar ukuran penuh)
Mengganti URL Relatif dengan URL Absolut
Kebalikan dari URL relatif adalah URL absolut, yang dimulai dengan garis miring (/) atau protokol seperti http://. Karena URL absolut menentukan lokasi sumber daya dari titik tetap yang diketahui, URL absolut yang sama valid di halaman web apa pun, terlepas dari lokasi halaman web dalam struktur folder situs web.
Untuk memperbaiki gambar rusak yang ditunjukkan pada Gambar 2, kita perlu memperbarui <img> atribut elemen src sehingga menggunakan URL absolut alih-alih yang relatif. Untuk menentukan URL absolut yang benar, kunjungi salah satu halaman web di situs web Anda dan periksa bilah Alamat. Seperti yang ditunjukkan bilah Alamat pada Gambar 2, jalur yang sepenuhnya memenuhi syarat ke aplikasi web adalah http://localhost:3908/ASPNET_MasterPages_Tutorial_04_CS/. Oleh karena itu, kita dapat memperbarui <img> atribut elemen src ke salah satu dari dua URL absolut berikut:
/ASPNET_MasterPages_Tutorial_04_CS/Images/PoweredByASPNET.gifhttp://localhost:3908/ASPNET_MasterPages_Tutorial_04_CS/Images/PoweredByASPNET.gif
Luangkan waktu sejenak untuk memperbarui <img> atribut elemen src ke URL absolut menggunakan salah satu formulir yang ditunjukkan di atas dan kemudian kunjungi ~/Admin/Default.aspx halaman melalui browser. Kali ini browser akan menemukan dan menampilkan PoweredByASPNET.gif file gambar dengan benar (lihat Gambar 3).
Gambar 03: PoweredByASPNET.gif Gambar Sekarang Ditampilkan (Klik untuk melihat gambar ukuran penuh)
Meskipun pengodean keras di URL absolut berfungsi, itu dengan erat menggabungkan HTML Anda ke server situs web dan lokasi folder, yang dapat berubah. Menggunakan URL absolut formulir http://localhost:3908/... rapuh karena nomor port sebelumnya localhost dipilih secara otomatis setiap kali ASP.NET Development Web Server bawaan Visual Studio dimulai. Demikian pula, bagian http://localhost ini hanya valid saat pengujian secara lokal. Setelah kode disebarkan ke server produksi, basis URL akan berubah menjadi sesuatu yang lain, seperti http://www.yourserver.com. URL absolut dalam bentuk /ASPNET_MasterPages_Tutorial_04_CS/... juga menderita rapuh yang sama karena sering kali jalur aplikasi ini berbeda antara server pengembangan dan produksi.
Kabar baiknya adalah bahwa ASP.NET menawarkan metode untuk menghasilkan URL relatif yang valid saat runtime.
Menggunakan~danResolveClientUrl
Daripada membuat kode keras URL absolut, ASP.NET memungkinkan pengembang halaman untuk menggunakan tilde (~) untuk menunjukkan akar aplikasi web. Misalnya, sebelumnya dalam tutorial ini saya menggunakan notasi ~/Admin/Default.aspx dalam teks untuk merujuk ke Default.aspx halaman di Admin folder .
~ menunjukkan bahwa Admin folder adalah subfolder dari akar aplikasi web.
Metode ControlkelasResolveClientUrl mengambil URL dan memodifikasinya ke URL relatif yang sesuai untuk halaman web tempat kontrol berada. Misalnya, memanggil ResolveClientUrl("~/Images/PoweredByASPNET.gif") dari About.aspx mengembalikan Images/PoweredByASPNET.gif. Namun, memanggilnya dari ~/Admin/Default.aspx, mengembalikan ../Images/PoweredByASPNET.gif.
Catatan
Karena semua kontrol server ASP.NET berasal dari Control kelas , semua kontrol server memiliki akses ke metode .ResolveClientUrl
Page Bahkan kelas berasal dari Control kelas , yang berarti Anda dapat menggunakan metode ini langsung dari kelas kode belakang halaman ASP.NET Anda.
Menggunakan~dalam Markup Deklaratif
Beberapa kontrol web ASP.NET mencakup properti terkait URL: kontrol HyperLink memiliki NavigateUrl properti; kontrol Gambar memiliki ImageUrl properti; dan sebagainya. Saat dirender, kontrol ini meneruskan nilai properti terkait URL mereka ke ResolveClientUrl. Akibatnya, jika properti ini berisi ~ untuk menunjukkan akar aplikasi web, URL akan dimodifikasi ke URL relatif yang valid.
Perlu diingat bahwa hanya kontrol server ASP.NET yang mengubah ~ di properti terkait URL mereka.
~ Jika muncul dalam markup HTML statis, seperti <img src="~/Images/PoweredByASPNET.gif" />, mesin ASP.NET mengirimkan ~ ke browser bersama dengan konten HTML lainnya. Browser mengasumsikan bahwa ~ adalah bagian dari URL. Misalnya, jika browser menerima markup <img src="~/Images/PoweredByASPNET.gif" /> , ia mengasumsikan ada subfolder bernama ~ dengan subfolder Images yang berisi file PoweredByASPNET.gifgambar .
Untuk memperbaiki markup gambar di Site.master, ganti elemen yang ada <img> dengan kontrol Web Gambar ASP.NET. Atur kontrol ID Web Gambar ke PoweredByImage, propertinya ImageUrl ke ~/Images/PoweredByASPNET.gif, dan propertinya AlternateText ke "Didukung oleh ASP.NET!"
<div id="footerContent">
<asp:Image ID="PoweredByImage" runat="server" ImageUrl="~/Images/PoweredByASPNET.gif"
AlternateText="Powered by ASP.NET!" />
</div>
Setelah membuat perubahan ini ke halaman master, kunjungi kembali halaman tersebut ~/Admin/Default.aspx . Kali PoweredByASPNET.gif ini file gambar muncul di halaman (lihat Gambar 3). Ketika kontrol Web Gambar dirender, kontrol web gambar menggunakan ResolveClientUrl metode untuk menyelesaikan nilai propertinya ImageUrl .
ImageUrl Dalam ~/Admin/Default.aspx dikonversi menjadi URL relatif yang sesuai, seperti yang ditunjukkan oleh cuplikan sumber HTML berikut:
<div id="footerContent">
<img id="ctl00_PoweredByImage" src="../Images/PoweredByASPNET.gif" alt="Powered by ASP.NET!" />
</div>
Catatan
Selain digunakan dalam properti kontrol Web berbasis URL, ~ juga dapat digunakan saat memanggil Response.Redirect metode dan Server.MapPath , antara lain. Selain itu ResolveClientUrl , metode ini dapat dipanggil langsung dari ASP.NET atau markup deklaratif halaman master.
Memperbaiki URL Relatif Halaman Master yang Tersisa
Selain <img> elemen dalam footerContent yang baru saja kita perbaiki, halaman master berisi satu URL relatif lagi yang memerlukan perhatian kita. Wilayah ini topContent mencakup tautan "Tutorial Halaman Master," yang menunjuk ke Default.aspx.
<div id="topContent">
<a href="Default.aspx">Master Pages Tutorials</a>
</div>
Karena URL ini relatif, URL ini akan mengirim pengguna ke Default.aspx halaman di folder halaman konten yang mereka kunjungi. Agar tautan ini selalu menunjuk ke Default.aspx dalam folder akar, kita perlu mengganti <a> elemen dengan kontrol Web HyperLink sehingga kita dapat menggunakan ~ notasi.
<a> Hapus markup elemen dan tambahkan kontrol HyperLink di tempatnya. Atur HyperLink ID ke lnkHome, propertinya NavigateUrl ke ~/Default.aspx, dan propertinya Text ke "Tutorial Halaman Master."
<div id="topContent">
<asp:HyperLink ID="lnkHome" runat="server" NavigateUrl="~/Default.aspx"
Text="Master Pages Tutorials" />
</div>
Itu saja! Pada titik ini semua URL di halaman master kami didasarkan dengan benar ketika dirender oleh halaman konten terlepas dari folder apa halaman master dan halaman konten berada.
Resolusi URL Otomatis di<head>Bagian
Dalam tutorial Membuat Tata Letak Site-Wide Menggunakan Halaman Master , kami menambahkan <link> ke Styles.css file di wilayah tersebut <head> :
<head runat="server">
<title>Untitled Page</title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<link href="Styles.css" rel="stylesheet" type="text/css" />
</head>
<link> Meskipun atribut elemen href relatif, atribut tersebut secara otomatis dikonversi ke jalur yang sesuai saat runtime. Seperti yang kita bahas dalam Menentukan Judul, Tag Meta, dan Header HTML Lainnya dalam tutorial Halaman Master , wilayah tersebut <head> sebenarnya adalah kontrol sisi server, yang memungkinkannya untuk memodifikasi konten kontrol dalamnya saat dirender.
Untuk memverifikasi ini, buka ~/Admin/Default.aspx kembali halaman dan lihat sumber HTML yang dikirim ke browser. Seperti yang diilustrasikan oleh cuplikan di bawah ini, <link> atribut elemen href telah secara otomatis dimodifikasi ke URL relatif yang sesuai, ../Styles.css.
<head>
<title>
Default
</title>
<link href="../Styles.css" rel="stylesheet" type="text/css" />
</head>
Ringkasan
Halaman master sangat sering menyertakan tautan, gambar, dan sumber daya eksternal lainnya yang harus ditentukan melalui URL. Karena halaman master dan halaman konten mungkin tidak ada di folder yang sama, penting untuk tidak menggunakan URL relatif. Meskipun dimungkinkan untuk menggunakan URL absolut yang dikodekan secara permanen, melakukannya dengan erat menggabungkan URL absolut ke aplikasi web. Jika URL absolut berubah - seperti yang sering terjadi saat memindahkan atau menyebarkan aplikasi web - Anda harus ingat untuk kembali dan memperbarui URL absolut.
Pendekatan yang ideal adalah menggunakan tilde (~) untuk menunjukkan akar aplikasi. ASP.NET Kontrol web yang berisi properti terkait URL memetakan ~ ke akar aplikasi saat runtime. Secara internal, kontrol Web menggunakan Control metode kelas ResolveClientUrl untuk menghasilkan URL relatif yang valid. Metode ini bersifat publik dan tersedia dari setiap kontrol server (termasuk Page kelas ), sehingga Anda dapat menggunakannya secara terprogram dari kelas code-behind Anda, jika diperlukan.
Selamat Pemrograman!
Bacaan lebih lanjut
Untuk informasi selengkapnya tentang topik yang dibahas dalam tutorial ini, lihat sumber daya berikut:
Tentang Penulis
Scott Mitchell, penulis beberapa buku ASP/ASP.NET dan pendiri 4GuysFromRolla.com, telah bekerja dengan teknologi Microsoft Web sejak 1998. Scott bekerja sebagai konsultan independen, pelatih, dan penulis. Buku terbarunya adalah Sams Teach Yourself ASP.NET 3.5 dalam 24 Jam. Scott dapat dijangkau di mitchell@4GuysFromRolla.com atau melalui blognya di http://ScottOnWriting.NET.
Terima Kasih Khusus Kepada
Tertarik untuk meninjau artikel MSDN saya yang akan datang? Jika demikian, jatuhkan saya baris di mitchell@4GuysFromRolla.com.