Menyesuaikan Antarmuka Modifikasi Data (VB)

oleh Scott Mitchell

Unduh PDF

Dalam tutorial ini kita akan melihat cara menyesuaikan antarmuka GridView yang dapat diedit, dengan mengganti kontrol TextBox dan CheckBox standar dengan kontrol Web input alternatif.

Pendahuluan

Kontrol BoundFields dan CheckBoxFields yang digunakan oleh kontrol GridView dan DetailsView menyederhanakan proses memodifikasi data karena kemampuannya untuk merender antarmuka baca-saja, dapat diedit, dan dapat disisipkan. Antarmuka ini dapat dirender tanpa perlu menambahkan markup atau kode deklaratif tambahan. Namun, antarmuka BoundField dan CheckBoxField tidak memiliki penyesuaian yang sering diperlukan dalam skenario dunia nyata. Untuk menyesuaikan antarmuka yang dapat diedit atau disisipkan dalam GridView atau DetailsView, kita perlu menggunakan TemplateField.

Dalam tutorial sebelumnya kita melihat cara menyesuaikan antarmuka modifikasi data dengan menambahkan kontrol Web validasi. Dalam tutorial ini kita akan melihat cara menyesuaikan kontrol Web pengumpulan data aktual, mengganti kontrol TextBox dan CheckBox standar BoundField dan Kotak Centang dengan kontrol Web input alternatif. Secara khusus, kami akan membangun GridView yang dapat diedit yang memungkinkan nama, kategori, pemasok, dan status produk dihentikan untuk diperbarui. Saat mengedit baris tertentu, kategori dan bidang pemasok akan dirender sebagai DropDownLists, yang berisi serangkaian kategori dan pemasok yang tersedia untuk dipilih. Selain itu, kita akan mengganti CheckBoxField default CheckBox dengan kontrol RadioButtonList yang menawarkan dua opsi: "Aktif" dan "Dihentikan".

Gambar 1: Antarmuka Pengeditan GridView Mencakup DropDownList dan RadioButtons (Klik untuk melihat gambar ukuran penuh)

Langkah 1: Membuat Kelebihan Beban yang SesuaiUpdateProduct

Dalam tutorial ini kita akan membangun GridView yang dapat diedit yang mengizinkan pengeditan nama, kategori, pemasok, dan status produk yang dihentikan. Oleh karena itu, kita memerlukan UpdateProduct kelebihan beban yang menerima lima parameter input keempat nilai produk ini ditambah ProductID. Seperti pada kelebihan beban kami sebelumnya, yang satu ini akan:

1. Ambil informasi produk dari database untuk , yang ditentukan ProductID
2. ProductNamePerbarui bidang , CategoryID, SupplierID, dan Discontinued , dan
3. Kirim permintaan pembaruan ke DAL melalui metode TableAdapter Update() .

Untuk brevity, untuk kelebihan beban khusus ini, saya telah menghilangkan pemeriksaan aturan bisnis yang memastikan produk yang ditandai sebagai dihentikan bukan satu-satunya produk yang ditawarkan oleh pemasoknya. Jangan ragu untuk menambahkannya jika Anda mau, atau, idealnya, refaktor keluar logika ke metode terpisah.

Kode berikut menunjukkan kelebihan beban baru UpdateProduct di ProductsBLL kelas :

<System.ComponentModel.DataObjectMethodAttribute(System.ComponentModel.DataObjectMethodType.Update, False)>
Public Function UpdateProduct(
    ByVal productName As String, ByVal categoryID As Nullable(Of Integer), 
    ByVal supplierID As Nullable(Of Integer), ByVal discontinued As Boolean, 
    ByVal productID As Integer)
    As Boolean
    Dim products As Northwind.ProductsDataTable = Adapter.GetProductByProductID(productID)
    If products.Count = 0 Then
        Return False
    End If
    Dim product As Northwind.ProductsRow = products(0)
    product.ProductName = productName
    If Not supplierID.HasValue Then
        product.SetSupplierIDNull()
    Else
        product.SupplierID = supplierID.Value
    End If
    If Not categoryID.HasValue Then
        product.SetCategoryIDNull()
    Else
        product.CategoryID = categoryID.Value
    End If
    product.Discontinued = discontinued
    Dim rowsAffected As Integer = Adapter.Update(product)
    Return rowsAffected = 1
End Function

Langkah 2: Membuat GridView yang Dapat Diedit

UpdateProduct Dengan kelebihan beban yang ditambahkan, kami siap untuk membuat GridView yang dapat diedit. Buka halaman CustomizedUI.aspx di EditInsertDelete folder dan tambahkan kontrol GridView ke Perancang. Selanjutnya, buat ObjectDataSource baru dari tag pintar GridView. Konfigurasikan ObjectDataSource untuk mengambil informasi produk melalui ProductBLL metode kelas GetProducts() dan untuk memperbarui data produk menggunakan kelebihan beban yang UpdateProduct baru saja kami buat. Dari tab INSERT dan DELETE, pilih (Tidak Ada) dari daftar drop-down.

Gambar 2: Konfigurasikan ObjectDataSource untuk Menggunakan UpdateProduct Kelebihan Beban yang Baru Saja Dibuat (Klik untuk melihat gambar ukuran penuh)

Seperti yang telah kita lihat di seluruh tutorial modifikasi data, sintaks deklaratif untuk ObjectDataSource yang dibuat oleh Visual Studio menetapkan OldValuesParameterFormatString properti ke original_{0}. Ini, tentu saja, tidak akan berfungsi dengan Lapisan Logika Bisnis kami karena metode kami tidak mengharapkan nilai asli ProductID untuk diteruskan. Oleh karena itu, seperti yang telah kita lakukan dalam tutorial sebelumnya, luangkan waktu sejenak untuk menghapus penetapan properti ini dari sintaks deklaratif atau, sebagai gantinya, atur nilai properti ini ke {0}.

Setelah perubahan ini, markup deklaratif ObjectDataSource akan terlihat seperti berikut ini:

<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
    SelectMethod="GetProducts" TypeName="ProductsBLL"
    UpdateMethod="UpdateProduct">
    <UpdateParameters>
        <asp:Parameter Name="productName" Type="String" />
        <asp:Parameter Name="categoryID" Type="Int32" />
        <asp:Parameter Name="supplierID" Type="Int32" />
        <asp:Parameter Name="discontinued" Type="Boolean" />
        <asp:Parameter Name="productID" Type="Int32" />
    </UpdateParameters>
</asp:ObjectDataSource>

Perhatikan bahwa properti telah dihapus dan ada dalam koleksi untuk setiap parameter input yang OldValuesParameterFormatString diharapkan oleh kelebihan beban kamiParameter.UpdateParametersUpdateProduct

Meskipun ObjectDataSource dikonfigurasi untuk memperbarui hanya subset nilai produk, GridView saat ini menunjukkan semua bidang produk. Luangkan waktu sejenak untuk mengedit GridView sehingga:

• Ini hanya mencakup ProductName, SupplierName, CategoryName BoundFields dan Discontinued CheckBoxField
• Bidang CategoryName dan SupplierName yang akan muncul sebelumnya (di sebelah kiri) Discontinued CheckBoxField
• Properti CategoryName dan SupplierName BoundFields HeaderText masing-masing diatur ke "Kategori" dan "Pemasok",
• Dukungan pengeditan diaktifkan (centang kotak Aktifkan Pengeditan di tag pintar GridView)

Setelah perubahan ini, Perancang akan terlihat mirip dengan Gambar 3, dengan sintaks deklaratif GridView yang ditunjukkan di bawah ini.

Gambar 3: Hapus Bidang yang Tidak Diperlukan dari GridView (Klik untuk melihat gambar ukuran penuh)

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
    DataKeyNames="ProductID" DataSourceID="ObjectDataSource1">
    <Columns>
        <asp:BoundField DataField="ProductName"
           HeaderText="ProductName" SortExpression="ProductName" />
        <asp:BoundField DataField="CategoryName" HeaderText="Category"
           ReadOnly="True"
           SortExpression="CategoryName" />
        <asp:BoundField DataField="SupplierName" HeaderText="Supplier"
           ReadOnly="True"
           SortExpression="SupplierName" />
        <asp:CheckBoxField DataField="Discontinued"
           HeaderText="Discontinued" SortExpression="Discontinued" />
    </Columns>
</asp:GridView>

Pada titik ini perilaku baca-saja GridView selesai. Saat melihat data, setiap produk dirender sebagai baris di GridView, memperlihatkan nama, kategori, pemasok, dan status produk yang dihentikan.

Gambar 4: Antarmuka Baca-Saja GridView Selesai (Klik untuk melihat gambar ukuran penuh)

Catatan

Seperti yang dibahas dalam Tutorial Gambaran Umum Menyisipkan, Memperbarui, dan Menghapus Data, sangat penting bahwa status tampilan GridView diaktifkan (perilaku default). Jika Anda mengatur properti EnableViewStateGridView ke false , Anda berisiko memiliki pengguna bersamaan yang secara tidak sengaja menghapus atau mengedit rekaman.

Langkah 3: Menggunakan DropDownList untuk Kategori dan Antarmuka Pengeditan Pemasok

Ingat bahwa objek berisi ProductsRowproperti , CategoryID, CategoryName, dan SupplierID , yang menyediakan nilai ID kunci asing aktual dalam SupplierName tabel database dan nilai yang Products sesuai dalam Name tabel dan Categories .Suppliers Dan ProductRowCategoryIDSupplierID dapat dibaca dari dan ditulis ke, sementara CategoryName properti dan SupplierName ditandai baca-saja.

Karena status baca-saja dari CategoryName properti dan SupplierName , BoundFields yang sesuai telah mengatur properti mereka ReadOnly ke True, mencegah nilai-nilai ini dimodifikasi ketika baris diedit. Meskipun kita dapat mengatur ReadOnly properti ke False, merender CategoryName dan SupplierName BoundFields sebagai TextBoxes selama pengeditan, pendekatan seperti itu akan menghasilkan pengecualian ketika pengguna mencoba memperbarui produk karena tidak UpdateProduct ada kelebihan beban yang masuk CategoryName dan SupplierName input. Bahkan, kami tidak ingin membuat kelebihan beban seperti itu karena dua alasan:

• Tabel Products tidak memiliki SupplierName atau CategoryName bidang, tetapi SupplierID dan CategoryID. Oleh karena itu, kami ingin metode kami diteruskan nilai ID tertentu ini, bukan nilai tabel pencarian mereka.
• Mengharuskan pengguna untuk mengetikkan nama pemasok atau kategori kurang ideal, karena mengharuskan pengguna untuk mengetahui kategori dan pemasok yang tersedia dan ejaan yang benar.

Bidang pemasok dan kategori harus menampilkan nama kategori dan pemasok ketika dalam mode baca-saja (seperti sekarang) dan daftar drop-down opsi yang berlaku saat diedit. Dengan menggunakan daftar drop-down, pengguna akhir dapat dengan cepat melihat kategori dan pemasok apa yang tersedia untuk dipilih dan dapat dengan lebih mudah membuat pilihan mereka.

Untuk memberikan perilaku ini, kita perlu mengonversi SupplierName dan CategoryName BoundFields menjadi TemplateFields yang ItemTemplate memancarkan SupplierName nilai dan CategoryName dan yang EditItemTemplate menggunakan kontrol DropDownList untuk mencantumkan kategori dan pemasok yang tersedia.

CategoriesMenambahkan danSuppliersDropDownLists

Mulailah dengan mengonversi SupplierName dan CategoryName BoundFields menjadi TemplateFields dengan: mengklik tautan Edit Kolom dari tag pintar GridView; memilih BoundField dari daftar di kiri bawah; dan mengklik tautan "Konversi bidang ini menjadi TemplateField". Proses konversi akan membuat TemplateField dengan dan ItemTemplate, seperti yang EditItemTemplate ditunjukkan dalam sintaks deklaratif di bawah ini:

<asp:TemplateField HeaderText="Category" SortExpression="CategoryName">
    <EditItemTemplate>
        <asp:Label ID="Label1" runat="server"
          Text='<%# Eval("CategoryName") %>'></asp:Label>
    </EditItemTemplate>
    <ItemTemplate>
        <asp:Label ID="Label1" runat="server"
          Text='<%# Bind("CategoryName") %>'></asp:Label>
    </ItemTemplate>
</asp:TemplateField>

Karena BoundField ditandai sebagai baca-saja, dan ItemTemplateEditItemTemplate berisi kontrol Label Web yang propertinya Text terikat ke bidang data yang berlaku (CategoryName, dalam sintaks di atas). Kita perlu mengubah EditItemTemplate, mengganti kontrol Label Web dengan kontrol DropDownList.

Seperti yang telah kita lihat dalam tutorial sebelumnya, templat dapat diedit melalui Perancang atau langsung dari sintaks deklaratif. Untuk mengeditnya melalui Perancang, klik tautan Edit Templat dari tag pintar GridView dan pilih untuk bekerja dengan bidang EditItemTemplateKategori . Hapus kontrol Web Label dan ganti dengan kontrol DropDownList, atur properti ID DropDownList ke Categories.

Gambar 5: Hapus TexBox dan Tambahkan DropDownList ke EditItemTemplate (Klik untuk melihat gambar ukuran penuh)

Selanjutnya kita perlu mengisi DropDownList dengan kategori yang tersedia. Klik tautan Pilih Sumber Data dari tag pintar DropDownList dan pilih untuk membuat ObjectDataSource baru bernama CategoriesDataSource.

Gambar 6: Buat Kontrol ObjectDataSource Baru Bernama CategoriesDataSource (Klik untuk melihat gambar ukuran penuh)

Agar ObjectDataSource ini mengembalikan semua kategori, ikat ke CategoriesBLL metode kelas GetCategories() .

Gambar 7: Ikat ObjectDataSource ke CategoriesBLLMetode 's GetCategories() (Klik untuk melihat gambar ukuran penuh)

Terakhir, konfigurasikan pengaturan DropDownList sehingga CategoryName bidang ditampilkan di setiap DropDownList ListItem dengan bidang yang CategoryID digunakan sebagai nilai.

Gambar 8: Menampilkan CategoryName Bidang dan CategoryID Digunakan sebagai Nilai (Klik untuk melihat gambar ukuran penuh)

Setelah membuat perubahan ini, markup deklaratif untuk EditItemTemplate di CategoryName TemplateField akan menyertakan DropDownList dan ObjectDataSource:

<asp:TemplateField HeaderText="Category" SortExpression="CategoryName">
    <EditItemTemplate>
        <asp:DropDownList ID="Categories" runat="server"
          DataSourceID="CategoriesDataSource"
          DataTextField="CategoryName" DataValueField="CategoryID">
        </asp:DropDownList>
        <asp:ObjectDataSource ID="CategoriesDataSource" runat="server"
            OldValuesParameterFormatString="original_{0}"
            SelectMethod="GetCategories" TypeName="CategoriesBLL">
        </asp:ObjectDataSource>
    </EditItemTemplate>
    <ItemTemplate>
        <asp:Label ID="Label1" runat="server"
          Text='<%# Bind("CategoryName") %>'></asp:Label>
    </ItemTemplate>
</asp:TemplateField>

Catatan

DropDownList di EditItemTemplate harus mengaktifkan status tampilannya. Kami akan segera menambahkan sintaks pengikatan data ke sintaks deklaratif DropDownList dan perintah pengikatan data seperti Eval() dan Bind() hanya dapat muncul dalam kontrol yang status tampilannya diaktifkan.

Ulangi langkah-langkah ini untuk menambahkan DropDownList bernama Suppliers ke SupplierName TemplateField.EditItemTemplate Ini akan melibatkan penambahan DropDownList ke EditItemTemplate dan membuat ObjectDataSource lain. Suppliers ObjectDataSource DropDownList, bagaimanapun, harus dikonfigurasi untuk memanggil SuppliersBLL metode kelasGetSuppliers(). Selain itu, konfigurasikan Suppliers DropDownList untuk menampilkan CompanyName bidang dan gunakan SupplierID bidang sebagai nilai untuk ListItem bidang tersebut.

Setelah menambahkan DropDownLists ke keduanya EditItemTemplate , muat halaman di browser dan klik tombol Edit untuk produk Cajun Seasoning Chef Anton. Seperti yang ditunjukkan Gambar 9, kategori produk dan kolom pemasok dirender sebagai daftar drop-down yang berisi kategori dan pemasok yang tersedia untuk dipilih. Namun, perhatikan bahwa item pertama dalam kedua daftar drop-down dipilih secara default (Minuman untuk kategori dan Cairan Eksotis sebagai pemasok), meskipun Chef Anton's Cajun Seasoning adalah Bumbu yang disediakan oleh New Orleans Cajun Delights.

Gambar 9: Item Pertama di Daftar Drop-Down Dipilih secara Default (Klik untuk melihat gambar ukuran penuh)

Selain itu, jika Anda mengklik Perbarui, Anda akan menemukan bahwa produk CategoryID dan SupplierID nilai diatur ke NULL. Kedua perilaku yang tidak diinginkan ini disebabkan karena DropDownList di EditItemTemplate dalamnya tidak terikat ke bidang data apa pun dari data produk yang mendasar.

Mengikat DropDownLists keCategoryIDbidang data danSupplierID

Agar kategori produk dan daftar drop-down pemasok yang diedit diatur ke nilai yang sesuai dan agar nilai-nilai ini dikirim kembali ke metode BLL UpdateProduct setelah mengklik Perbarui, kita perlu mengikat properti DropDownLists SelectedValue ke CategoryID bidang data dan SupplierID menggunakan pengikatan data dua arah. Untuk mencapai ini dengan Categories DropDownList, Anda dapat menambahkan SelectedValue='<%# Bind("CategoryID") %>' langsung ke sintaks deklaratif.

Atau, Anda dapat mengatur pengikatan data DropDownList dengan mengedit templat melalui Perancang dan mengklik tautan Edit DataBindings dari tag pintar DropDownList. Selanjutnya, tunjukkan bahwa SelectedValue properti harus terikat ke CategoryID bidang menggunakan pengikatan data dua arah (lihat Gambar 10). Ulangi proses deklaratif atau Perancang untuk mengikat SupplierID bidang data ke Suppliers DropDownList.

Gambar 10: Ikat CategoryID ke Properti DropDownList SelectedValue Menggunakan Pengikatan Data Dua Arah (Klik untuk melihat gambar ukuran penuh)

Setelah pengikatan diterapkan ke SelectedValue properti dari dua DropDownList, kategori produk yang diedit dan kolom pemasok akan default ke nilai produk saat ini. Setelah mengklik Perbarui, CategoryID nilai dan SupplierID item daftar drop-down yang dipilih akan diteruskan ke UpdateProduct metode . Gambar 11 menunjukkan tutorial setelah pernyataan pengikatan data ditambahkan; perhatikan bagaimana item daftar drop-down yang dipilih untuk Chef Anton's Cajun Seasoning adalah Bumbu yang benar dan New Orleans Cajun Delights.

Gambar 11: Kategori Produk yang Diedit Dan Nilai Pemasok Saat Ini Dipilih secara Default (Klik untuk melihat gambar ukuran penuh)

MenanganiNULLNilai

Kolom CategoryID dan SupplierID dalam Products tabel bisa berupa NULL, namun DropDownLists di EditItemTemplate tidak menyertakan item daftar untuk mewakili NULL nilai. Ini memiliki dua konsekuensi:

• Pengguna tidak dapat menggunakan antarmuka kami untuk mengubah kategori produk atau pemasok dari non-nilaiNULL menjadi NULL satu
• Jika produk memiliki NULLCategoryID atau SupplierID, mengklik tombol Edit akan menghasilkan pengecualian. Ini karena nilai yang NULL dikembalikan oleh CategoryID (atau SupplierID) dalam Bind() pernyataan tidak dipetakan ke nilai dalam DropDownList (DropDownList melemparkan pengecualian ketika propertinya SelectedValue diatur ke nilai yang tidak ada dalam kumpulan item daftarnya).

Untuk mendukung NULLCategoryID dan SupplierID nilai, kita perlu menambahkan yang lain ListItem ke setiap DropDownList untuk mewakili NULL nilai. Dalam tutorial Pemfilteran Master/Detail Dengan DropDownList, kami melihat cara menambahkan tambahan ListItem ke DropDownList yang terikat data, yang melibatkan pengaturan properti DropDownList AppendDataBoundItems ke True dan menambahkan tambahan ListItemsecara manual . Namun, dalam tutorial sebelumnya, kami menambahkan ListItem dengan Value .-1 Namun, logika pengikatan data di ASP.NET akan secara otomatis mengonversi string kosong menjadi NULL nilai dan sebaliknya. Oleh karena itu, untuk tutorial ini kita ingin ListItem's Value menjadi string kosong.

Mulailah dengan mengatur properti DropDownList ke AppendDataBoundItemsTrue. Selanjutnya, tambahkan NULLListItem dengan menambahkan elemen berikut <asp:ListItem> ke setiap DropDownList sehingga markup deklaratif terlihat seperti:

<asp:DropDownList ID="Categories" runat="server"
    DataSourceID="CategoriesDataSource" DataTextField="CategoryName"
    DataValueField="CategoryID" SelectedValue='<%# Bind("CategoryID") %>'
    AppendDataBoundItems="True">
    <asp:ListItem Value="">(None)</asp:ListItem>
</asp:DropDownList>

Saya telah memilih untuk menggunakan "(Tidak Ada)" sebagai nilai Teks untuk ini ListItem, tetapi Anda dapat mengubahnya juga menjadi string kosong jika Anda mau.

Catatan

Seperti yang kita lihat dalam tutorial Pemfilteran Master/Detail Dengan DropDownList , ListItem s dapat ditambahkan ke DropDownList melalui Perancang dengan mengklik properti DropDownList Items di jendela Properti (yang akan menampilkan ListItem Editor Koleksi). Namun, pastikan untuk menambahkan NULLListItem untuk tutorial ini melalui sintaks deklaratif. Jika Anda menggunakan ListItem Editor Koleksi, sintaks deklaratif yang dihasilkan akan menghilangkan Value pengaturan sama sekali saat diberi string kosong, membuat markup deklaratif seperti: <asp:ListItem>(None)</asp:ListItem>. Meskipun ini mungkin terlihat tidak berbahaya, Nilai yang hilang menyebabkan DropDownList menggunakan Text nilai properti di tempatnya. Itu berarti bahwa jika ini NULLListItem dipilih, nilai "(Tidak Ada)" akan dicoba untuk ditetapkan ke CategoryID, yang akan menghasilkan pengecualian. Dengan mengatur Value=""secara eksplisit , NULL nilai akan ditetapkan ke CategoryID saat NULLListItem dipilih.

Ulangi langkah-langkah ini untuk DropDownList Pemasok.

Dengan tambahan ListItemini, antarmuka pengeditan sekarang dapat menetapkan NULL nilai ke bidang dan CategoryID ProdukSupplierID, seperti yang ditunjukkan pada Gambar 12.

Gambar 12: Pilih (Tidak Ada) untuk Menetapkan NULL Nilai untuk Kategori Produk atau Pemasok (Klik untuk melihat gambar ukuran penuh)

Langkah 4: Menggunakan RadioButtons untuk Status Dihentikan

Saat ini bidang data produk Discontinued dinyatakan menggunakan CheckBoxField, yang merender kotak centang yang dinonaktifkan untuk baris baca-saja dan kotak centang yang diaktifkan untuk baris yang sedang diedit. Meskipun antarmuka pengguna ini sering cocok, kita dapat menyesuaikannya jika diperlukan menggunakan TemplateField. Untuk tutorial ini, mari kita ubah CheckBoxField menjadi TemplateField yang menggunakan kontrol RadioButtonList dengan dua opsi "Aktif" dan "Dihentikan" tempat pengguna dapat menentukan nilai produk Discontinued .

Mulailah dengan mengonversi Discontinued CheckBoxField menjadi TemplateField, yang akan membuat TemplateField dengan ItemTemplate dan EditItemTemplate. Kedua templat menyertakan Kotak Centang dengan propertinya Checked yang terikat ke Discontinued bidang data, satu-satunya perbedaan antara keduanya adalah properti ItemTemplateKotak Centang Enabled 's diatur ke False.

Ganti Kotak Centang di ItemTemplate dan EditItemTemplate dengan kontrol RadioButtonList, atur properti RadioButtonLists ID ke DiscontinuedChoice. Selanjutnya, tunjukkan bahwa RadioButtonLists masing-masing harus berisi dua tombol radio, satu berlabel "Aktif" dengan nilai "False" dan satu berlabel "Dihentikan" dengan nilai "True". Untuk mencapai hal ini, Anda dapat memasukkan <asp:ListItem> elemen secara langsung melalui sintaks deklaratif atau menggunakan ListItem Editor Koleksi dari Perancang. Gambar 13 menunjukkan ListItem Editor Koleksi setelah dua opsi tombol radio ditentukan.

Gambar 13: Tambahkan Opsi Aktif dan Dihentikan ke RadioButtonList (Klik untuk melihat gambar ukuran penuh)

Karena RadioButtonList di seharusnya tidak dapat diedit ItemTemplate , atur propertinya Enabled ke False, biarkan Enabled properti ke True (default) untuk RadioButtonList di EditItemTemplate. Ini akan membuat tombol radio di baris yang tidak diedit sebagai baca-saja, tetapi akan memungkinkan pengguna untuk mengubah nilai RadioButton untuk baris yang diedit.

Kita masih perlu menetapkan properti kontrol SelectedValue RadioButtonList sehingga tombol radio yang sesuai dipilih berdasarkan bidang data produk Discontinued . Seperti halnya DropDownLists yang diperiksa sebelumnya dalam tutorial ini, sintaks pengikatan data ini dapat ditambahkan langsung ke markup deklaratif atau melalui tautan Edit DataBindings di tag pintar RadioButtonLists.

Setelah menambahkan dua RadioButtonLists dan mengonfigurasinya, Discontinued markup deklaratif TemplateField akan terlihat seperti:

<asp:TemplateField HeaderText="Discontinued" SortExpression="Discontinued">
    <ItemTemplate>
        <asp:RadioButtonList ID="DiscontinuedChoice" runat="server"
          Enabled="False" SelectedValue='<%# Bind("Discontinued") %>'>
            <asp:ListItem Value="False">Active</asp:ListItem>
            <asp:ListItem Value="True">Discontinued</asp:ListItem>
        </asp:RadioButtonList>
    </ItemTemplate>
    <EditItemTemplate>
        <asp:RadioButtonList ID="DiscontinuedChoice" runat="server"
            SelectedValue='<%# Bind("Discontinued") %>'>
            <asp:ListItem Value="False">Active</asp:ListItem>
            <asp:ListItem Value="True">Discontinued</asp:ListItem>
        </asp:RadioButtonList>
    </EditItemTemplate>
</asp:TemplateField>

Dengan perubahan ini, Discontinued kolom telah diubah dari daftar kotak centang menjadi daftar pasangan tombol radio (lihat Gambar 14). Saat mengedit produk, tombol radio yang sesuai dipilih dan status produk yang dihentikan dapat diperbarui dengan memilih tombol radio lainnya dan mengklik Perbarui.

Gambar 14: Kotak Centang yang Dihentikan Telah Digantikan oleh Pasangan Tombol Radio (Klik untuk melihat gambar ukuran penuh)

Catatan

Discontinued Karena kolom dalam Products database tidak dapat memiliki NULL nilai, kita tidak perlu khawatir tentang mengambil NULL informasi di antarmuka. Namun, jika kolom dapat berisi nilai yang Discontinued ingin kita tambahkan tombol radio ketiga ke daftar dengan NULL diatur ke string kosong (Value), sama seperti kategori dan dropDownLists Value="" pemasok.

Ringkasan

Meskipun BoundField dan CheckBoxField secara otomatis merender antarmuka baca-saja, pengeditan, dan penyisipan, antarmuka tersebut tidak memiliki kemampuan untuk kustomisasi. Namun, seringkali, kita harus menyesuaikan antarmuka pengeditan atau penyisipan, mungkin menambahkan kontrol validasi (seperti yang kita lihat dalam tutorial sebelumnya) atau dengan menyesuaikan antarmuka pengguna pengumpulan data (seperti yang kita lihat dalam tutorial ini). Menyesuaikan antarmuka dengan TemplateField dapat diringkas dalam langkah-langkah berikut:

1. Menambahkan TemplateField atau mengonversi BoundField atau CheckBoxField yang sudah ada menjadi TemplateField
2. Menambah antarmuka sesuai kebutuhan
3. Mengikat bidang data yang sesuai ke kontrol Web yang baru ditambahkan menggunakan pengikatan data dua arah

Selain menggunakan kontrol Web ASP.NET bawaan, Anda juga dapat menyesuaikan templat TemplateField dengan kontrol server kustom yang dikompilasi dan Kontrol Pengguna.

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.

SebelumnyaBerikutnya