Menambahkan Kolom GridView dengan Tombol Pilihan (C#)

2023-07-13

Tutorial ini melihat cara menambahkan kolom tombol radio ke kontrol GridView untuk memberi pengguna cara yang lebih intuitif untuk memilih satu baris GridView.

Pendahuluan

Kontrol GridView menawarkan banyak fungsionalitas bawaan. Ini termasuk sejumlah bidang yang berbeda untuk menampilkan teks, gambar, hyperlink, dan tombol. Ini mendukung templat untuk penyesuaian lebih lanjut. Dengan beberapa klik mouse, dimungkinkan untuk membuat GridView di mana setiap baris dapat dipilih melalui tombol, atau untuk mengaktifkan kemampuan pengeditan atau penghapusan. Terlepas dari banyaknya fitur yang disediakan, sering kali akan ada situasi di mana fitur tambahan yang tidak didukung perlu ditambahkan. Dalam tutorial ini dan dua berikutnya kita akan memeriksa cara meningkatkan fungsionalitas GridView untuk menyertakan fitur tambahan.

Tutorial ini dan yang berikutnya berfokus pada peningkatan proses pemilihan baris. Seperti yang diperiksa dalam Master/Detail Menggunakan Master GridView yang Dapat Dipilih dengan Detail DetailView, kita dapat menambahkan CommandField ke GridView yang menyertakan tombol Pilih. Saat diklik, postback terjadi sehingga properti GridView s SelectedIndex diperbarui ke indeks baris yang tombol Pilih-nya telah diklik. Dalam tutorial Master/Detail Menggunakan Master GridView yang Dapat Dipilih dengan Detail DetailView , kami melihat cara menggunakan fitur ini untuk menampilkan detail untuk baris GridView yang dipilih.

Meskipun tombol Pilih berfungsi dalam banyak situasi, tombol tersebut mungkin tidak berfungsi juga untuk orang lain. Daripada menggunakan tombol, dua elemen antarmuka pengguna lainnya umumnya digunakan untuk pemilihan: tombol radio dan kotak centang. Kita dapat menambah GridView sehingga alih-alih tombol Pilih, setiap baris berisi tombol radio atau kotak centang. Dalam skenario di mana pengguna hanya dapat memilih salah satu rekaman GridView, tombol radio mungkin lebih disukai daripada tombol Pilih. Dalam situasi di mana pengguna berpotensi memilih beberapa rekaman seperti di aplikasi email berbasis web, di mana pengguna mungkin ingin memilih beberapa pesan untuk menghapus kotak centang menawarkan fungsionalitas yang tidak tersedia dari tombol Pilih atau antarmuka pengguna tombol radio.

Tutorial ini melihat cara menambahkan kolom tombol radio ke GridView. Tutorial berikutnya menjelajahi penggunaan kotak centang.

Langkah 1: Membuat dan Meningkatkan Halaman Web GridView

Sebelum kita mulai meningkatkan GridView untuk menyertakan kolom tombol radio, mari kita luangkan waktu sejenak terlebih dahulu untuk membuat halaman ASP.NET dalam proyek situs web kita yang akan kita butuhkan untuk tutorial ini dan dua berikutnya. Mulailah dengan menambahkan folder baru bernama EnhancedGridView. Selanjutnya, tambahkan halaman ASP.NET berikut ke folder tersebut Site.master , pastikan untuk mengaitkan setiap halaman dengan halaman master:

Default.aspx
RadioButtonField.aspx
CheckBoxField.aspx
InsertThroughFooter.aspx

Menambahkan Halaman ASP.NET untuk Tutorial SqlDataSource-Related

Gambar 1: Tambahkan Halaman ASP.NET untuk Tutorial SqlDataSource-Related

Seperti di folder lain, Default.aspx di EnhancedGridView folder akan mencantumkan tutorial di bagiannya. Ingat bahwa SectionLevelTutorialListing.ascx Kontrol Pengguna menyediakan fungsionalitas ini. Oleh karena itu, tambahkan Kontrol Pengguna ini ke Default.aspx dengan menyeretnya dari Penjelajah Solusi ke tampilan Desain halaman.

Gambar 2: Tambahkan SectionLevelTutorialListing.ascx Kontrol Pengguna ke Default.aspx (Klik untuk melihat gambar ukuran penuh)

Terakhir, tambahkan keempat halaman ini sebagai entri ke Web.sitemap file. Secara khusus, tambahkan markup berikut setelah Menggunakan Kontrol SqlDataSource <siteMapNode>.

<siteMapNode 
    title="Enhancing the GridView" 
    url="~/EnhancedGridView/Default.aspx" 
    description="Augment the user experience of the GridView control.">
    <siteMapNode 
        url="~/EnhancedGridView/RadioButtonField.aspx" 
        title="Selection via a Radio Button Column" 
        description="Explore how to add a column of radio buttons in the GridView." />
    <siteMapNode 
        url="~/EnhancedGridView/CheckBoxField.aspx" 
        title="Selection via a Checkbox Column" 
        description="Select multiple records in the GridView by using a column of 
            checkboxes." />
    <siteMapNode 
        url="~/EnhancedGridView/InsertThroughFooter.aspx" 
        title="Add New Records through the Footer" 
        description="Learn how to allow users to add new records through the 
            GridView's footer." />
</siteMapNode>

Setelah memperbarui Web.sitemap, luangkan waktu sejenak untuk melihat situs web tutorial melalui browser. Menu di sebelah kiri sekarang menyertakan item untuk tutorial pengeditan, penyisipan, dan penghapusan.

Peta Situs Sekarang Menyertakan Entri untuk Meningkatkan Tutorial GridView

Gambar 3: Peta Situs Sekarang Menyertakan Entri untuk Meningkatkan Tutorial GridView

Langkah 2: Menampilkan Pemasok dalam GridView

Untuk tutorial ini mari kita buat GridView yang mencantumkan pemasok dari AS, dengan setiap baris GridView menyediakan tombol radio. Setelah memilih pemasok melalui tombol radio, pengguna dapat melihat produk pemasok dengan mengklik tombol . Meskipun tugas ini mungkin terdengar sepele, ada sejumlah nuansa yang membuatnya sangat rumit. Sebelum kita mempelajari seluk-beluk ini, mari kita terlebih dahulu mendapatkan GridView yang mencantumkan pemasok.

Mulai dengan membuka halaman RadioButtonField.aspx pada folder EnhancedGridView dengan menyeret GridView dari Kotak Alat ke Desainer. Atur GridView ke IDSuppliers dan, dari tag pintarnya, pilih untuk membuat sumber data baru. Secara khusus, buat ObjectDataSource bernama SuppliersDataSource yang menarik datanya dari SuppliersBLL objek.

Gambar 4: Buat ObjectDataSource Baru Bernama SuppliersDataSource (Klik untuk melihat gambar ukuran penuh)

Gambar 5: Konfigurasikan ObjectDataSource untuk Menggunakan SuppliersBLL Kelas (Klik untuk melihat gambar ukuran penuh)

Karena kami hanya ingin mencantumkan pemasok tersebut di AS, pilih GetSuppliersByCountry(country) metode dari daftar drop-down di tab SELECT.

Gambar 6: Konfigurasikan ObjectDataSource untuk Menggunakan SuppliersBLL Kelas (Klik untuk melihat gambar ukuran penuh)

Dari tab PERBARUI, pilih opsi (Tidak Ada) dan klik Selanjutnya.

Gambar 7: Konfigurasikan ObjectDataSource untuk Menggunakan SuppliersBLL Kelas (Klik untuk melihat gambar ukuran penuh)

Karena metode GetSuppliersByCountry(country) menerima parameter, wizard konfigurasi sumber data meminta kita untuk menyebutkan sumber dari parameter tersebut. Untuk menentukan nilai yang dikodekan secara permanen ( AS, dalam contoh ini), biarkan daftar drop-down Sumber parameter diatur ke Tidak Ada dan masukkan nilai default di kotak teks. Klik Selesai untuk menyelesaikan wizard.

Gambar 8: Gunakan AS sebagai Nilai Default untuk country Parameter (Klik untuk melihat gambar ukuran penuh)

Setelah menyelesaikan wizard, GridView akan menyertakan BoundField untuk setiap kolom data pemasok. Hapus semua kecuali CompanyName, City, dan Country BoundFields, dan ganti nama properti CompanyName BoundFields HeaderText menjadi Pemasok. Setelah melakukannya, sintaks deklaratif GridView dan ObjectDataSource akan terlihat mirip dengan yang berikut ini.

<asp:GridView ID="Suppliers" runat="server" AutoGenerateColumns="False"
    DataKeyNames="SupplierID" DataSourceID="SuppliersDataSource" 
    EnableViewState="False">
    <Columns>
        <asp:BoundField DataField="CompanyName" HeaderText="Supplier" 
            SortExpression="CompanyName" />
        <asp:BoundField DataField="City" HeaderText="City" 
            SortExpression="City" />
        <asp:BoundField DataField="Country" HeaderText="Country" 
            SortExpression="Country" />
    </Columns>
</asp:GridView>
<asp:ObjectDataSource ID="SuppliersDataSource" runat="server" 
    OldValuesParameterFormatString="original_{0}"
    SelectMethod="GetSuppliersByCountry" TypeName="SuppliersBLL">
    <SelectParameters>
        <asp:Parameter DefaultValue="USA" Name="country" Type="String" />
    </SelectParameters>
</asp:ObjectDataSource>

Untuk tutorial ini, mari kita izinkan pengguna untuk melihat produk pemasok yang dipilih di halaman yang sama dengan daftar pemasok, atau di halaman yang berbeda. Untuk mengakomodasi ini, tambahkan dua kontrol Tombol Web ke halaman. Saya telah mengatur ID dari kedua Tombol ini ke ListProducts dan SendToProducts, dengan gagasan bahwa ketika ListProducts diklik postback akan terjadi dan produk pemasok yang dipilih akan tercantum di halaman yang sama, tetapi ketika SendToProducts diklik, pengguna akan dicocokkan ke halaman lain yang mencantumkan produk.

Gambar 9 menunjukkan Suppliers GridView dan dua kontrol tombol web saat dilihat melalui browser.

Gambar 9: Pemasok dari AS Memiliki Nama, Kota, dan Informasi Negara Yang Tercantum (Klik untuk melihat gambar ukuran penuh)

Langkah 3: Menambahkan Kolom Tombol Radio

Pada titik Suppliers ini, GridView memiliki tiga BoundFields yang menampilkan nama perusahaan, kota, dan negara setiap pemasok di AS. Namun, masih kurang kolom tombol radio. Sayangnya, GridView tidak menyertakan RadioButtonField bawaan; kalau ada, kita bisa menambahkannya ke grid dan selesai. Sebagai gantinya, kita dapat menambahkan TemplateField dan mengonfigurasinya ItemTemplate untuk merender tombol radio, menghasilkan tombol radio untuk setiap baris GridView.

Awalnya, kita mungkin berasumsi bahwa antarmuka pengguna yang diinginkan dapat diimplementasikan dengan menambahkan kontrol RadioButton Web ke ItemTemplate TemplateField. Meskipun ini memang akan menambahkan satu tombol radio ke setiap baris GridView, tombol radio tidak dapat dikelompokkan dan karenanya tidak saling eksklusif. Artinya, pengguna akhir dapat memilih beberapa tombol radio secara bersamaan dari GridView.

Meskipun menggunakan TemplateField dari kontrol Web RadioButton tidak menawarkan fungsionalitas yang kita butuhkan, mari kita terapkan pendekatan ini, karena ada baiknya untuk mengeksplorasi mengapa tombol radio yang dihasilkan tidak dikelompokkan. Mulailah dengan menambahkan TemplateField ke GridView Pemasok, menjadikannya bidang paling kiri. Selanjutnya, dari tag pintar GridView, klik tautan Edit Templates dan seret kontrol RadioButton Web dari Kotak Alat ke dalam TemplateField ItemTemplate (lihat Gambar 10). Atur properti RadioButton s ID ke RowSelector dan GroupName properti ke SuppliersGroup.

Gambar 10: Tambahkan RadioButton Web Control ke ItemTemplate (Klik untuk melihat gambar ukuran penuh)

Setelah membuat penambahan ini melalui Perancang, markup GridView Anda akan terlihat mirip dengan yang berikut ini:

<asp:GridView ID="Suppliers" runat="server" AutoGenerateColumns="False"
    DataKeyNames="SupplierID" DataSourceID="SuppliersDataSource" 
    EnableViewState="False">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:RadioButton ID="RowSelector" runat="server" 
                    GroupName="SuppliersGroup" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="CompanyName" HeaderText="Supplier" 
            SortExpression="CompanyName" />
        <asp:BoundField DataField="City" HeaderText="City" 
            SortExpression="City" />
        <asp:BoundField DataField="Country" HeaderText="Country" 
            SortExpression="Country" />
    </Columns>
</asp:GridView>

Properti RadioButton GroupName digunakan untuk mengelompokkan serangkaian tombol radio. Semua kontrol RadioButton dengan nilai yang sama GroupName dianggap dikelompokkan; hanya satu tombol radio yang dapat dipilih dari grup pada satu waktu. Properti GroupName menentukan nilai atribut name untuk tombol radio yang telah dirender. Browser memeriksa atribut tombol name radio untuk menentukan pengelompokan tombol radio.

Dengan kontrol RadioButton Web ditambahkan ke ItemTemplate, kunjungi halaman ini melalui browser dan klik tombol radio di baris-baris grid. Perhatikan bagaimana tombol radio tidak dikelompokkan, sehingga memungkinkan untuk memilih semua baris, seperti yang ditunjukkan Gambar 11.

Gambar 11: Tombol Radio GridView tidak Dikelompokkan (Klik untuk melihat gambar ukuran penuh)

Alasan tombol radio tidak dikelompokkan adalah karena atribut name yang dirender berbeda, walaupun pengaturan propertinya sama GroupName. Untuk melihat perbedaan ini, lakukan Tampilan/Sumber dari browser dan periksa markup tombol radio:

<input id="ctl00_MainContent_Suppliers_ctl02_RowSelector" 
    name="ctl00$MainContent$Suppliers$ctl02$SuppliersGroup" 
    type="radio" value="RowSelector" />
<input id="ctl00_MainContent_Suppliers_ctl03_RowSelector" 
    name="ctl00$MainContent$Suppliers$ctl03$SuppliersGroup" 
    type="radio" value="RowSelector" />
<input id="ctl00_MainContent_Suppliers_ctl04_RowSelector" 
    name="ctl00$MainContent$Suppliers$ctl04$SuppliersGroup" 
    type="radio" value="RowSelector" />
<input id="ctl00_MainContent_Suppliers_ctl05_RowSelector" 
    name="ctl00$MainContent$Suppliers$ctl05$SuppliersGroup" 
    type="radio" value="RowSelector" />

Perhatikan bagaimana atribut name dan id bukanlah nilai yang persis seperti yang ditentukan di jendela Properti, melainkan diawali dengan beberapa nilai lain ID. Nilai tambahan ID yang ditambahkan ke bagian depan atribut yang dirender id dan name adalah ID dari tombol radio yang mengontrol induk GridViewRow yaitu ID, kontrol GridView ID, kontrol Konten ID, dan kontrol Formulir Web ID. Ini ID ditambahkan sehingga setiap kontrol Web yang dirender di GridView memiliki nilai id dan name unik.

Setiap kontrol yang dirender membutuhkan name dan id yang berbeda karena inilah cara browser mengidentifikasi secara unik setiap kontrol di sisi klien dan bagaimana browser mengidentifikasi kepada server web tindakan atau perubahan yang terjadi saat postback. Misalnya, bayangkan bahwa kami ingin menjalankan beberapa kode sisi server setiap kali status tercentang dari RadioButton diubah. Kita bisa mencapai ini dengan mengatur properti RadioButton AutoPostBack ke true dan membuat penanganan kejadian untuk CheckChanged. Namun, jika nilai yang dirender dari name dan id untuk semua tombol radio adalah sama, pada saat postback kami tidak dapat menentukan tombol RadioButton mana yang diklik.

Singkatnya adalah kita tidak dapat membuat kolom tombol radio di GridView menggunakan kontrol RadioButton Web. Sebaliknya, kita harus menggunakan teknik yang agak kuno untuk memastikan bahwa markup yang sesuai disisipkan ke setiap baris GridView.

Nota

Seperti kontrol RadioButton Web, kontrol tombol radio HTML, ketika ditambahkan ke templat, akan menyertakan atribut unik name, yang membuat tombol radio dalam kisi tidak dikelompokkan. Jika Anda tidak terbiasa dengan kontrol HTML, jangan ragu untuk mengabaikan catatan ini, karena kontrol HTML jarang digunakan, terutama di ASP.NET 2.0. Tetapi jika Anda tertarik untuk mempelajari lebih lanjut, lihat Entri blog K. Scott Allen Kontrol Web dan Kontrol HTML.

Menggunakan Literal Control untuk Menerapkan Markup Tombol Radio

Untuk mengelompokkan semua tombol radio dengan benar dalam GridView, kita perlu memasukkan markup tombol radio secara manual ke dalam ItemTemplate. Setiap tombol radio membutuhkan atribut yang sama name , tetapi harus memiliki atribut unik id (jika kita ingin mengakses tombol radio melalui skrip sisi klien). Setelah pengguna memilih tombol radio dan memposting kembali halaman, browser akan mengirim kembali nilai atribut tombol radio yang value dipilih. Oleh karena itu, setiap tombol radio akan membutuhkan atribut unik value . Akhirnya, pada postback kita perlu memastikan untuk menambahkan checked atribut ke satu tombol radio yang dipilih, jika tidak setelah pengguna membuat pilihan dan memposting kembali, tombol radio akan kembali ke status default mereka (semua tidak dipilih).

Ada dua pendekatan yang dapat diambil untuk menyuntikkan markup tingkat rendah ke dalam templat. Salah satunya adalah melakukan campuran markup dan panggilan ke metode pemformatan yang ditentukan dalam kelas code-behind. Teknik ini pertama kali dibahas dalam tutorial Menggunakan TemplateFields dalam GridView Control . Dalam kasus kami, mungkin terlihat seperti:

<input type="radio" id='<%# GetUniqueRadioButtonID(...) %>' 
    name='SuppliersGroup' value='<%# GetRadioButtonValue(...) %>' ... />

Di sini, GetUniqueRadioButton dan GetRadioButtonValue akan menjadi metode yang ditentukan dalam kelas code-behind yang mengembalikan nilai yang sesuai id dan value atribut untuk setiap tombol radio. Pendekatan ini berfungsi dengan baik untuk menetapkan atribut id dan value, tetapi menjadi kurang efektif ketika perlu menentukan nilai atribut checked karena sintaks pengikatan data hanya dijalankan saat data pertama kali terikat ke GridView. Oleh karena itu, jika status tampilan GridView diaktifkan, metode pemformatan hanya akan dipanggil ketika halaman pertama kali dimuat (atau ketika GridView diikat kembali secara eksplisit ke sumber data), dan oleh karena itu pada postback, fungsi yang mengatur atribut checked tidak akan dipanggil. Ini adalah masalah yang agak halus dan sedikit di luar cakupan artikel ini, jadi saya akan berhenti di sini. Namun, saya mendorong Anda untuk mencoba menggunakan pendekatan di atas dan mengerjakannya hingga titik di mana Anda akan terjebak. Meskipun latihan seperti itu tidak akan membuat Anda lebih dekat ke versi yang berfungsi, itu akan membantu menumbuhkan pemahaman yang lebih dalam tentang GridView dan siklus hidup pengikatan data.

Pendekatan lain untuk menyuntikkan markup kustom tingkat rendah dalam templat dan pendekatan yang akan kita gunakan untuk tutorial ini adalah menambahkan kontrol Literal ke templat. Kemudian, di event handler GridView RowCreated atau RowDataBound, kontrol Literal dapat diakses melalui kode dan propertinya Text diatur ke markup untuk dipancarkan.

Mulailah dengan menghapus RadioButton dari TemplateFields ItemTemplate, menggantinya dengan kontrol Literal. Atur Kontrol literal ID ke RadioButtonMarkup.

Gambar 12: Tambahkan Kontrol Literal ke ItemTemplate (Klik untuk melihat gambar ukuran penuh)

Selanjutnya, buat penanganan aktivitas untuk peristiwa GridView RowCreated . Peristiwa ini RowCreated diaktifkan sekali untuk setiap baris yang ditambahkan, apakah data sedang direbound ke GridView atau tidak. Itu berarti bahwa bahkan pada suatu postback ketika data dimuat ulang dari ViewState, RowCreated peristiwa masih diaktifkan dan itulah alasan kami menggunakannya daripada RowDataBound (yang hanya diaktifkan ketika data secara eksplisit terikat ke kontrol data Web).

Dalam penanganan aktivitas ini, kita hanya ingin melanjutkan jika kita berurusan dengan baris data. Untuk setiap baris data, kami ingin mereferensikan kontrol RadioButtonMarkup Literal melalui pemrograman dan mengatur properti Text-nya ke markup yang akan dipancarkan. Seperti yang ditunjukkan oleh kode berikut, markup yang dipancarkan membuat tombol radio yang atributnya name diatur ke SuppliersGroup, yang atributnya id diatur ke RowSelectorX, di mana X adalah indeks baris GridView, dan yang atributnya value diatur ke indeks baris GridView.

protected void Suppliers_RowCreated(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        // Grab a reference to the Literal control
        Literal output = (Literal)e.Row.FindControl("RadioButtonMarkup");
        // Output the markup except for the "checked" attribute
        output.Text = string.Format(
            @"<input type="radio" name="SuppliersGroup" " +
            @"id="RowSelector{0}" value="{0}" />", e.Row.RowIndex);
    }
}

Ketika baris GridView dipilih dan terjadi postback, kami tertarik dengan SupplierID pemasok yang dipilih. Oleh karena itu, orang mungkin berpikir bahwa nilai setiap tombol radio harus aktual SupplierID (daripada indeks baris GridView). Meskipun ini mungkin bekerja dalam keadaan tertentu, itu akan menjadi risiko keamanan untuk menerima dan memproses SupplierID secara membabi buta. GridView kami, misalnya, hanya mencantumkan pemasok tersebut di AS. Namun, jika SupplierID diteruskan langsung dari tombol radio, apa yang bisa menghentikan pengguna nakal memanipulasi nilai yang SupplierID dikirim kembali pada postback? Dengan menggunakan indeks baris sebagai value, lalu mendapatkan SupplierID pada postback dari koleksi DataKeys, kami dapat memastikan bahwa pengguna hanya menggunakan salah satu SupplierID nilai yang terkait dengan salah satu baris GridView.

Setelah menambahkan kode penanganan aktivitas ini, luangkan waktu satu menit untuk menguji halaman di browser. Pertama, perhatikan bahwa hanya satu tombol radio di grid yang dapat dipilih dalam satu waktu. Namun, ketika memilih tombol radio dan mengklik salah satu tombol, postback terjadi dan tombol radio semuanya kembali ke status awal mereka (yaitu, pada postback, tombol radio yang dipilih tidak lagi dipilih). Untuk memperbaiki ini, kita perlu memperluas penanganan kejadian RowCreated agar dapat memeriksa indeks tombol radio yang dipilih yang dikirim dari postback dan menambahkan atribut checked="checked" ke markup yang dipancarkan apabila indeks baris sesuai.

Ketika pengiriman ulang terjadi, browser mengirim kembali name dan value dari tombol radio terpilih. Nilai dapat diambil secara terprogram menggunakan Request.Form["name"]. PropertiRequest.Form menyediakan NameValueCollection yang mewakili variabel formulir. Variabel formulir adalah nama dan nilai bidang formulir di halaman web, dan dikirim kembali oleh browser web setiap kali postback terjadi. Karena atribut tombol radio yang dirender name di GridView adalah SuppliersGroup, ketika halaman web diposting kembali browser akan mengirim SuppliersGroup=valueOfSelectedRadioButton kembali ke server web (bersama dengan bidang formulir lainnya). Informasi ini kemudian dapat diakses dari Request.Form properti menggunakan: Request.Form["SuppliersGroup"].

Karena kita perlu menentukan indeks tombol radio yang dipilih tidak hanya di penanganan kejadian RowCreated, tetapi juga di penanganan kejadian Click untuk kontrol tombol web, kita tambahkan SuppliersSelectedIndex properti ke kelas code-behind yang mengembalikan -1 jika tidak ada tombol radio yang dipilih dan indeks yang dipilih jika ada salah satu tombol radio yang dipilih.

private int SuppliersSelectedIndex
{
    get
    {
        if (string.IsNullOrEmpty(Request.Form["SuppliersGroup"]))
            return -1;
        else
            return Convert.ToInt32(Request.Form["SuppliersGroup"]);
    }
}

Dengan menambahkan properti ini, kita tahu untuk menambahkan checked="checked" markup di pengelola acara RowCreated ketika SuppliersSelectedIndex sama dengan e.Row.RowIndex. Perbarui penanganan aktivitas untuk menyertakan logika ini:

protected void Suppliers_RowCreated(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        // Grab a reference to the Literal control
        Literal output = (Literal)e.Row.FindControl("RadioButtonMarkup");
        // Output the markup except for the "checked" attribute
        output.Text = string.Format(
            @"<input type="radio" name="SuppliersGroup" " +
            @"id="RowSelector{0}" value="{0}"", e.Row.RowIndex);
        // See if we need to add the "checked" attribute
        if (SuppliersSelectedIndex == e.Row.RowIndex)
            output.Text += @" checked="checked"";
        // Add the closing tag
        output.Text += " />";
    }
}

Dengan perubahan ini, tombol radio yang dipilih tetap dipilih setelah postback. Sekarang setelah kita memiliki kemampuan untuk menentukan tombol radio apa yang dipilih, kita dapat mengubah perilaku sehingga ketika halaman pertama kali dikunjungi, tombol radio baris GridView pertama dipilih (daripada tidak memiliki tombol radio yang dipilih secara default, yang merupakan perilaku saat ini). Agar tombol radio pertama dipilih secara default, cukup ubah if (SuppliersSelectedIndex == e.Row.RowIndex) pernyataan menjadi berikut: if (SuppliersSelectedIndex == e.Row.RowIndex || (!Page.IsPostBack && e.Row.RowIndex == 0)).

Pada titik ini, kami telah menambahkan sebuah kolom yang terdiri dari tombol radio yang dikelompokkan ke dalam GridView, yang memungkinkan untuk memilih satu baris GridView dan mengingat pilihan tersebut pada setiap postback. Langkah selanjutnya adalah menampilkan produk yang disediakan oleh pemasok yang dipilih. Di Langkah 4, akan kita pelajari cara mengalihkan pengguna ke halaman lain dengan mengirimkan SupplierID yang telah dipilih. Di Langkah 5, kita akan melihat cara menampilkan produk pemasok yang dipilih di GridView di halaman yang sama.

Nota

Daripada menggunakan TemplateField (fokus langkah 3 yang panjang ini), kita dapat membuat kelas kustom DataControlField yang merender antarmuka dan fungsionalitas pengguna yang sesuai. Kelas DataControlField adalah kelas dasar tempat bidang BoundField, CheckBoxField, TemplateField, dan Bidang GridView dan DetailsView bawaan lainnya berasal. Membuat kelas kustom DataControlField berarti bahwa kolom tombol radio dapat ditambahkan hanya menggunakan sintaks deklaratif, dan juga akan membuat replikasi fungsionalitas di halaman web lain dan aplikasi web lainnya secara signifikan lebih mudah.

Namun, jika Anda pernah membuat kontrol kustom yang dikompilasi dalam ASP.NET, Anda tahu bahwa melakukannya membutuhkan usaha yang cukup besar dan membawa sejumlah nuansa dan kasus janggal yang harus ditangani dengan hati-hati. Oleh karena itu, kita akan menunda implementasi kolom tombol radio sebagai kelas kustom DataControlField dan tetap menggunakan opsi TemplateField. Mungkin kita akan memiliki kesempatan untuk menjelajahi membuat, menggunakan, dan menyebarkan kelas kustom DataControlField dalam tutorial di masa mendatang!

Langkah 4: Menampilkan Produk Pemasok yang Dipilih di Halaman Terpisah

Setelah pengguna memilih baris GridView, kita perlu menampilkan produk pemasok yang dipilih. Dalam beberapa keadaan, kita mungkin ingin menampilkan produk-produk ini di halaman terpisah, di halaman lain kita mungkin lebih suka melakukannya di halaman yang sama. Mari kita periksa terlebih dahulu cara menampilkan produk di halaman terpisah; di Langkah 5 kita akan melihat menambahkan GridView untuk RadioButtonField.aspx menampilkan produk pemasok yang dipilih.

Saat ini ada dua Tombol kontrol Web di halaman ListProducts dan SendToProducts. Ketika Tombol SendToProducts diklik, kami ingin mengirim pengguna ke ~/Filtering/ProductsForSupplierDetails.aspx. Halaman ini dibuat dalam tutorial Pemfilteran Master/Detail Di Dua Halaman dan menampilkan produk untuk pemasok yang SupplierID diteruskan melalui bidang querystring bernama SupplierID.

Untuk menyediakan fungsionalitas ini, buat penanganan aktivitas untuk SendToProducts peristiwa Tombol Click . Di Langkah 3 kami menambahkan SuppliersSelectedIndex properti , yang mengembalikan indeks baris yang tombol radionya dipilih. Yang sesuai SupplierID dapat diambil dari koleksi DataKeys pada GridView dan pengguna kemudian dapat dikirim ke ~/Filtering/ProductsForSupplierDetails.aspx?SupplierID=SupplierID menggunakan Response.Redirect("url").

protected void SendToProducts_Click(object sender, EventArgs e)
{
    // Send the user to ~/Filtering/ProductsForSupplierDetails.aspx
    int supplierID = 
        Convert.ToInt32(Suppliers.DataKeys[SuppliersSelectedIndex].Value);
    Response.Redirect(
        "~/Filtering/ProductsForSupplierDetails.aspx?SupplierID=" 
        + supplierID);
    }
}

Kode ini bekerja dengan luar biasa selama salah satu tombol radio dipilih dari GridView. Jika pada awalnya GridView tidak memiliki tombol radio yang dipilih dan pengguna mengklik tombol SendToProducts, maka SuppliersSelectedIndex akan menjadi -1, yang akan menyebabkan pengecualian dibuat karena -1 berada di luar rentang indeks dari koleksi DataKeys. Namun, ini bukan masalah, jika Anda memutuskan untuk memperbarui penangan kejadian RowCreated seperti yang dibahas di Langkah 3 agar tombol radio pertama di GridView dipilih secara default.

Untuk mengakomodasi nilai SuppliersSelectedIndex-1, tambahkan kontrol web Label ke halaman di atas GridView. Atur propertinya ID ke ChooseSupplierMsg, propertinya CssClass ke Warning, propertinya EnableViewState dan Visible ke false, dan propertinya Text ke Silakan pilih pemasok dari kisi. Kelas CSS Warning menampilkan teks dalam font merah, miring, tebal, besar dan didefinisikan dalam Styles.css. Dengan mengatur properti EnableViewState dan Visible ke false, Label tidak dirender kecuali untuk postback di mana properti kontrol secara programatis diatur ke Visible.

Gambar 13: Tambahkan Kontrol Web Label di Atas GridView (Klik untuk melihat gambar ukuran penuh)

Selanjutnya, tingkatkan pengendali acara Click untuk menampilkan label ChooseSupplierMsg jika SuppliersSelectedIndex kurang dari nol, dan alihkan pengguna ke ~/Filtering/ProductsForSupplierDetails.aspx?SupplierID=SupplierID sebaliknya.

protected void SendToProducts_Click(object sender, EventArgs e)
{
    // make sure one of the radio buttons has been selected
    if (SuppliersSelectedIndex < 0)
        ChooseSupplierMsg.Visible = true;
    else
    {
        // Send the user to ~/Filtering/ProductsForSupplierDetails.aspx
        int supplierID = 
            Convert.ToInt32(Suppliers.DataKeys[SuppliersSelectedIndex].Value);
        Response.Redirect(
            "~/Filtering/ProductsForSupplierDetails.aspx?SupplierID=" 
            + supplierID);
    }
}

Kunjungi halaman di browser dan klik tombol SendToProducts sebelum memilih pemasok dari GridView. Seperti yang ditunjukkan Gambar 14, ini menampilkan ChooseSupplierMsg label. Selanjutnya, pilih pemasok dan klik tombol SendToProducts . Ini akan mengantar Anda ke halaman yang mencantumkan produk yang disediakan oleh pemasok yang dipilih. Gambar 15 menunjukkan halaman ProductsForSupplierDetails.aspx ketika Bigfoot Breweries, sebagai pemasok, dipilih.

Gambar 14: ChooseSupplierMsg Label Ditampilkan jika Tidak Ada Pemasok yang Dipilih (Klik untuk melihat gambar ukuran penuh)

Gambar 15: Produk Pemasok yang Dipilih Ditampilkan di ProductsForSupplierDetails.aspx (Klik untuk melihat gambar ukuran penuh)

Langkah 5: Menampilkan Produk Pemasok yang Dipilih di Halaman yang Sama

Di Langkah 4 kami melihat cara mengirim pengguna ke halaman web lain untuk menampilkan produk pemasok yang dipilih. Atau, produk pemasok yang dipilih dapat ditampilkan di halaman yang sama. Untuk mengilustrasikan hal ini, kita akan menambahkan GridView lain untuk RadioButtonField.aspx menampilkan produk pemasok yang dipilih.

Karena kami hanya ingin GridView produk ini ditampilkan setelah pemasok dipilih, tambahkan kontrol Web Panel di bawah Suppliers GridView, atur propertinya ID ke ProductsBySupplierPanel dan propertinya Visible ke false. Dalam Panel, tambahkan teks Produk untuk Pemasok yang Dipilih, diikuti oleh GridView bernama ProductsBySupplier. Dari tag pintar GridView, pilih untuk mengikatnya ke ObjectDataSource baru bernama ProductsBySupplierDataSource.

Gambar 16: Ikat ProductsBySupplier GridView ke ObjectDataSource Baru (Klik untuk melihat gambar ukuran penuh)

Selanjutnya, konfigurasikan ObjectDataSource untuk menggunakan ProductsBLL kelas . Karena kami hanya ingin mengambil produk yang disediakan oleh pemasok yang dipilih, tentukan bahwa ObjectDataSource harus memanggil GetProductsBySupplierID(supplierID) metode untuk mengambil datanya. Pilih (Tidak Ada) dari daftar drop-down di tab PERBARUI, SISIPKAN, dan HAPUS.

Gambar 17: Konfigurasikan ObjectDataSource untuk Menggunakan GetProductsBySupplierID(supplierID) Metode (Klik untuk melihat gambar ukuran penuh)

Gambar 18: Atur Daftar Drop-Down ke (Tidak Ada) di Tab PERBARUI, SISIPKAN, dan HAPUS (Klik untuk melihat gambar ukuran penuh)

Setelah mengonfigurasi tab SELECT, UPDATE, INSERT, dan DELETE, klik Berikutnya. Karena metode GetProductsBySupplierID(supplierID) mengharapkan parameter input, wizard Buat Sumber Data meminta kami menentukan sumber untuk nilai parameter tersebut.

Kami memiliki beberapa opsi di sini dalam menentukan sumber nilai parameter. Kita dapat menggunakan objek Parameter bawaan dan dengan programatis menetapkan nilai properti SuppliersSelectedIndex ke properti DefaultValue milik Parameter di penanganan kejadian Selecting milik ObjectDataSource. Lihat kembali tutorial Pengaturan Nilai Parameter ObjectDataSource Secara Terprogram untuk penyegaran mengenai penetapan nilai parameter ObjectDataSource secara terprogram.

Atau, kita dapat menggunakan ControlParameter dan merujuk ke Suppliers properti GridView (SelectedValuelihat Gambar 19). Properti milik GridView mengembalikan nilai SelectedValue yang sesuai dengan properti DataKey. Agar opsi ini berfungsi, kita perlu mengatur properti GridView secara SelectedIndex terprogram ke baris yang dipilih saat tombol ListProducts diklik. Sebagai manfaat tambahan, dengan menetapkan SelectedIndex, rekaman yang dipilih akan menggunakan SelectedRowStyle yang telah ditentukan dalam DataWebControls Tema (dengan latar belakang kuning).

Gambar 19: Gunakan ControlParameter untuk Menentukan GridView s SelectedValue sebagai Sumber Parameter (Klik untuk melihat gambar ukuran penuh)

Setelah menyelesaikan wizard, Visual Studio akan secara otomatis menambahkan bidang untuk bidang data produk. Hapus semua kecuali ProductName, CategoryName, dan UnitPrice BoundFields, dan ubah properti HeaderText menjadi Produk, Kategori, dan Harga. Konfigurasikan UnitPrice BoundField sehingga nilainya diformat sebagai mata uang. Setelah membuat perubahan ini, markup deklaratif Panel, GridView, dan ObjectDataSource akan terlihat seperti berikut ini:

<asp:Panel runat="server" ID="ProductsBySupplierPanel" Visible="False">
    <h3>
        Products for the Selected Supplier</h3>
    <p>
        <asp:GridView ID="ProductsBySupplier" runat="server" 
            AutoGenerateColumns="False" DataKeyNames="ProductID"
            DataSourceID="ProductsBySupplierDataSource" EnableViewState="False">
            <Columns>
                <asp:BoundField DataField="ProductName" HeaderText="Product" 
                    SortExpression="ProductName" />
                <asp:BoundField DataField="CategoryName" HeaderText="Category" 
                    ReadOnly="True" SortExpression="CategoryName" />
                <asp:BoundField DataField="UnitPrice" DataFormatString="{0:c}" 
                    HeaderText="Price" HtmlEncode="False" 
                    SortExpression="UnitPrice" />
            </Columns>
        </asp:GridView>
        <asp:ObjectDataSource ID="ProductsBySupplierDataSource" runat="server" 
            OldValuesParameterFormatString="original_{0}"
            SelectMethod="GetProductsBySupplierID" TypeName="ProductsBLL">
            <SelectParameters>
                <asp:ControlParameter ControlID="Suppliers" Name="supplierID" 
                    PropertyName="SelectedValue" Type="Int32" />
            </SelectParameters>
        </asp:ObjectDataSource>
    </p>
</asp:Panel>

Untuk menyelesaikan latihan ini, kita perlu mengatur properti GridView s SelectedIndex ke SelectedSuppliersIndexProductsBySupplierPanel dan properti Visible Panel ke true ketika tombol ListProducts diklik. Untuk mencapai hal ini, buat penanganan aktivitas untuk ListProducts peristiwa kontrol Click Web Tombol dan tambahkan kode berikut:

protected void ListProducts_Click(object sender, EventArgs e)
{
    // make sure one of the radio buttons has been selected
    if (SuppliersSelectedIndex < 0)
    {
        ChooseSupplierMsg.Visible = true;
        ProductsBySupplierPanel.Visible = false;
    }
    else
    {
        // Set the GridView's SelectedIndex
        Suppliers.SelectedIndex = SuppliersSelectedIndex;
        // Show the ProductsBySupplierPanel panel
        ProductsBySupplierPanel.Visible = true;
    }
}

Jika pemasok belum dipilih dari GridView, ChooseSupplierMsg Label ditampilkan dan ProductsBySupplierPanel Panel tersembunyi. Jika tidak, ketika pemasok telah dipilih, ProductsBySupplierPanel akan ditampilkan dan properti GridView SelectedIndex diperbarui.

Gambar 20 menunjukkan hasilnya setelah pemasok Bigfoot Breweries dipilih dan tombol Tampilkan Produk di Halaman telah diklik.

Gambar 20: Produk yang Disediakan oleh Bigfoot Breweries Tercantum di Halaman yang Sama (Klik untuk melihat gambar ukuran penuh)

Ringkasan

Seperti yang dibahas dalam tutorial Master/Detail Menggunakan GridView Induk yang Dapat Dipilih dengan DetailView Detail, catatan dapat dipilih dari GridView menggunakan CommandField yang propertinya ShowSelectButton diatur ke true. Tetapi CommandField menampilkan tombolnya baik sebagai tombol tekan reguler, tautan, atau gambar. Antarmuka pengguna pilihan baris alternatif adalah menyediakan tombol radio atau kotak centang di setiap baris GridView. Dalam tutorial ini kami memeriksa cara menambahkan kolom tombol radio.

Sayangnya, menambahkan kolom tombol radio tidak mudah atau sederhana seperti yang diharapkan. Tidak ada RadioButtonField tertanam yang dapat ditambahkan dengan sekali klik tombol, dan menggunakan kontrol RadioButton Web dalam TemplateField memperkenalkan masalah tersendiri. Pada akhirnya, untuk menyediakan antarmuka seperti itu, kita harus membuat kelas khusus DataControlField atau melakukan penyuntikan HTML yang sesuai ke dalam TemplateField selama kejadian RowCreated.

Setelah menjelajahi cara menambahkan kolom tombol radio, mari kita alihkan perhatian kita untuk menambahkan kolom kotak centang. Dengan kolom kotak centang, pengguna dapat memilih satu atau beberapa baris GridView lalu melakukan beberapa operasi pada semua baris yang dipilih (seperti memilih sekumpulan email dari klien email berbasis web, lalu memilih untuk menghapus semua email yang dipilih). Dalam tutorial berikutnya kita akan melihat cara menambahkan kolom seperti itu.

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 David Suru. Tertarik untuk meninjau artikel MSDN saya yang akan datang? Jika demikian, hubungi saya di mitchell@4GuysFromRolla.com.

Depan

Bagikan melalui