Berinteraksi dengan Halaman Konten dari Halaman Master (C#)

2023-07-13

Memeriksa cara memanggil metode, mengatur properti, dll. Halaman Konten dari kode di Halaman Master.

Pendahuluan

Tutorial sebelumnya memeriksa cara agar halaman konten berinteraksi secara terprogram dengan halaman masternya. Ingat bahwa kami memperbarui halaman master untuk menyertakan kontrol GridView yang mencantumkan lima produk yang terakhir ditambahkan. Kami kemudian membuat halaman konten tempat pengguna dapat menambahkan produk baru. Setelah menambahkan produk baru, halaman konten perlu menginstruksikan halaman master untuk me-refresh GridView-nya sehingga akan menyertakan produk yang baru saja ditambahkan. Fungsionalitas ini dicapai dengan menambahkan metode publik ke halaman master yang me-refresh data yang terikat ke GridView, lalu memanggil metode tersebut dari halaman konten.

Bentuk konten dan interaksi halaman master yang paling umum berasal dari halaman konten. Namun, dimungkinkan bagi halaman master untuk meringkas halaman konten saat ini menjadi tindakan, dan fungsionalitas tersebut mungkin diperlukan jika halaman master berisi elemen antarmuka pengguna yang memungkinkan pengguna untuk memodifikasi data yang juga ditampilkan di halaman konten. Pertimbangkan halaman konten yang menampilkan informasi produk dalam kontrol GridView dan halaman master yang menyertakan kontrol Tombol yang, saat diklik, menggandakan harga semua produk. Sama seperti contoh dalam tutorial sebelumnya, GridView perlu di-refresh setelah tombol harga ganda diklik sehingga menampilkan harga baru, tetapi dalam skenario ini adalah halaman master yang perlu meringkas halaman konten menjadi tindakan.

Tutorial ini mengeksplorasi cara meminta fungsionalitas pemanggilan halaman master yang ditentukan di halaman konten.

Menginstigasi Interaksi Terprogram melalui Event dan Event Handler

Memanggil fungsionalitas halaman konten dari halaman master lebih menantang daripada sebaliknya. Karena halaman konten memiliki satu halaman master, saat menginstigasi interaksi terprogram dari halaman konten, kami tahu metode dan properti publik apa yang kami inginkan. Halaman master, bagaimanapun, dapat memiliki banyak halaman konten yang berbeda, masing-masing dengan sekumpulan properti dan metodenya sendiri. Bagaimana, kemudian, dapatkah kita menulis kode di halaman master untuk melakukan beberapa tindakan di halaman kontennya ketika kita tidak tahu halaman konten apa yang akan dipanggil sampai runtime?

Pertimbangkan kontrol web ASP.NET, seperti kontrol Tombol. Kontrol Tombol dapat muncul di sejumlah halaman ASP.NET dan memerlukan mekanisme yang dapat memperingatkan halaman bahwa halaman tersebut telah diklik. Ini dicapai menggunakan peristiwa. Secara khusus, kontrol Tombol menaikkan peristiwanya Click saat diklik; halaman ASP.NET yang berisi Tombol dapat secara opsional merespons pemberitahuan tersebut melalui penanganan aktivitas.

Pola yang sama ini dapat digunakan untuk memiliki fungsionalitas pemicu halaman master di halaman kontennya:

Tambahkan peristiwa ke halaman master.
Naikkan acara setiap kali halaman master perlu berkomunikasi dengan halaman kontennya. Misalnya, jika halaman master perlu memperingatkan halaman kontennya bahwa pengguna telah menggandakan harga, acaranya akan dinaikkan segera setelah harga dilipatgandakan.
Buat penanganan aktivitas di halaman konten yang perlu mengambil beberapa tindakan.

Sisa tutorial ini mengimplementasikan contoh yang diuraikan dalam Pengenalan; yaitu, halaman konten yang mencantumkan produk dalam database dan halaman master yang menyertakan kontrol Tombol untuk menggandakan harga.

Langkah 1: Menampilkan Produk di Halaman Konten

Urutan bisnis pertama kami adalah membuat halaman konten yang mencantumkan produk dari database Northwind. (Kami menambahkan database Northwind ke proyek dalam tutorial sebelumnya, Berinteraksi dengan Halaman Master dari Halaman Konten.) Mulailah dengan menambahkan halaman ASP.NET baru ke ~/Admin folder bernama Products.aspx, pastikan untuk mengikatnya ke Site.master halaman master. Gambar 1 memperlihatkan Penjelajah Solusi setelah halaman ini ditambahkan ke situs web.

Gambar 01: Tambahkan Halaman ASP.NET Baru ke Admin Folder (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. Buka kelas kode di Products.aspx belakang 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 Konten ke Halaman Master:

<siteMapNode url="~/Admin/Products.aspx" title="Master to Content Page Interaction" />

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

Kembali ke Products.aspx. Di kontrol Konten untuk MainContent, tambahkan kontrol GridView dan beri nama ProductsGrid. Ikat GridView ke kontrol SqlDataSource baru bernama ProductsDataSource.

Gambar 02: Ikat GridView ke Kontrol SqlDataSource Baru (Klik untuk melihat gambar ukuran penuh)

Konfigurasikan wizard sehingga menggunakan database Northwind. Jika Anda bekerja melalui tutorial sebelumnya maka Anda harus sudah memiliki string koneksi bernama NorthwindConnectionString di Web.config. Pilih string koneksi ini dari daftar drop-down, seperti yang ditunjukkan pada Gambar 3.

Gambar 03: Konfigurasikan SqlDataSource untuk Menggunakan Database Northwind (Klik untuk melihat gambar ukuran penuh)

Selanjutnya, tentukan pernyataan kontrol SELECT sumber data dengan memilih tabel Produk dari daftar drop-down dan mengembalikan ProductName kolom dan UnitPrice (lihat Gambar 4). Klik Berikutnya lalu Selesai untuk menyelesaikan wizard Konfigurasi Sumber Data.

Gambar 04: Mengembalikan ProductName bidang dan UnitPrice dari Products Tabel (Klik untuk melihat gambar ukuran penuh)

Hanya itu saja! Setelah menyelesaikan wizard Visual Studio menambahkan dua BoundFields ke GridView untuk mencerminkan dua bidang yang dikembalikan oleh kontrol SqlDataSource. Markup kontrol GridView dan SqlDataSource mengikutinya. Gambar 5 memperlihatkan hasilnya saat dilihat melalui browser.

<asp:GridView ID="ProductsGrid" runat="server" AutoGenerateColumns="False" 
 DataSourceID="ProductsDataSource">
 <Columns>
 <asp:BoundField DataField="ProductName" HeaderText="ProductName" 
 SortExpression="ProductName" />
 <asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice" 
 SortExpression="UnitPrice" />
 </Columns>
</asp:GridView>

<asp:SqlDataSource ID="ProductsDataSource" runat="server" 
 ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" 
 SelectCommand="SELECT [ProductName], [UnitPrice] FROM [Products]">
</asp:SqlDataSource>

Gambar 05: Setiap Produk dan Harganya Tercantum di GridView (Klik untuk melihat gambar ukuran penuh)

Catatan

Jangan ragu untuk membersihkan penampilan GridView. Beberapa saran termasuk memformat nilai UnitPrice yang ditampilkan sebagai mata uang dan menggunakan warna latar belakang dan font untuk meningkatkan tampilan kisi. Untuk informasi selengkapnya tentang menampilkan dan memformat data dalam ASP.NET, lihat seri tutorial Bekerja dengan Data saya.

Langkah 2: Menambahkan Tombol Harga Ganda ke Halaman Master

Tugas kami berikutnya adalah menambahkan kontrol Web Tombol ke halaman master yang, ketika diklik, akan menggandakan harga semua produk dalam database. Site.master Buka halaman master dan seret Tombol dari Kotak Alat ke Perancang, letakkan di bawah RecentProductsDataSource kontrol SqlDataSource yang kami tambahkan di tutorial sebelumnya. Atur properti Tombol ID ke DoublePrice dan propertinya Text ke "Harga Produk Ganda".

Selanjutnya, tambahkan kontrol SqlDataSource ke halaman master, beri nama DoublePricesDataSource. SqlDataSource ini akan digunakan untuk menjalankan pernyataan untuk menggandakan UPDATE semua harga. Secara khusus, kita perlu mengatur properti dan UpdateCommand propertinya ConnectionString ke string koneksi dan UPDATE pernyataan yang sesuai. Kemudian kita perlu memanggil metode kontrol Update SqlDataSource ini ketika Tombol DoublePrice diklik. Untuk mengatur ConnectionString properti dan UpdateCommand , pilih kontrol SqlDataSource lalu buka jendela Properti. Properti mencantumkan ConnectionString string koneksi yang sudah disimpan dalam Web.config daftar drop-down; pilih opsi seperti yang NorthwindConnectionString ditunjukkan pada Gambar 6.

Gambar 06: Konfigurasikan SqlDataSource untuk Menggunakan NorthwindConnectionString (Klik untuk melihat gambar ukuran penuh)

Untuk mengatur UpdateCommand properti, temukan opsi UpdateQuery di jendela Properti. Properti ini, ketika dipilih, menampilkan tombol dengan elipsis; klik tombol ini untuk menampilkan kotak dialog Editor Perintah dan Parameter yang diperlihatkan dalam Gambar 7. Ketik pernyataan berikut UPDATE ke dalam kotak teks kotak dialog:

UPDATE Products SET UnitPrice = UnitPrice * 2

Pernyataan ini, ketika dijalankan, akan menggandakan UnitPrice nilai untuk setiap rekaman dalam Products tabel.

Gambar 07: Atur Properti SqlDataSource UpdateCommand (Klik untuk melihat gambar ukuran penuh)

Setelah mengatur properti ini, markup deklaratif kontrol Tombol dan SqlDataSource Anda akan terlihat mirip dengan yang berikut ini:

<asp:Button ID="DoublePrice" runat="server" 
 Text="Double Product Prices" />

<asp:SqlDataSource ID="DoublePricesDataSource" runat="server" 
 UpdateCommand="UPDATE Products SET UnitPrice = UnitPrice * 2" 
 ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" 
 ProviderName="<%$ ConnectionStrings:NorthwindConnectionString.ProviderName %>">
</asp:SqlDataSource>

Yang tersisa adalah memanggil metodenya Update ketika Tombol DoublePrice diklik. Buat Click penanganan aktivitas untuk DoublePrice Tombol dan tambahkan kode berikut:

protected void DoublePrice_Click(object sender, EventArgs e)
{
    // Double the prices
    DoublePricesDataSource.Update();
}

Untuk menguji fungsionalitas ini, kunjungi halaman yang ~/Admin/Products.aspx kami buat di Langkah 1 dan klik tombol "Harga Produk Ganda". Mengklik tombol menyebabkan postback dan menjalankan DoublePrice penanganan aktivitas Tombol Click , menggandakan harga semua produk. Halaman kemudian dirender ulang dan markup dikembalikan dan ditampilkan kembali di browser. GridView di halaman konten, bagaimanapun, mencantumkan harga yang sama seperti sebelum tombol "Harga Produk Ganda" diklik. Ini karena data yang awalnya dimuat di GridView memiliki status tersimpan dalam status tampilan, sehingga tidak dimuat ulang pada postback kecuali diinstruksikan sebaliknya. Jika Anda mengunjungi halaman yang berbeda lalu kembali ke ~/Admin/Products.aspx halaman, Anda akan melihat harga yang diperbarui.

Langkah 3: Menaikkan Acara Ketika Harga Dua Kali Lipat

Karena GridView di ~/Admin/Products.aspx halaman tidak segera mencerminkan penggambaran harga, pengguna mungkin berpikir bahwa mereka tidak mengklik tombol "Harga Produk Ganda", atau bahwa itu tidak berfungsi. Mereka dapat mencoba mengklik tombol beberapa kali lagi, menggandakan harga lagi dan lagi. Untuk memperbaikinya, kita perlu memiliki kisi di halaman konten menampilkan harga baru segera setelah dua kali lipat.

Seperti yang dibahas sebelumnya dalam tutorial ini, kita perlu menaikkan peristiwa di halaman master setiap kali pengguna mengklik DoublePrice Tombol. Peristiwa adalah cara bagi satu kelas (penerbit peristiwa) untuk memberi tahu satu set kelas lain (pelanggan peristiwa) bahwa sesuatu yang menarik telah terjadi. Dalam contoh ini, halaman master adalah penerbit peristiwa; halaman konten yang peduli tentang kapan Tombol DoublePrice diklik adalah pelanggan.

Kelas berlangganan peristiwa dengan membuat penanganan aktivitas, yang merupakan metode yang dijalankan sebagai respons terhadap peristiwa yang dimunculkan. Penerbit mendefinisikan peristiwa yang dia ajukan dengan mendefinisikan delegasi peristiwa. Delegasi peristiwa menentukan parameter input apa yang harus diterima oleh penanganan aktivitas. Dalam .NET Framework, delegasi peristiwa tidak mengembalikan nilai apa pun dan menerima dua parameter input:

, Objectyang mengidentifikasi sumber peristiwa, dan
Kelas yang berasal dari System.EventArgs

Parameter kedua yang diteruskan ke penanganan aktivitas dapat menyertakan informasi tambahan tentang peristiwa tersebut. Meskipun kelas dasar EventArgs tidak meneruskan informasi apa pun, .NET Framework mencakup sejumlah kelas yang memperluas EventArgs dan mencakup properti tambahan. Misalnya, CommandEventArgs instans diteruskan ke penanganan aktivitas yang merespons Command peristiwa, dan menyertakan dua properti informasi: CommandArgument dan CommandName.

Catatan

Untuk informasi selengkapnya tentang membuat, meningkatkan, dan menangani peristiwa, lihat Peristiwa dan Delegasi dan Delegasi Peristiwa dalam bahasa Inggris Sederhana.

Untuk menentukan peristiwa, gunakan sintaks berikut:

public event eventDelegate eventName;

Karena kita hanya perlu memperingatkan halaman konten ketika pengguna telah mengklik Tombol dan tidak perlu meneruskan DoublePrice informasi tambahan lainnya, kita dapat menggunakan delegasi EventHandlerperistiwa , yang mendefinisikan penanganan aktivitas yang menerima sebagai parameter keduanya objek jenis System.EventArgs. Untuk membuat peristiwa di halaman master, tambahkan baris kode berikut ke kelas kode di belakang halaman master:

public partial class Site : System.Web.UI.MasterPage
{
    public event EventHandler PricesDoubled;

    ...
}

Kode di atas menambahkan peristiwa publik ke halaman master bernama PricesDoubled. Kita sekarang perlu menaikkan acara ini setelah harga dilipatgandakan. Untuk menaikkan peristiwa, gunakan sintaks berikut:

if (eventName != null)
    eventName(sender, eventArgs);

Di mana pengirim dan eventArgs adalah nilai yang ingin Anda teruskan ke penanganan aktivitas pelanggan.

Perbarui penanganan DoublePrice Click aktivitas dengan kode berikut:

protected void DoublePrice_Click(object sender, EventArgs e)
{
    // Double the prices
    DoublePricesDataSource.Update();

    // Refresh RecentProducts
    RecentProducts.DataBind();

    // Raise the PricesDoubled event
    if (PricesDoubled != null)
    PricesDoubled(this, EventArgs.Empty);
}

Seperti sebelumnya, penanganan Click aktivitas dimulai dengan memanggil DoublePricesDataSource metode kontrol Update SqlDataSource untuk menggandakan harga semua produk. Setelah itu ada dua penambahan pada penanganan aktivitas. Pertama, RecentProducts data GridView di-refresh. GridView ini ditambahkan ke halaman master dalam tutorial sebelumnya dan menampilkan lima produk yang terakhir ditambahkan. Kita perlu menyegarkan kisi-kisi ini sehingga menunjukkan harga yang hanya dua kali lipat untuk kelima produk ini. Setelah itu, PricesDoubled acara dimunculkan. Referensi ke halaman master itu sendiri (this) dikirim ke penanganan aktivitas sebagai sumber peristiwa dan objek kosong EventArgs dikirim sebagai argumen peristiwa.

Langkah 4: Menangani Peristiwa di Halaman Konten

Pada titik ini halaman master menaikkan peristiwanya PricesDoubled setiap kali DoublePrice kontrol Tombol diklik. Namun, ini hanya setengah pertempuran - kita masih perlu menangani peristiwa di pelanggan. Ini melibatkan dua langkah: membuat penanganan aktivitas dan menambahkan kode kabel peristiwa sehingga ketika peristiwa dinaikkan, penanganan aktivitas dijalankan.

Mulailah dengan membuat penanganan aktivitas bernama Master_PricesDoubled. Karena bagaimana kita mendefinisikan PricesDoubled peristiwa di halaman master, dua parameter input penanganan aktivitas harus dari jenis Object dan EventArgs, masing-masing. Di penanganan aktivitas, panggil ProductsGrid metode GridView DataBind untuk mengikat ulang data ke kisi.

private void Master_PricesDoubled(object sender, EventArgs e)
{
    // Rebind data to ProductsGrid
    ProductsGrid.DataBind();
}

Kode untuk penanganan aktivitas selesai tetapi kami belum menyambungkan peristiwa halaman PricesDoubled master ke penanganan aktivitas ini. Pelanggan mengirimkan peristiwa ke penanganan aktivitas melalui sintaks berikut:

publisher.eventName += new eventDelegate(methodName);

publisher adalah referensi ke objek yang menawarkan eventName peristiwa, dan methodName adalah nama penanganan aktivitas yang ditentukan dalam pelanggan yang memiliki tanda tangan yang sesuai dengan eventDelegate. Dengan kata lain, jika delegasi peristiwa adalah EventHandler, maka methodName harus menjadi nama metode dalam pelanggan yang tidak mengembalikan nilai dan menerima dua parameter input jenis Object dan EventArgs, masing-masing.

Kode kabel peristiwa ini harus dijalankan pada kunjungan halaman pertama dan postback berikutnya dan harus terjadi pada titik dalam siklus hidup halaman yang mendahului kapan peristiwa dapat dinaikkan. Waktu yang baik untuk menambahkan kode kabel peristiwa ada di tahap PreInit, yang terjadi sangat awal dalam siklus hidup halaman.

Buka ~/Admin/Products.aspx dan buat Page_PreInit penanganan aktivitas:

protected void Page_PreInit(object sender, EventArgs e)
{
    // TODO: Put event wiring logic here
}

Untuk menyelesaikan kode kabel ini, kita memerlukan referensi terprogram ke halaman master dari halaman konten. Seperti yang disebutkan dalam tutorial sebelumnya, ada dua cara untuk melakukan ini:

Dengan mentransmisikan properti yang diketik Page.Master secara longgar ke jenis halaman master yang sesuai, atau
Dengan menambahkan @MasterType direktif di .aspx halaman lalu menggunakan properti yang sangat ditik Master .

Mari kita gunakan pendekatan terakhir. Tambahkan arahan berikut @MasterType ke bagian atas markup deklaratif halaman:

<%@ MasterType VirtualPath="~/Site.master" %>

Kemudian tambahkan kode pengabelan peristiwa berikut di penanganan Page_PreInit aktivitas:

protected void Page_PreInit(object sender, EventArgs e)
{
    // Create an event handler for the master page's PricesDoubled event
    Master.PricesDoubled += new EventHandler(Master_PricesDoubled);
}

Dengan kode ini di tempat, GridView di halaman konten di-refresh setiap kali Tombol DoublePrice diklik.

Gambar 8 dan 9 menggambarkan perilaku ini. Gambar 8 memperlihatkan halaman saat pertama kali dikunjungi. Perhatikan bahwa nilai harga di RecentProducts GridView (di kolom kiri halaman master) dan ProductsGrid GridView (di halaman konten). Gambar 9 menunjukkan layar yang sama segera setelah Tombol DoublePrice diklik. Seperti yang Anda lihat, harga baru secara instan tercermin di kedua GridViews.

Gambar 08: Nilai Harga Awal (Klik untuk melihat gambar ukuran penuh)

Gambar 09: Harga Just-Doubled Ditampilkan di GridViews (Klik untuk melihat gambar ukuran penuh)

Ringkasan

Idealnya, halaman master dan halaman kontennya benar-benar terpisah satu sama lain dan tidak memerlukan tingkat interaksi. Namun, jika Anda memiliki halaman master atau halaman konten yang menampilkan data yang dapat dimodifikasi dari halaman master atau halaman konten, maka Anda mungkin perlu memberi tahu halaman master halaman konten (atau sebaliknya) saat data dimodifikasi sehingga tampilan dapat diperbarui. Dalam tutorial sebelumnya kami melihat cara memiliki halaman konten yang berinteraksi secara terprogram dengan halaman masternya; dalam tutorial ini kita melihat cara memiliki halaman master yang memulai interaksi.

Meskipun interaksi terprogram antara konten dan halaman master dapat berasal dari konten atau halaman master, pola interaksi yang digunakan tergantung pada asalnya. Perbedaannya disebabkan oleh fakta bahwa halaman konten memiliki satu halaman master, tetapi halaman master dapat memiliki banyak halaman konten yang berbeda. Daripada memiliki halaman master yang berinteraksi langsung dengan halaman konten, pendekatan yang lebih baik adalah meminta halaman master menaikkan peristiwa untuk memberi sinyal bahwa beberapa tindakan telah terjadi. Halaman konten yang peduli dengan tindakan dapat membuat penanganan aktivitas.

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 untuk

Seri tutorial ini ditinjau oleh banyak peninjau yang bermanfaat. Peninjau prospek untuk tutorial ini adalah Suchi Banerjee. Tertarik untuk meninjau artikel MSDN saya yang akan datang? Jika demikian, menjatuhkan saya baris di mitchell@4GuysFromRolla.com

Sebelumnya Berikutnya

Bagikan melalui