Pemfilteran Master/Detail di Dua Halaman dengan GridView (C#)

oleh Scott Mitchell

Unduh PDF

Dalam tutorial ini kita akan menerapkan pola ini dengan menggunakan GridView untuk mencantumkan pemasok dalam database. Setiap baris pemasok di GridView akan berisi tautan Lihat Produk yang, ketika diklik, akan membawa pengguna ke halaman terpisah yang mencantumkan produk tersebut untuk pemasok yang dipilih.

Pendahuluan

Dalam dua tutorial sebelumnya kita melihat cara menampilkan laporan master/detail dalam satu halaman web menggunakan DropDownLists untuk menampilkan catatan "master" dan kontrol GridView atau DetailsView untuk menampilkan "detail". Pola umum lainnya yang digunakan untuk laporan master/detail adalah memiliki catatan master di satu halaman web dan detail ditampilkan di halaman lain. Situs web forum, seperti forum ASP.NET, adalah contoh yang bagus dari pola ini dalam praktiknya. Forum ASP.NET terdiri dari berbagai forum Memulai, Formulir Web, Kontrol Presentasi Data, dan sebagainya. Setiap forum terdiri dari banyak utas dan setiap utas terdiri dari sejumlah posting. Di beranda forum ASP.NET, forum ditampilkan. Mengklik forum mengantarkan Anda ke ShowForum.aspx halaman, yang mencantumkan utas untuk forum tersebut. Demikian juga, mengklik utas akan membawa Anda ke ShowPost.aspx, yang menampilkan postingan untuk utas yang diklik.

Dalam tutorial ini kita akan menerapkan pola ini dengan menggunakan GridView untuk mencantumkan pemasok dalam database. Setiap baris pemasok di GridView akan berisi tautan Lihat Produk yang, ketika diklik, akan membawa pengguna ke halaman terpisah yang mencantumkan produk tersebut untuk pemasok yang dipilih.

Langkah 1: MenambahkanSupplierListMaster.aspxdanProductsForSupplierDetails.aspxHalaman keFilteringFolder

Saat menentukan tata letak halaman dalam tutorial ketiga, kami menambahkan sejumlah halaman "starter" di BasicReportingfolder , Filtering, dan CustomFormatting . Namun, kami tidak menambahkan halaman pemula untuk tutorial ini pada saat itu, jadi luangkan waktu sejenak untuk menambahkan dua halaman baru ke Filtering folder: SupplierListMaster.aspx dan ProductsForSupplierDetails.aspx. SupplierListMaster.aspx akan mencantumkan catatan "master" (pemasok) sementara ProductsForSupplierDetails.aspx akan menampilkan produk untuk pemasok yang dipilih.

Saat membuat dua halaman baru ini, pastikan untuk mengaitkannya dengan Site.master halaman master.

Gambar 1: Tambahkan SupplierListMaster.aspx halaman dan ProductsForSupplierDetails.aspx ke Filtering Folder

Selain itu, saat menambahkan halaman baru ke proyek, pastikan untuk memperbarui file peta situs, Web.sitemap, yang sesuai. Untuk tutorial ini, cukup tambahkan SupplierListMaster.aspx halaman ke peta situs menggunakan konten XML berikut sebagai turunan dari elemen Laporan <siteMapNode> Pemfilteran:

<siteMapNode url="~/Filtering/SupplierListMaster.aspx"
  title="Master/Detail Across Two Pages"
  description="Master records on one page, detail records on another."
/>

Nota

Anda dapat membantu mengotomatiskan proses pembaruan file peta situs saat menambahkan halaman ASP.NET baru menggunakan Makro Peta Situs Visual Studio gratis K. Scott Allen.

Langkah 2: Menampilkan Daftar Pemasok diSupplierListMaster.aspx

Dengan halaman SupplierListMaster.aspx dan ProductsForSupplierDetails.aspx selesai, langkah kami selanjutnya adalah membuat GridView pemasok di SupplierListMaster.aspx. Tambahkan GridView ke halaman dan ikat ke ObjectDataSource baru. ObjectDataSource ini harus menggunakan SuppliersBLL metode kelas GetSuppliers() untuk mengembalikan semua pemasok.

Gambar 2: Pilih SuppliersBLL Kelas (Klik untuk melihat gambar ukuran penuh)

Gambar 3: Konfigurasikan ObjectDataSource untuk Menggunakan GetSuppliers() Metode (Klik untuk melihat gambar ukuran penuh)

Kita perlu menyertakan tautan berjudul Tampilkan Produk di setiap baris GridView yang, ketika diklik, membawa pengguna ke ProductsForSupplierDetails.aspx dengan menggunakan nilai SupplierID dari baris yang dipilih melalui querystring. Misalnya, jika pengguna mengklik tautan Lihat Produk untuk pemasok Tokyo Traders (yang memiliki SupplierID nilai 4), mereka harus dikirim ke ProductsForSupplierDetails.aspx?SupplierID=4.

Untuk mencapai hal ini, tambahkan HyperLinkField ke GridView, yang menambahkan hyperlink ke setiap baris GridView. Mulailah dengan mengklik tautan Edit Kolom dari tag pintar GridView. Selanjutnya, pilih HyperLinkField dari daftar di kiri atas dan klik Tambahkan untuk menyertakan HyperLinkField di daftar bidang GridView.

Gambar 4: Tambahkan HyperLinkField ke GridView (Klik untuk melihat gambar ukuran penuh)

HyperLinkField dapat dikonfigurasi untuk menggunakan teks atau nilai URL yang sama dengan tautan di setiap baris GridView, atau dapat mendasarkan nilai ini pada nilai data yang terikat ke setiap baris tertentu. Untuk menentukan nilai statis di semua baris, gunakan properti Text atau NavigateUrl HyperLinkField. Karena kita ingin teks tautan sama untuk semua baris, atur properti HyperLinkField Text ke Lihat Produk.

Gambar 5: Atur Properti HyperLinkField Text untuk Melihat Produk (Klik untuk melihat gambar ukuran penuh)

Untuk menetapkan nilai teks atau URL berdasarkan data yang mendasari yang terikat pada baris GridView, tentukan bidang data tempat nilai teks atau URL harus diambil dalam properti DataTextField atau DataNavigateUrlFields. DataTextField hanya dapat diatur ke satu bidang data; DataNavigateUrlFields, namun, dapat diatur ke daftar bidang data yang dibatasi koma. Kita sering perlu mendasarkan teks atau URL pada kombinasi nilai bidang data baris saat ini dan beberapa markup statis. Dalam tutorial ini, misalnya, kita ingin URL tautan HyperLinkField menjadi ProductsForSupplierDetails.aspx?SupplierID=supplierID, di mana supplierID adalah nilai baris SupplierID GridView masing-masing. Perhatikan bahwa kita memerlukan nilai statis dan berbasis data di sini: ProductsForSupplierDetails.aspx?SupplierID= bagian URL tautan bersifat statis, sedangkan supplierID bagiannya didorong data karena nilainya adalah nilai masing-masing baris sendiri SupplierID .

Untuk menunjukkan kombinasi nilai statis dan berbasis data, gunakan DataTextFormatString properti dan DataNavigateUrlFormatString . Di properti ini masukkan markup statis sesuai kebutuhan lalu gunakan penanda {0} di mana Anda ingin nilai bidang yang ditentukan dalam DataTextField properti atau DataNavigateUrlFields muncul. DataNavigateUrlFields Jika properti memiliki beberapa bidang yang ditentukan, gunakan {0} tempat Anda ingin nilai bidang pertama disisipkan, {1} untuk nilai bidang kedua, dan sebagainya.

Menerapkan ini ke tutorial kami, kita perlu mengatur DataNavigateUrlFields properti ke SupplierID, karena itu adalah bidang data yang nilainya perlu kita sesuaikan per baris, dan DataNavigateUrlFormatString properti ke ProductsForSupplierDetails.aspx?SupplierID={0}.

Gambar 6: Konfigurasikan HyperLinkField untuk Menyertakan URL Tautan yang Tepat Berdasarkan SupplierID (Klik untuk melihat gambar ukuran penuh)

Setelah menambahkan HyperLinkField, jangan ragu untuk menyesuaikan dan menyusun ulang bidang GridView. Markup berikut menunjukkan GridView setelah saya melakukan beberapa penyesuaian kecil pada tingkat kolom.

<asp:GridView ID="GridView1" runat="server"
    AutoGenerateColumns="False" DataKeyNames="SupplierID"
    DataSourceID="ObjectDataSource1" EnableViewState="False">
    <Columns>
        <asp:HyperLinkField DataNavigateUrlFields="SupplierID"
            DataNavigateUrlFormatString=
            "ProductsForSupplierDetails.aspx?SupplierID={0}"
            Text="View Products" />
        <asp:BoundField DataField="CompanyName"
          HeaderText="Company" SortExpression="CompanyName" />
        <asp:BoundField DataField="City" HeaderText="City"
          SortExpression="City" />
        <asp:BoundField DataField="Country" HeaderText="Country"
          SortExpression="Country" />
    </Columns>
</asp:GridView>

Luangkan waktu sejenak untuk melihat halaman SupplierListMaster.aspx melalui browser. Seperti yang ditunjukkan Gambar 7, halaman saat ini mencantumkan semua pemasok termasuk tautan Lihat Produk. Mengklik tautan Tampilkan Produk akan membawa Anda ke ProductsForSupplierDetails.aspx, meneruskan informasi pemasok SupplierID di querystring.

Gambar 7: Setiap Baris Pemasok Berisi Tautan Tampilan Produk (Klik untuk melihat gambar ukuran penuh)

Langkah 3: Mencantumkan Produk Pemasok diProductsForSupplierDetails.aspx

Pada titik ini SupplierListMaster.aspx, halaman tersebut mengirimkan pengguna ke ProductsForSupplierDetails.aspx dan meneruskan string kueri untuk pemasok SupplierID yang dipilih. Langkah terakhir tutorial adalah menampilkan produk dalam GridView di ProductsForSupplierDetails.aspx yang SupplierID sama dengan SupplierID yang diteruskan melalui querystring. Untuk mencapai ini, mulai dengan menambahkan GridView ke halaman ProductsForSupplierDetails.aspx, menggunakan kontrol baru ObjectDataSource bernama ProductsBySupplierDataSource yang memanggil metode GetProductsBySupplierID(supplierID) dari kelas ProductsBLL.

Gambar 8: Tambahkan ObjectDataSource Baru Bernama ProductsBySupplierDataSource (Klik untuk melihat gambar ukuran penuh)

Gambar 9: Pilih ProductsBLL Kelas (Klik untuk melihat gambar ukuran penuh)

Gambar 10: Minta ObjectDataSource Memanggil GetProductsBySupplierID(supplierID) Metode (Klik untuk melihat gambar ukuran penuh)

Langkah terakhir wizard Konfigurasi Sumber Data meminta kami untuk menyediakan sumber GetProductsBySupplierID(supplierID) parameter metode supplierID . Untuk menggunakan nilai querystring, atur sumber Parameter ke QueryString dan masukkan nama nilai querystring yang akan digunakan di kotak teks QueryStringField (SupplierID).

Gambar 11: Mengisi Nilai Parameter dari Nilai Querystring (supplierID)

Hanya itu saja! Gambar 12 menunjukkan halaman ProductsForSupplierDetails.aspx ketika dikunjungi dengan mengklik tautan dari Tokyo Traders di SupplierListMaster.aspx.

Gambar 12: Produk yang Disediakan oleh Tokyo Traders Ditampilkan (Klik untuk melihat gambar ukuran penuh)

Menampilkan Informasi Pemasok diProductsForSupplierDetails.aspx

Seperti yang ditunjukkan Gambar 12, halaman ProductsForSupplierDetails.aspx hanya mencantumkan produk yang disediakan oleh SupplierID yang ditentukan dalam string kueri. Seseorang yang dikirim langsung ke halaman ini, bagaimanapun, tidak akan tahu bahwa Gambar 12 menunjukkan produk dari Tokyo Traders. Untuk memperbaikinya, kami juga dapat menampilkan informasi pemasok di halaman ini.

Mulailah dengan menambahkan FormView di atas produk GridView. Buat kontrol ObjectDataSource baru bernama SuppliersDataSource yang memanggil metode SuppliersBLL dari kelas GetSupplierBySupplierID(supplierID).

Gambar 13: Pilih SuppliersBLL Kelas (Klik untuk melihat gambar ukuran penuh)

Gambar 14: Minta ObjectDataSource Memanggil GetSupplierBySupplierID(supplierID) Metode (Klik untuk melihat gambar ukuran penuh)

Seperti halnya ProductsBySupplierDataSource, tetapkan parameter supplierID dengan nilai dari querystring SupplierID.

Gambar 15: Mengisi supplierID Nilai Parameter dari SupplierID Nilai Querystring (Klik untuk melihat gambar ukuran penuh)

Saat mengikat FormView ke ObjectDataSource dalam tampilan Desain, Visual Studio akan secara otomatis membuat kontrol Web FormView ItemTemplate, , InsertItemTemplate, dan EditItemTemplate dengan Label dan TextBox untuk setiap bidang data yang dikembalikan oleh ObjectDataSource. Karena kami hanya ingin menampilkan informasi pemasok jangan ragu untuk menghapus InsertItemTemplate dan EditItemTemplate. Selanjutnya, edit ItemTemplate sehingga menampilkan nama perusahaan pemasok dalam <h3> elemen dan alamat, kota, negara/wilayah, dan nomor telepon di bawah nama perusahaan. Atau, Anda dapat mengatur FormView DataSourceID secara manual dan membuat ItemTemplate markup, seperti yang kami lakukan kembali dalam tutorial "Menampilkan Data Dengan ObjectDataSource".

Setelah pengeditan ini, markup deklaratif FormView akan terlihat mirip dengan yang berikut ini:

<asp:FormView ID="FormView1" runat="server" DataKeyNames="SupplierID"
    DataSourceID="suppliersDataSource" EnableViewState="False">
    <ItemTemplate>
        <h3><%# Eval("CompanyName") %></h3>
        <p>
            <asp:Label ID="AddressLabel" runat="server"
                Text='<%# Bind("Address") %>'></asp:Label><br />
            <asp:Label ID="CityLabel" runat="server"
                Text='<%# Bind("City") %>'></asp:Label>,
            <asp:Label ID="CountryLabel" runat="server"
                Text='<%# Bind("Country") %>'></asp:Label><br />
            Phone:
            <asp:Label ID="PhoneLabel" runat="server"
                Text='<%# Bind("Phone") %>'></asp:Label>
        </p>
    </ItemTemplate>
</asp:FormView>

Gambar 16 menunjukkan cuplikan layar ProductsForSupplierDetails.aspx halaman setelah informasi pemasok yang telah dirinci di atas disertakan.

Gambar 16: Daftar Produk Menyertakan Ringkasan Tentang Pemasok (Klik untuk melihat gambar ukuran penuh)

Menerapkan Sentuhan Akhir untukProductsForSupplierDetails.aspxUI

Untuk meningkatkan pengalaman pengguna untuk laporan ini, ada beberapa penambahan yang harus kami lakukan ke ProductsForSupplierDetails.aspx halaman. Saat ini satu-satunya cara pengguna dapat pergi dari ProductsForSupplierDetails.aspx halaman kembali ke daftar pemasok adalah dengan mengklik tombol kembali browser mereka. Mari kita tambahkan kontrol HyperLink ke ProductsForSupplierDetails.aspx halaman yang menautkan kembali ke SupplierListMaster.aspx, menyediakan cara lain bagi pengguna untuk kembali ke daftar master.

Gambar 17: Tambahkan Kontrol HyperLink untuk Membawa Pengguna Kembali (SupplierListMaster.aspxKlik untuk melihat gambar ukuran penuh)

Jika pengguna mengklik tautan Lihat Produk untuk pemasok yang tidak memiliki produk apa pun, ProductsBySupplierDataSource ObjectDataSource di ProductsForSupplierDetails.aspx tidak akan mengembalikan hasil apa pun. GridView yang terikat ke ObjectDataSource tidak akan merender markup apa pun yang menghasilkan wilayah kosong di halaman di browser pengguna. Untuk berkomunikasi dengan lebih jelas kepada pengguna bahwa tidak ada produk yang terkait dengan pemasok yang dipilih, kami dapat mengatur properti GridView EmptyDataText ke pesan yang ingin ditampilkan ketika situasi seperti itu muncul. Saya telah mengatur properti ini ke "Tidak ada produk yang disediakan oleh pemasok ini'"

Secara default, semua pemasok dalam database Northwinds menyediakan setidaknya satu produk. Namun, untuk tutorial ini saya telah memodifikasi Products tabel secara manual sehingga pemasok Escargots Nouveaux tidak lagi terkait dengan produk apa pun. Gambar 18 menunjukkan halaman detail untuk Escargots Nouveaux setelah perubahan ini dilakukan.

Gambar 18: Pengguna diberi tahu bahwa Pemasok Tidak Menyediakan Produk Apa Pun (Klik untuk melihat gambar ukuran penuh)

Ringkasan

Meskipun laporan master/detail dapat menampilkan rekaman master dan detail pada satu halaman, di banyak situs web mereka dipisahkan di dua halaman web. Dalam tutorial ini kita melihat cara menerapkan laporan master/detail seperti itu dengan meminta pemasok yang tercantum dalam GridView di halaman web "master" dan produk terkait yang tercantum di halaman "detail". Setiap baris pemasok di halaman web master berisi tautan ke halaman detail yang melewati nilai baris SupplierID . Tautan khusus baris tersebut dapat dengan mudah ditambahkan menggunakan HyperLinkField GridView.

Untuk mendapatkan produk di halaman detail dari pemasok yang ditentukan, dilakukan dengan memanggil metode dari kelas ProductsBLLGetProductsBySupplierID(supplierID). Nilai supplierID parameter ditentukan secara deklaratif menggunakan querystring sebagai sumber parameter. Kami juga melihat cara menampilkan detail pemasok di halaman detail menggunakan FormView.

Tutorial kami berikutnya adalah yang terakhir dalam seri tentang laporan master/detail. Kita akan melihat cara menampilkan daftar produk di GridView di mana setiap baris memiliki tombol Pilih. Mengklik tombol Pilih akan menampilkan detail produk tersebut dalam kontrol DetailsView pada halaman yang sama.

Selamat Pemrograman!

Tentang Penulis

Scott Mitchell, penulis tujuh buku ASP/ASP.NET dan pendiri 4GuysFromRolla.com, telah bekerja sama dengan teknologi Microsoft Web sejak 1998. Scott bekerja sebagai konsultan, pelatih, dan penulis independen. Buku terbarunya adalah Sams Teach Yourself ASP.NET 2.0 dalam 24 Jam. Dia dapat dijangkau di mitchell@4GuysFromRolla.com.

Ucapan terima kasih khusus kepada

Seri tutorial ini ditinjau oleh banyak peninjau yang bermanfaat. Peninjau utama untuk tutorial ini adalah Hilton Giesenow. Tertarik untuk meninjau artikel MSDN saya yang akan datang? Jika demikian, hubungi saya di mitchell@4GuysFromRolla.com.

SebelumnyaBerikutnya