Bagikan melalui

Halaman Master dan ASP.NET AJAX (C#)

oleh Scott Mitchell

Membahas opsi untuk menggunakan ASP.NET AJAX dan halaman master. Melihat menggunakan kelas ScriptManagerProxy; membahas bagaimana berbagai file JS dimuat tergantung pada apakah ScriptManager digunakan di halaman Master atau halaman Konten.

Pengantar

Selama beberapa tahun terakhir, semakin banyak pengembang telah membangun aplikasi web yang mendukung AJAX. Situs web berkemampuan AJAX menggunakan sejumlah teknologi web terkait untuk menawarkan pengalaman pengguna yang lebih responsif. Membuat aplikasi ASP.NET berkemampuan AJAX sangat mudah berkat kerangka kerja Microsoft ASP.NET AJAX. ASP.NET AJAX dibangun ke dalam ASP.NET 3.5 dan Visual Studio 2008; ini juga tersedia sebagai unduhan terpisah untuk aplikasi ASP.NET 2.0.

Saat membangun halaman web berkemampuan AJAX dengan kerangka kerja AJAX ASP.NET, Anda harus menambahkan tepat satu kontrol ScriptManager ke setiap halaman yang menggunakan kerangka kerja. Seperti namanya, ScriptManager mengelola skrip sisi klien yang digunakan di halaman web berkemampuan AJAX. Minimal, ScriptManager memancarkan HTML yang menginstruksikan browser untuk mengunduh file JavaScript yang membentuk pustaka klien ASP.NET AJAX. Ini juga dapat digunakan untuk mendaftarkan file JavaScript kustom, layanan web yang mendukung skrip, dan fungsionalitas layanan aplikasi kustom.

Jika situs Anda menggunakan halaman master (sebagaimana mestinya), Anda tidak perlu menambahkan kontrol ScriptManager ke setiap halaman konten; sebaliknya, Anda dapat menambahkan kontrol ScriptManager ke halaman master. Tutorial ini menunjukkan cara menambahkan kontrol ScriptManager ke halaman master. Ini juga melihat cara menggunakan kontrol ScriptManagerProxy untuk mendaftarkan skrip kustom dan layanan skrip di halaman konten tertentu.

Catatan

Tutorial ini tidak mengeksplorasi merancang atau membangun aplikasi web berkemampuan AJAX dengan kerangka kerja AJAX ASP.NET. Untuk informasi selengkapnya tentang menggunakan AJAX, lihat video dan tutorialAJAX ASP.NET, serta sumber daya yang tercantum di bagian Bacaan Lebih Lanjut di akhir tutorial ini.

Memeriksa Markup yang Dikeluarkan oleh Kontrol ScriptManager

Kontrol ScriptManager memancarkan markup yang menginstruksikan browser untuk mengunduh file JavaScript yang membentuk ASP.NET Pustaka Klien AJAX. Ini juga menambahkan sedikit JavaScript sebaris ke halaman yang menginisialisasi pustaka ini. Markup berikut menunjukkan konten yang ditambahkan ke output halaman yang dirender yang menyertakan kontrol ScriptManager:

<script src="/ASPNET_MasterPages_Tutorial_08_CS/WebResource.axd?d=T8EVk6SsA8mgPKu7_sBX5w2 t=633363040378379010" type="text/javascript"></script>

<script src="/ASPNET_MasterPages_Tutorial_08_CS/ScriptResource.axd?d=SCE1TCh8B24VkQIU5a8iJFizuPBIqs6Lka7GEkxo-6ROKNw5LVPCpF_pmLFR-R-p_Uf42Ahmr_SKd8lwgZUWb2uPJmfX0X_H6oLA50bniyQ1 t=633465688673751480" type="text/javascript"></script>

<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>

<script src="/ASPNET_MasterPages_Tutorial_08_CS/ScriptResource.axd?d=SCE1TCh8B24VkQIU5a8iJFizuPBIqs6Lka7GEkxo-6ROKNw5LVPCpF_pmLFR-R-phT96yZPngppiP_VXlN4Vz2RuVtvwDiQzF9xt42dUCiYjL0UylAJoyYzStwvObx0U0 t=633465688673751480" type="text/javascript"></script>

<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ScriptManager1', document.getElementById('form1'));
Sys.WebForms.PageRequestManager.getInstance()._updateControls([], [], [], 90);
//]]>
</script>

<script type="text/javascript">
//<![CDATA[
Sys.Application.initialize();
//]]>
</script>

Tag <script src="url"></script> menginstruksikan browser untuk mengunduh dan menjalankan file JavaScript di url. ScriptManager memancarkan tiga tag tersebut; satu mereferensikan file WebResource.axd, sementara dua lainnya mereferensikan file ScriptResource.axd. File-file ini sebenarnya tidak ada sebagai file di situs web Anda. Sebaliknya, ketika permintaan untuk salah satu file ini tiba di server web, mesin ASP.NET memeriksa querystring dan mengembalikan konten JavaScript yang sesuai. Skrip yang disediakan oleh ketiga file JavaScript eksternal ini merupakan ASP.NET Pustaka Klien kerangka kerja AJAX. Tag lain <script> yang dipancarkan oleh ScriptManager menyertakan skrip sebaris yang menginisialisasi pustaka ini.

Referensi skrip eksternal dan skrip sebaris yang dipancarkan oleh ScriptManager sangat penting untuk halaman yang menggunakan kerangka kerja AJAX ASP.NET, tetapi tidak diperlukan untuk halaman yang tidak menggunakan kerangka kerja. Oleh karena itu, Anda mungkin beralasan bahwa sangat ideal untuk hanya menambahkan ScriptManager ke halaman yang menggunakan kerangka kerja AJAX ASP.NET. Dan ini cukup, tetapi jika Anda memiliki banyak halaman yang menggunakan kerangka kerja, Anda akhirnya akan menambahkan kontrol ScriptManager ke semua halaman - tugas berulang, untuk sedikitnya. Atau, Anda dapat menambahkan ScriptManager ke halaman master, yang kemudian menyuntikkan skrip yang diperlukan ini ke semua halaman konten. Dengan pendekatan ini, Anda tidak perlu ingat untuk menambahkan ScriptManager ke halaman baru yang menggunakan kerangka kerja AJAX ASP.NET karena sudah disertakan oleh halaman master. Langkah 1 berjalan melalui penambahan ScriptManager ke halaman master.

Catatan

Jika Anda berencana untuk menyertakan fungsionalitas AJAX dalam antarmuka pengguna halaman master Anda, maka Anda tidak memiliki pilihan dalam masalah ini - Anda harus menyertakan ScriptManager di halaman master.

Salah satu kelemahan dari menambahkan ScriptManager ke halaman master adalah bahwa skrip di atas dipancarkan di setiap halaman, terlepas dari apakah diperlukan. Ini jelas mengarah pada bandwidth yang terbuang untuk halaman-halaman yang menyertakan ScriptManager (melalui halaman master) belum menggunakan fitur apa pun dari kerangka kerja AJAX ASP.NET. Tapi berapa banyak bandwidth yang terbuang sia-sia?

  • Konten aktual yang dipancarkan oleh ScriptManager (ditunjukkan di atas) total sedikit lebih dari 1KB.
  • Tiga file skrip eksternal yang direferensikan oleh <script> elemen , namun, terdiri dari sekitar 450KB data yang tidak dikompresi; di situs web yang menggunakan kompresi gzip, total bandwidth ini dapat dikurangi mendekati 100KB. Namun, file skrip ini di-cache oleh browser selama satu tahun, yang berarti bahwa mereka hanya perlu diunduh sekali dan kemudian dapat digunakan kembali di halaman lain di situs.

Dalam kasus terbaik, maka, ketika file skrip di-cache, total biayanya adalah 1KB, yang dapat diabaikan. Namun, dalam kasus terburuk - yaitu ketika file skrip belum diunduh dan server web tidak menggunakan bentuk kompresi apa pun - hit bandwidth sekitar 450KB, yang dapat ditambahkan dari satu atau dua detik melalui koneksi broadband hingga satu menit bagi pengguna melalui modem dial-up. Kabar baiknya adalah bahwa karena file skrip eksternal di-cache oleh browser, skenario kasus terburuk ini jarang terjadi.

Catatan

Jika Anda masih merasa tidak nyaman menempatkan kontrol ScriptManager di halaman master, pertimbangkan Formulir Web ( <form runat="server"> markup di halaman master). Setiap halaman ASP.NET yang menggunakan model postback harus menyertakan satu Formulir Web dengan tepat. Menambahkan Formulir Web menambahkan konten tambahan: sejumlah bidang formulir tersembunyi, tag itu <form> sendiri, dan, jika perlu, fungsi JavaScript untuk memulai postback dari skrip. Markup ini tidak perlu untuk halaman yang tidak memposting kembali. Markup asing ini dapat dihilangkan dengan menghapus Formulir Web dari halaman master dan menambahkannya secara manual ke setiap halaman konten yang membutuhkannya. Namun, manfaat memiliki Formulir Web di halaman master lebih besar daripada kerugian karena menambahkannya tidak perlu ke halaman konten tertentu.

Langkah 1: Menambahkan Kontrol ScriptManager ke Halaman Master

Setiap halaman web yang menggunakan kerangka kerja AJAX ASP.NET harus berisi satu kontrol ScriptManager dengan tepat. Karena persyaratan ini, biasanya masuk akal untuk menempatkan satu kontrol ScriptManager pada halaman master sehingga semua halaman konten memiliki kontrol ScriptManager yang disertakan secara otomatis. Selain itu, ScriptManager harus datang sebelum salah satu kontrol server AJAX ASP.NET, seperti kontrol UpdatePanel dan UpdateProgress. Oleh karena itu, yang terbaik adalah menempatkan ScriptManager sebelum kontrol ContentPlaceHolder dalam Formulir Web.

Site.master Buka halaman master dan tambahkan kontrol ScriptManager ke halaman dalam Formulir Web, tetapi sebelum <div id="topContent"> elemen (lihat Gambar 1). Jika Anda menggunakan Visual Web Developer 2008 atau Visual Studio 2008, kontrol ScriptManager terletak di Kotak Alat di tab Ekstensi AJAX. Jika Anda menggunakan Visual Studio 2005, Anda harus terlebih dahulu menginstal kerangka kerja AJAX ASP.NET dan menambahkan kontrol ke Kotak Alat. Kunjungi ASP.NET AJAX Wiki untuk mendapatkan kerangka kerja untuk ASP.NET 2.0.

Setelah menambahkan ScriptManager ke halaman, ubah ID dari ScriptManager1 ke MyManager.

Menambahkan ScriptManager ke Halaman Master

Gambar 01: Tambahkan ScriptManager ke Halaman Master (Klik untuk melihat gambar ukuran penuh)

Langkah 2: Menggunakan kerangka kerja AJAX ASP.NET dari Halaman Konten

Dengan kontrol ScriptManager ditambahkan ke halaman master, kita sekarang dapat menambahkan fungsionalitas kerangka kerja AJAX ASP.NET ke halaman konten apa pun. Mari kita buat halaman ASP.NET baru yang menampilkan produk yang dipilih secara acak dari database Northwind. Kita akan menggunakan kontrol Timer kerangka kerja AJAX ASP.NET untuk memperbarui tampilan ini setiap 15 detik, menampilkan produk baru.

Mulailah dengan membuat halaman baru di direktori akar bernama ShowRandomProduct.aspx. Jangan lupa untuk mengikat halaman baru ini ke Site.master halaman master.

Tambahkan Halaman ASP.NET Baru ke Situs Web

Gambar 02: Tambahkan Halaman ASP.NET Baru ke Situs Web (Klik untuk melihat gambar ukuran penuh)

Ingat bahwa dalam Menentukan Judul, Tag Meta, dan Header HTML Lainnya dalam tutorial Halaman Master , kami membuat kelas halaman dasar kustom bernama BasePage yang menghasilkan judul halaman jika tidak diatur secara eksplisit. ShowRandomProduct.aspx Buka kelas code-behind halaman dan dapatkan dari BasePage (bukan dari System.Web.UI.Page).

Terakhir, perbarui Web.sitemap file untuk menyertakan entri untuk pelajaran ini. Tambahkan markup berikut di bawah <siteMapNode> untuk pelajaran Interaksi Master ke Halaman Konten:

<siteMapNode url="~/ShowRandomProduct.aspx" title="Master Pages and ASP.NET AJAX" />

Penambahan elemen ini <siteMapNode> tercermin dalam daftar Pelajaran (lihat Gambar 5).

Menampilkan Produk yang Dipilih Secara Acak

Kembali ke ShowRandomProduct.aspx. Dari Designer, seret kontrol UpdatePanel dari Kotak Alat ke kontrol MainContent Konten dan atur propertinya ID ke ProductPanel. UpdatePanel mewakili wilayah di layar yang dapat diperbarui secara asinkron melalui postback halaman parsial.

Tugas pertama kami adalah menampilkan informasi tentang produk yang dipilih secara acak dalam UpdatePanel. Mulailah dengan menyeret kontrol DetailsView ke UpdatePanel. Atur properti kontrol ID DetailsView ke ProductInfo dan hapus properti dan Width .Height Perluas tag pintar DetailsView dan, dari daftar drop-down Pilih Sumber Data, pilih untuk mengikat DetailsView ke kontrol SqlDataSource baru bernama RandomProductDataSource.

Mengikat DetailsView ke Kontrol SqlDataSource Baru

Gambar 03: Ikat DetailTampilan ke Kontrol SqlDataSource Baru (Klik untuk melihat gambar ukuran penuh)

Konfigurasikan kontrol SqlDataSource untuk menyambungkan ke database Northwind melalui NorthwindConnectionString (yang kami buat di Berinteraksi dengan Halaman Master dari tutorial Halaman Konten ). Saat mengonfigurasi pernyataan pilih pilih untuk menentukan pernyataan SQL kustom lalu masukkan kueri berikut:

SELECT TOP 1 ProductName, UnitPrice
FROM Products
ORDER BY NEWID()

Kata TOP 1 kunci dalam SELECT klausul hanya mengembalikan rekaman pertama yang dikembalikan oleh kueri. Fungsi ini NEWID() menghasilkan nilai pengidentifikasi unik global (GUID) baru dan dapat digunakan dalam ORDER BY klausul untuk mengembalikan rekaman tabel dalam urutan acak.

Mengonfigurasi SqlDataSource untuk Mengembalikan Rekaman Tunggal yang Dipilih Secara Acak

Gambar 04: Mengonfigurasi SqlDataSource untuk Mengembalikan Rekaman Tunggal yang Dipilih Secara Acak (Klik untuk melihat gambar ukuran penuh)

Setelah menyelesaikan wizard, Visual Studio membuat BoundField untuk dua kolom yang dikembalikan oleh kueri di atas. Pada titik ini markup deklaratif halaman Anda akan terlihat mirip dengan yang berikut ini:

<asp:UpdatePanel ID="ProductPanel" runat="server">
 <ContentTemplate>
 <asp:DetailsView ID="ProductInfo" runat="server" AutoGenerateRows="False" 
 DataSourceID="RandomProductDataSource">
 <Fields>
 <asp:BoundField DataField="ProductName" HeaderText="ProductName" 
 SortExpression="ProductName" />
 <asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice" 
 SortExpression="UnitPrice" />
 </Fields>
 </asp:DetailsView>
 <asp:SqlDataSource ID="RandomProductDataSource" runat="server" 
 ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" SelectCommand="SELECT TOP 1 ProductName, UnitPrice FROM Products ORDER BY NEWID()"></asp:SqlDataSource>
 </ContentTemplate>
</asp:UpdatePanel>

Gambar 5 memperlihatkan ShowRandomProduct.aspx halaman saat dilihat melalui browser. Klik tombol Refresh browser Anda untuk memuat ulang halaman; Anda akan melihat ProductName nilai dan UnitPrice untuk rekaman baru yang dipilih secara acak.

Nama dan Harga Produk Acak Ditampilkan

Gambar 05: Nama dan Harga Produk Acak Ditampilkan (Klik untuk melihat gambar ukuran penuh)

Menampilkan Produk Baru Secara Otomatis Setiap 15 Detik

Kerangka kerja AJAX ASP.NET menyertakan kontrol Timer yang melakukan postback pada waktu yang ditentukan; pada postback acara Timer Tick dinaikkan. Jika kontrol Timer ditempatkan dalam UpdatePanel, kontrol timer memicu postback halaman parsial, di mana kita dapat mengikat kembali data ke DetailsView untuk menampilkan produk baru yang dipilih secara acak.

Untuk mencapai hal ini, seret Timer dari Kotak Alat dan letakkan ke UpdatePanel. Ubah Timer ID dari Timer1 ke ProductTimer dan propertinya Interval dari 60000 menjadi 15000. Properti Interval menunjukkan jumlah milidetik antara postback; mengaturnya menjadi 15000 menyebabkan Timer memicu postback halaman parsial setiap 15 detik. Pada titik ini markup deklaratif Timer Anda akan terlihat mirip dengan yang berikut ini:

<asp:UpdatePanel ID="ProductPanel" runat="server" onload="ProductPanel_Load">
 <ContentTemplate>
 ...

 <asp:Timer ID="ProductTimer" runat="server" Interval="15000">
 </asp:Timer>
 </ContentTemplate>
</asp:UpdatePanel>

Buat penanganan aktivitas untuk peristiwa Timer Tick . Dalam penanganan aktivitas ini, kita perlu mengikat ulang data ke DetailsView dengan memanggil metode DetailsView DataBind . Melakukannya menginstruksikan DetailsView untuk mengambil kembali data dari kontrol sumber datanya, yang akan memilih dan menampilkan rekaman baru yang dipilih secara acak (seperti saat memuat ulang halaman dengan mengklik tombol Refresh browser).

protected void ProductTimer_Tick(object sender, EventArgs e)
{
    ProductInfo.DataBind();
}

Hanya itu saja! Kunjungi kembali halaman melalui browser. Awalnya, informasi produk acak ditampilkan. Jika Anda dengan sabar watch layar, Anda akan melihat bahwa, setelah 15 detik, informasi tentang produk baru secara ajaib menggantikan tampilan yang ada.

Untuk lebih melihat apa yang terjadi di sini, mari kita tambahkan kontrol Label ke UpdatePanel yang menampilkan waktu tampilan terakhir diperbarui. Tambahkan kontrol Web Label dalam UpdatePanel, atur ID ke LastUpdateTime, dan hapus propertinya Text . Selanjutnya, buat penanganan aktivitas untuk peristiwa UpdatePanel Load dan tampilkan waktu saat ini di Label. (Peristiwa UpdatePanel Load diaktifkan pada setiap postback halaman penuh atau parsial.)

protected void ProductPanel_Load(object sender, EventArgs e)
{
    LastUpdateTime.Text = "Last updated at " + DateTime.Now.ToLongTimeString();
}

Setelah perubahan ini selesai, halaman menyertakan waktu produk yang ditampilkan saat ini dimuat. Gambar 6 memperlihatkan halaman saat pertama kali dikunjungi. Gambar 7 memperlihatkan halaman 15 detik kemudian setelah kontrol Timer "dicentang" dan UpdatePanel telah disegarkan untuk menampilkan informasi tentang produk baru.

Produk Yang Dipilih Secara Acak Ditampilkan pada Pemuatan Halaman

Gambar 06: Produk yang Dipilih Secara Acak Ditampilkan pada Pemuatan Halaman (Klik untuk melihat gambar ukuran penuh)

Setiap 15 Detik Produk Baru yang Dipilih Secara Acak Ditampilkan

Gambar 07: Setiap 15 Detik Produk Baru yang Dipilih Secara Acak Ditampilkan (Klik untuk melihat gambar ukuran penuh)

Langkah 3: Menggunakan Kontrol ScriptManagerProxy

Bersama dengan menyertakan skrip yang diperlukan untuk pustaka klien kerangka kerja AJAX ASP.NET, ScriptManager juga dapat mendaftarkan file JavaScript kustom, referensi ke Layanan Web yang mendukung skrip, dan autentikasi kustom, otorisasi, dan layanan profil. Biasanya kustomisasi tersebut khusus untuk halaman tertentu. Namun, jika file skrip kustom, referensi Layanan Web, atau autentikasi, otorisasi, atau layanan profil dirujuk di ScriptManager di halaman master, maka file tersebut disertakan dalam semua halaman di situs web.

Untuk menambahkan kustomisasi terkait ScriptManager berdasarkan halaman demi halaman, gunakan kontrol ScriptManagerProxy. Anda dapat menambahkan ScriptManagerProxy ke halaman konten lalu mendaftarkan file JavaScript kustom, referensi Layanan Web, atau autentikasi, otorisasi, atau layanan profil dari ScriptManagerProxy; ini memiliki efek mendaftarkan layanan ini untuk halaman konten tertentu.

Catatan

Halaman ASP.NET hanya dapat memiliki tidak lebih dari satu kontrol ScriptManager yang ada. Oleh karena itu, Anda tidak dapat menambahkan kontrol ScriptManager ke halaman konten jika kontrol ScriptManager sudah ditentukan di halaman master. Satu-satunya tujuan ScriptManagerProxy adalah untuk menyediakan cara bagi pengembang untuk menentukan ScriptManager di halaman master, tetapi masih memiliki kemampuan untuk menambahkan kustomisasi ScriptManager berdasarkan halaman demi halaman.

Untuk melihat kontrol ScriptManagerProxy dalam tindakan, mari kita tambahkan UpdatePanel untuk ShowRandomProduct.aspx menyertakan tombol yang menggunakan skrip sisi klien untuk menjeda atau melanjutkan kontrol Timer. Kontrol Timer memiliki tiga metode sisi klien yang dapat kita gunakan untuk mencapai fungsionalitas yang diinginkan ini:

  • _startTimer() - memulai kontrol Timer
  • _raiseTick() - menyebabkan kontrol Timer menjadi "tick," sehingga memposting kembali dan menaikkan peristiwanya Tick di server
  • _stopTimer() - menghentikan kontrol Timer

Mari kita buat file JavaScript dengan variabel bernama timerEnabled dan fungsi bernama ToggleTimer. Variabel timerEnabled menunjukkan apakah kontrol Timer saat ini diaktifkan atau dinonaktifkan; defaultnya adalah true. Fungsi ToggleTimer ini menerima dua parameter input: referensi ke tombol Jeda/Lanjutkan dan nilai sisi id klien kontrol Timer. Fungsi ini mengalihkan nilai timerEnabled, mendapatkan referensi ke kontrol Timer, memulai atau menghentikan Timer (tergantung pada nilai timerEnabled), dan memperbarui teks tampilan tombol menjadi "Jeda" atau "Lanjutkan". Fungsi ini akan dipanggil setiap kali tombol Jeda/Lanjutkan diklik.

Mulailah dengan membuat folder baru di situs web bernama Scripts. Selanjutnya, tambahkan file baru ke folder Skrip bernama TimerScript.js jenis File JScript.

Menambahkan File JavaScript Baru ke Folder Skrip

Gambar 08: Tambahkan File JavaScript Baru ke Scripts Folder (Klik untuk melihat gambar ukuran penuh)

File JavaScript Baru telah Ditambahkan ke Situs Web

Gambar 09: File JavaScript Baru telah Ditambahkan ke Situs Web (Klik untuk melihat gambar ukuran penuh)

Selanjutnya, tambahkan skenario berikut ke file TimerScript.js:

var timerEnabled = true;
function ToggleTimer(btn, timerID)
{
    // Toggle the timer enabled state
    timerEnabled = !timerEnabled;

    // Get a reference to the Timer
    var timer = $find(timerID);

    if (timerEnabled)
    {
        // Start timer
        timer._startTimer();

        // Immediately raise a tick
        timer._raiseTick();

        btn.value = 'Pause';
    }
    else
    {
        // Stop timer
        timer._stopTimer();

        btn.value = 'Resume';
    }
}

Kita sekarang perlu mendaftarkan file JavaScript kustom ini di ShowRandomProduct.aspx. Kembali ke ShowRandomProduct.aspx dan tambahkan kontrol ScriptManagerProxy ke halaman; atur ID ke MyManagerProxy. Untuk mendaftarkan file JavaScript kustom, pilih kontrol ScriptManagerProxy di Designer lalu buka jendela Properti. Salah satu properti berjudul Skrip. Memilih properti ini menampilkan Koleksi SkripReferensi Editor diperlihatkan dalam Gambar 10. Klik tombol Tambahkan untuk menyertakan referensi skrip baru lalu masukkan jalur ke file skrip di properti Jalur: ~/Scripts/TimerScript.js.

Menambahkan Referensi Skrip ke Kontrol ScriptManagerProxy

Gambar 10: Tambahkan Referensi Skrip ke Kontrol ScriptManagerProxy (Klik untuk melihat gambar ukuran penuh)

Setelah menambahkan referensi skrip, markup deklaratif kontrol ScriptManagerProxy diperbarui untuk menyertakan <Scripts> koleksi dengan satu ScriptReference entri, seperti yang diilustrasikan cuplikan markup berikut:

<asp:ScriptManagerProxy ID="MyManagerProxy" runat="server">
 <Scripts>
 <asp:ScriptReference Path="~/Scripts/TimerScript.js" />
 </Scripts>
</asp:ScriptManagerProxy>

Entri ScriptReference menginstruksikan ScriptManagerProxy untuk menyertakan referensi ke file JavaScript dalam markup yang dirender. Artinya, dengan mendaftarkan skrip kustom di ScriptManagerProxy output yang dirender ShowRandomProduct.aspx halaman sekarang menyertakan tag lain <script src="url"></script> : <script src="Scripts/TimerScript.js" type="text/javascript"></script>.

Kita sekarang dapat memanggil fungsi yang ToggleTimer ditentukan TimerScript.js dari skrip klien di ShowRandomProduct.aspx halaman. Tambahkan HTML berikut dalam UpdatePanel:

<input type="button" id="PauseResumeButton" 
    value="Pause" 
    onclick="ToggleTimer(this, '<%=ProductTimer.ClientID %>');" />

Ini menampilkan tombol dengan teks "Jeda". Setiap kali diklik, fungsi ToggleTimer JavaScript dipanggil, meneruskan referensi ke tombol dan nilai id kontrol Timer (ProductTimer). Perhatikan sintaks untuk mendapatkan id nilai kontrol Timer. <%=ProductTimer.ClientID%> memancarkan ProductTimer nilai properti kontrol ClientID Timer. Dalam tutorial Penamaan ID Kontrol di Halaman Konten , kami membahas perbedaan antara nilai sisi ID server dan nilai sisi id klien yang dihasilkan, dan bagaimana ClientID mengembalikan sisi idklien .

Gambar 11 memperlihatkan halaman ini saat pertama kali dikunjungi melalui browser. Timer saat ini sedang berjalan dan memperbarui informasi produk yang ditampilkan setiap 15 detik. Gambar 12 memperlihatkan layar setelah tombol Jeda diklik. Mengklik tombol Jeda menghentikan Timer dan memperbarui teks tombol menjadi "Lanjutkan". Informasi produk akan di-refresh (dan terus menyegarkan setiap 15 detik) setelah pengguna mengklik Lanjutkan.

Klik Tombol Jeda untuk Menghentikan Kontrol Timer

Gambar 11: Klik Tombol Jeda untuk Menghentikan Kontrol Timer (Klik untuk melihat gambar ukuran penuh)

Klik Tombol Lanjutkan untuk Memulai Ulang Timer

Gambar 12: Klik Tombol Lanjutkan untuk Memulai Ulang Timer (Klik untuk melihat gambar ukuran penuh)

Ringkasan

Saat membangun aplikasi web berkemampuan AJAX menggunakan kerangka kerja AJAX ASP.NET, sangat penting bahwa setiap halaman web berkemampuan AJAX menyertakan kontrol ScriptManager. Untuk memfasilitasi proses ini, kita dapat menambahkan ScriptManager ke halaman master daripada harus mengingat untuk menambahkan ScriptManager ke setiap halaman konten. Langkah 1 memperlihatkan cara menambahkan ScriptManager ke halaman master sementara Langkah 2 melihat penerapan fungsionalitas AJAX di halaman konten.

Jika Anda perlu menambahkan skrip kustom, referensi ke Layanan Web yang mendukung skrip, atau layanan autentikasi, otorisasi, atau profil yang disesuaikan ke halaman konten tertentu, tambahkan kontrol ScriptManagerProxy ke halaman konten lalu konfigurasikan kustomisasi di sana. Langkah 3 memeriksa cara menggunakan ScriptManagerProxy untuk mendaftarkan file JavaScript kustom di halaman konten tertentu.

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, pelatih, dan penulis independen. 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

Seri tutorial ini ditinjau oleh banyak peninjau yang bermanfaat. Tertarik untuk meninjau artikel MSDN saya yang akan datang? Jika demikian, letakkan saya antrean di mitchell@4GuysFromRolla.com

SebelumnyaBerikutnya