Catatan
Akses ke halaman ini memerlukan otorisasi. Anda dapat mencoba masuk atau mengubah direktori.
Akses ke halaman ini memerlukan otorisasi. Anda dapat mencoba mengubah direktori.
oleh Scott Mitchell
Dalam tutorial ini kita akan membuat antarmuka pengeditan yang lebih kaya untuk DataList, yang mencakup DropDownLists dan CheckBox.
Pendahuluan
Markup dan kontrol Web dalam DataList menentukan EditItemTemplate
antarmuka yang dapat diedit. Dalam semua contoh DataList yang dapat diedit yang telah kami periksa sejauh ini, antarmuka yang dapat diedit telah terdiri dari kontrol Web TextBox. Dalam tutorial sebelumnya, kami meningkatkan pengalaman pengguna saat mengedit dengan menambahkan kontrol validasi.
EditItemTemplate
dapat diperluas lebih lanjut untuk menyertakan kontrol Web selain TextBox, seperti DropDownLists, RadioButtonLists, Kalender, dan sebagainya. Seperti halnya TextBoxes, saat menyesuaikan antarmuka pengeditan untuk menyertakan kontrol Web lainnya, gunakan langkah-langkah berikut:
- Tambahkan kontrol Web ke
EditItemTemplate
. - Gunakan sintaks pengikatan data untuk menetapkan nilai bidang data terkait ke properti yang sesuai.
- Di penanganan
UpdateCommand
aktivitas, akses nilai kontrol Web secara terprogram dan teruskan ke metode BLL yang sesuai.
Dalam tutorial ini kita akan membuat antarmuka pengeditan yang lebih kaya untuk DataList, yang mencakup DropDownLists dan CheckBox. Secara khusus, kami akan membuat DataList yang mencantumkan informasi produk dan mengizinkan nama produk, pemasok, kategori, dan status yang dihentikan untuk diperbarui (lihat Gambar 1).
Gambar 1: Antarmuka Pengeditan Menyertakan Kotak Teks, Dua Daftar DropDown, dan Kotak Centang (Klik untuk melihat gambar ukuran penuh)
Langkah 1: Menampilkan Informasi Produk
Sebelum kita dapat membuat antarmuka DataList yang dapat diedit, pertama-tama kita perlu membangun antarmuka baca-saja. Mulailah dengan membuka CustomizedUI.aspx
halaman dari EditDeleteDataList
folder dan, dari Perancang, tambahkan DataList ke halaman, atur propertinya ID
ke Products
. Dari tag pintar DataList, buat ObjectDataSource baru. Beri nama ObjectDataSource ProductsDataSource
baru ini dan konfigurasikan untuk mengambil data dari ProductsBLL
metode kelas s GetProducts
. Seperti tutorial DataList yang dapat diedit sebelumnya, kami akan memperbarui informasi produk yang diedit dengan langsung masuk ke Lapisan Logika Bisnis. Dengan demikian, atur daftar drop-down di tab PERBARUI, SISIPKAN, dan HAPUS ke (Tidak Ada).
Gambar 2: Setel Tab PERBARUI, SISIPKAN, dan HAPUS Daftar Drop-Down ke (Tidak Ada) (Klik untuk melihat gambar ukuran penuh)
Setelah mengonfigurasi ObjectDataSource, Visual Studio akan membuat default ItemTemplate
untuk DataList yang mencantumkan nama dan nilai untuk setiap bidang data yang dikembalikan.
ItemTemplate
Ubah sehingga templat mencantumkan nama produk dalam <h4>
elemen bersama dengan nama kategori, nama pemasok, harga, dan status yang dihentikan. Selain itu, tambahkan tombol Edit, pastikan propertinya CommandName
diatur ke Edit. Markup deklaratif untuk berikut ini ItemTemplate
:
<ItemTemplate>
<h4>
<asp:Label ID="ProductNameLabel" runat="server"
Text='<%# Eval("ProductName") %>' />
</h4>
<table border="0">
<tr>
<td class="ProductPropertyLabel">Category:</td>
<td class="ProductPropertyValue">
<asp:Label ID="CategoryNameLabel" runat="server"
Text='<%# Eval("CategoryName") %>' />
</td>
<td class="ProductPropertyLabel">Supplier:</td>
<td class="ProductPropertyValue">
<asp:Label ID="SupplierNameLabel" runat="server"
Text='<%# Eval("SupplierName") %>' />
</td>
</tr>
<tr>
<td class="ProductPropertyLabel">Discontinued:</td>
<td class="ProductPropertyValue">
<asp:Label ID="DiscontinuedLabel" runat="server"
Text='<%# Eval("Discontinued") %>' />
</td>
<td class="ProductPropertyLabel">Price:</td>
<td class="ProductPropertyValue">
<asp:Label ID="UnitPriceLabel" runat="server"
Text='<%# Eval("UnitPrice", "{0:C}") %>' />
</td>
</tr>
<tr>
<td colspan="4">
<asp:Button runat="Server" ID="EditButton"
Text="Edit" CommandName="Edit" />
</td>
</tr>
</table>
<br />
</ItemTemplate>
Markup di atas menjabarkan informasi produk menggunakan <judul h4> untuk nama produk dan empat kolom <table>
untuk bidang yang tersisa. Kelas ProductPropertyLabel
dan ProductPropertyValue
CSS, yang didefinisikan dalam Styles.css
, telah dibahas dalam tutorial sebelumnya. Gambar 3 menunjukkan kemajuan kami saat dilihat melalui browser.
Gambar 3: Nama, Pemasok, Kategori, Status Dihentikan, dan Harga Setiap Produk Ditampilkan (Klik untuk melihat gambar ukuran penuh)
Langkah 2: Menambahkan Kontrol Web ke Antarmuka Pengeditan
Langkah pertama dalam membangun antarmuka pengeditan DataList yang disesuaikan adalah menambahkan kontrol Web yang diperlukan ke EditItemTemplate
. Secara khusus, kita memerlukan DropDownList untuk kategori, yang lain untuk pemasok, dan CheckBox untuk status yang dihentikan. Karena harga produk tidak dapat diedit dalam contoh ini, kita dapat terus menampilkannya menggunakan kontrol Label Web.
Untuk mengkustomisasi antarmuka pengeditan, klik tautan Edit Templat dari tag pintar DataList dan pilih EditItemTemplate
opsi dari daftar drop-down. Tambahkan DropDownList ke EditItemTemplate
dan atur ID
ke Categories
.
Gambar 4: Tambahkan DropDownList untuk Kategori (Klik untuk melihat gambar ukuran penuh)
Selanjutnya, dari tag pintar DropDownList, pilih opsi Pilih Sumber Data dan buat ObjectDataSource baru bernama CategoriesDataSource
. Konfigurasikan ObjectDataSource ini untuk menggunakan CategoriesBLL
metode kelas s GetCategories()
(lihat Gambar 5). Selanjutnya, Panduan Konfigurasi Sumber Data DropDownList meminta bidang data yang akan digunakan untuk setiap ListItem
Text
properti dan Value
. Minta DropDownList menampilkan CategoryName
bidang data dan gunakan CategoryID
sebagai nilai, seperti yang ditunjukkan pada Gambar 6.
Gambar 5: Buat ObjectDataSource Baru Bernama CategoriesDataSource
(Klik untuk melihat gambar ukuran penuh)
Gambar 6: Mengonfigurasi Tampilan DropDownList dan Bidang Nilai (Klik untuk melihat gambar ukuran penuh)
Ulangi rangkaian langkah ini untuk membuat DropDownList untuk pemasok. Atur ID
untuk DropDownList ini ke Suppliers
dan beri nama ObjectDataSource SuppliersDataSource
.
Setelah menambahkan dua DropDownList, tambahkan Kotak Centang untuk status yang dihentikan dan Kotak Teks untuk nama produk. Atur ID
s untuk Kotak Centang dan Kotak Teks ke Discontinued
dan ProductName
, masing-masing. Tambahkan RequiredFieldValidator untuk memastikan bahwa pengguna memberikan nilai untuk nama produk.
Terakhir, tambahkan tombol Perbarui dan Batalkan. Ingatlah bahwa untuk kedua tombol ini sangat penting bahwa properti mereka CommandName
masing-masing diatur ke Perbarui dan Batalkan.
Jangan ragu untuk menjabarkan antarmuka pengeditan sesuka Anda. Saya telah memilih untuk menggunakan tata letak empat kolom <table>
yang sama dari antarmuka baca-saja, seperti yang diilustrasikan sintaksis deklaratif dan cuplikan layar berikut:
<EditItemTemplate>
<h4>
<asp:Label ID="ProductNameLabel" runat="server"
Text='<%# Eval("ProductName") %>' />
</h4>
<table border="0">
<tr>
<td class="ProductPropertyLabel">Name:</td>
<td colspan="3" class="ProductPropertyValue">
<asp:TextBox runat="server" ID="ProductName" Width="90%" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1"
ControlToValidate="ProductName"
ErrorMessage="You must enter a name for the product."
runat="server">*</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td class="ProductPropertyLabel">Category:</td>
<td class="ProductPropertyValue">
<asp:DropDownList ID="Categories" runat="server"
DataSourceID="CategoriesDataSource"
DataTextField="CategoryName" DataValueField="CategoryID" />
</td>
<td class="ProductPropertyLabel">Supplier:</td>
<td class="ProductPropertyValue">
<asp:DropDownList ID="Suppliers"
DataSourceID="SuppliersDataSource" DataTextField="CompanyName"
DataValueField="SupplierID" runat="server" />
</td>
</tr>
<tr>
<td class="ProductPropertyLabel">Discontinued:</td>
<td class="ProductPropertyValue">
<asp:CheckBox runat="server" id="Discontinued" />
</td>
<td class="ProductPropertyLabel">Price:</td>
<td class="ProductPropertyValue">
<asp:Label ID="UnitPriceLabel" runat="server"
Text='<%# Eval("UnitPrice", "{0:C}") %>' />
</td>
</tr>
<tr>
<td colspan="4">
<asp:Button runat="Server" ID="UpdateButton" CommandName="Update"
Text="Update" />
<asp:Button runat="Server" ID="CancelButton" CommandName="Cancel"
Text="Cancel" CausesValidation="False" />
</td>
</tr>
</table>
<br />
<asp:ObjectDataSource ID="CategoriesDataSource" runat="server"
OldValuesParameterFormatString="original_{0}" SelectMethod="GetCategories"
TypeName="CategoriesBLL">
</asp:ObjectDataSource>
<asp:ObjectDataSource ID="SuppliersDataSource" runat="server"
OldValuesParameterFormatString="original_{0}" SelectMethod="GetSuppliers"
TypeName="SuppliersBLL">
</asp:ObjectDataSource>
</EditItemTemplate>
Gambar 7: Antarmuka Pengeditan Ditata seperti Antarmuka Read-Only (Klik untuk melihat gambar ukuran penuh)
Langkah 3: Membuat EditCommand dan CancelCommand Event Handler
Saat ini, tidak ada sintaks pengikatan data dalam EditItemTemplate
(kecuali , UnitPriceLabel
yang disalin melalui verbatim dari ItemTemplate
). Kita akan menambahkan sintaks pengikatan data sesaat, tetapi pertama-tama mari kita buat penanganan aktivitas untuk DataList dan EditCommand
CancelCommand
peristiwa. Ingat bahwa tanggung jawab EditCommand
penanganan aktivitas adalah merender antarmuka pengeditan untuk item DataList yang tombol Edit-nya diklik, sedangkan CancelCommand
tugasnya adalah mengembalikan DataList ke status pra-pengeditannya.
Buat dua penanganan aktivitas ini dan minta mereka menggunakan kode berikut:
Protected Sub Products_EditCommand(source As Object, e As DataListCommandEventArgs) _
Handles Products.EditCommand
' Set the DataList's EditItemIndex property to the
' index of the DataListItem that was clicked
Products.EditItemIndex = e.Item.ItemIndex
' Rebind the data to the DataList
Products.DataBind()
End Sub
Protected Sub Products_CancelCommand(source As Object, e As DataListCommandEventArgs) _
Handles Products.CancelCommand
' Set the DataList's EditItemIndex property to -1
Products.EditItemIndex = -1
' Rebind the data to the DataList
Products.DataBind()
End Sub
Dengan dua penanganan aktivitas ini di tempat, mengklik tombol Edit menampilkan antarmuka pengeditan dan mengklik tombol Batal mengembalikan item yang diedit ke mode baca-saja. Gambar 8 memperlihatkan DataList setelah tombol Edit diklik untuk Chef Anton s Gumbo Mix. Karena kita belum menambahkan sintaks pengikatan data apa pun ke antarmuka pengeditan, ProductName
Kotak Teks kosong, Discontinued
Kotak Centang tidak dicentang, dan item pertama yang dipilih dari Categories
dan Suppliers
DropDownLists.
Gambar 8: Mengklik Tombol Edit Menampilkan Antarmuka Pengeditan (Klik untuk melihat gambar ukuran penuh)
Langkah 4: Menambahkan Sintaks DataBinding ke Antarmuka Pengeditan
Agar antarmuka pengeditan menampilkan nilai produk saat ini, kita perlu menggunakan sintaks pengikatan data untuk menetapkan nilai bidang data ke nilai kontrol Web yang sesuai. Sintaks pengikatan data dapat diterapkan melalui Perancang dengan masuk ke layar Edit Templat dan memilih tautan Edit DataBindings dari tag pintar kontrol Web. Atau, sintaks pengikatan data dapat ditambahkan langsung ke markup deklaratif.
ProductName
Tetapkan nilai bidang data ke ProductName
properti TextBox sText
, CategoryID
nilai bidang data dan SupplierID
ke Categories
properti DropDownLists Suppliers
SelectedValue
, dan Discontinued
nilai bidang data ke Discontinued
properti Kotak Checked
Centang. Setelah membuat perubahan ini, baik melalui Perancang atau langsung melalui markup deklaratif, kunjungi kembali halaman melalui browser dan klik tombol Edit untuk Chef Anton s Gumbo Mix. Seperti yang ditunjukkan Gambar 9, sintaks pengikatan data telah menambahkan nilai saat ini ke dalam TextBox, DropDownLists, dan CheckBox.
Gambar 9: Mengklik Tombol Edit Menampilkan Antarmuka Pengeditan (Klik untuk melihat gambar ukuran penuh)
Langkah 5: Menyimpan Perubahan Pengguna di UpdateCommand Event Handler
Saat pengguna mengedit produk dan mengklik tombol Perbarui, terjadi postback dan peristiwa DataList UpdateCommand
diaktifkan. Di penanganan aktivitas, kita perlu membaca nilai dari kontrol Web di EditItemTemplate
antarmuka dan dengan BLL untuk memperbarui produk dalam database. Seperti yang telah kita lihat dalam tutorial sebelumnya, ProductID
produk yang diperbarui dapat diakses melalui DataKeys
koleksi. Bidang yang dimasukkan pengguna diakses dengan merujuk kontrol Web secara terprogram menggunakan FindControl("controlID")
, seperti yang ditunjukkan kode berikut:
Protected Sub Products_UpdateCommand(source As Object, e As DataListCommandEventArgs) _
Handles Products.UpdateCommand
If Not Page.IsValid Then
Exit Sub
End If
' Read in the ProductID from the DataKeys collection
Dim productID As Integer = Convert.ToInt32(Products.DataKeys(e.Item.ItemIndex))
' Read in the product name and price values
Dim productName As TextBox = CType(e.Item.FindControl("ProductName"), TextBox)
Dim categories As DropDownList=CType(e.Item.FindControl("Categories"), DropDownList)
Dim suppliers As DropDownList = CType(e.Item.FindControl("Suppliers"), DropDownList)
Dim discontinued As CheckBox = CType(e.Item.FindControl("Discontinued"), CheckBox)
Dim productNameValue As String = Nothing
If productName.Text.Trim().Length > 0 Then
productNameValue = productName.Text.Trim()
End If
Dim categoryIDValue As Integer = Convert.ToInt32(categories.SelectedValue)
Dim supplierIDValue As Integer = Convert.ToInt32(suppliers.SelectedValue)
Dim discontinuedValue As Boolean = discontinued.Checked
' Call the ProductsBLL's UpdateProduct method...
Dim productsAPI As New ProductsBLL()
productsAPI.UpdateProduct(productNameValue, categoryIDValue, supplierIDValue, _
discontinuedValue, productID)
' Revert the DataList back to its pre-editing state
Products.EditItemIndex = -1
Products.DataBind()
End Sub
Kode dimulai dengan berkonsultasi dengan Page.IsValid
properti untuk memastikan bahwa semua kontrol validasi pada halaman valid. Jika Page.IsValid
adalah True
, nilai produk s ProductID
yang diedit dibaca dari DataKeys
koleksi dan entri data kontrol Web di direferensikan EditItemTemplate
secara terprogram. Selanjutnya, nilai dari kontrol Web ini dibaca ke dalam variabel yang kemudian diteruskan ke kelebihan beban yang sesuai UpdateProduct
. Setelah memperbarui data, DataList dikembalikan ke status pra-pengeditannya.
Catatan
Saya telah menghilangkan logika penanganan pengecualian yang ditambahkan dalam tutorial Penanganan Pengecualian BLL- dan DAL-Level untuk menjaga kode dan contoh ini tetap fokus. Sebagai latihan, tambahkan fungsionalitas ini setelah menyelesaikan tutorial ini.
Langkah 6: Menangani Nilai NULL CategoryID dan SupplierID
Database Northwind memungkinkan NULL
nilai untuk Products
tabel dan CategoryID
SupplierID
kolom. Namun, antarmuka pengeditan kami saat ini tidak mengakomodasi NULL
nilai. Jika kita mencoba untuk mengedit produk yang memiliki nilai NULL
untuk kolom CategoryID
atau SupplierID
, kita akan mendapatkan ArgumentOutOfRangeException
dengan pesan kesalahan yang mirip dengan: 'Kategori' memiliki SelectedValue yang tidak valid karena tidak ada dalam daftar item. Selain itu, saat ini tidak ada cara untuk mengubah kategori produk atau nilai pemasok dari nilai non-NULL
menjadi NULL
.
Untuk mendukung NULL
nilai untuk kategori dan dropDownLists pemasok, kita perlu menambahkan tambahan ListItem
. Saya telah memilih untuk menggunakan (Tidak Ada) sebagai Text
nilai untuk ini ListItem
, tetapi Anda dapat mengubahnya menjadi sesuatu yang lain (seperti string kosong) jika Anda mau. Terakhir, ingatlah untuk mengatur DropDownLists AppendDataBoundItems
ke True
; jika Anda lupa melakukannya, kategori dan pemasok yang terikat ke DropDownList akan menimpa yang ditambahkan ListItem
secara statis.
Setelah membuat perubahan ini, markup DropDownLists di DataList akan EditItemTemplate
terlihat mirip dengan yang berikut ini:
<asp:DropDownList ID="Categories" DataSourceID="CategoriesDataSource"
DataTextField="CategoryName" DataValueField="CategoryID" runat="server"
SelectedValue='<%# Eval("CategoryID") %>' AppendDataBoundItems="True">
<asp:ListItem Value=" Selected="True">(None)</asp:ListItem>
</asp:DropDownList>
...
<asp:DropDownList ID="Suppliers" DataSourceID="SuppliersDataSource"
DataTextField="CompanyName" DataValueField="SupplierID" runat="server"
SelectedValue='<%# Eval("SupplierID") %>' AppendDataBoundItems="True">
<asp:ListItem Value=" Selected="True">(None)</asp:ListItem>
</asp:DropDownList>
Catatan
Statis ListItem
dapat ditambahkan ke DropDownList melalui Perancang atau langsung melalui sintaks deklaratif. Saat menambahkan item DropDownList untuk mewakili nilai database NULL
, pastikan untuk menambahkan ListItem
melalui sintaks deklaratif. Jika Anda menggunakan ListItem
Editor Koleksi di Perancang, 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, yang hilang Value
menyebabkan DropDownList menggunakan Text
nilai properti di tempatnya. Itu berarti bahwa jika ini NULL
ListItem
dipilih, nilai (Tidak Ada) akan dicoba untuk ditetapkan ke bidang data produk (CategoryID
atau SupplierID
, dalam tutorial ini), yang akan menghasilkan pengecualian. Dengan mengatur Value=""
secara eksplisit , NULL
nilai akan ditetapkan ke bidang data produk saat NULL
ListItem
dipilih.
Luangkan waktu sejenak untuk melihat kemajuan kami melalui browser. Saat mengedit produk, perhatikan bahwa Categories
dan Suppliers
DropDownList keduanya memiliki opsi (Tidak Ada) di awal DropDownList.
Gambar 10: Categories
dan Suppliers
menyertakan Opsi (Tidak Ada) (Klik untuk melihat gambar ukuran penuh)
Untuk menyimpan opsi (Tidak Ada) sebagai nilai database NULL
, kita perlu kembali ke penanganan UpdateCommand
aktivitas.
categoryIDValue
Ubah variabel dan supplierIDValue
menjadi bilangan bulat null dan tetapkan nilai selain Nothing
hanya jika DropDownList bukan SelectedValue
string kosong:
Dim categoryIDValue As Nullable(Of Integer) = Nothing
If Not String.IsNullOrEmpty(categories.SelectedValue) Then
categoryIDValue = Convert.ToInt32(categories.SelectedValue)
End If
Dim supplierIDValue As Nullable(Of Integer) = Nothing
If Not String.IsNullOrEmpty(suppliers.SelectedValue) Then
supplierIDValue = Convert.ToInt32(suppliers.SelectedValue)
End If
Dengan perubahan ini, nilai Nothing
akan diteruskan ke UpdateProduct
metode BLL jika pengguna memilih opsi (Tidak Ada) dari salah satu daftar drop-down, yang sesuai dengan NULL
nilai database.
Ringkasan
Dalam tutorial ini kita melihat cara membuat antarmuka pengeditan DataList yang lebih kompleks yang menyertakan tiga input web yang berbeda mengontrol TextBox, dua DropDownList, dan CheckBox bersama dengan kontrol validasi. Saat membangun antarmuka pengeditan, langkah-langkahnya sama terlepas dari kontrol Web yang digunakan: mulailah dengan menambahkan kontrol Web ke DataList s EditItemTemplate
; gunakan sintaks pengikatan data untuk menetapkan nilai bidang data yang sesuai dengan properti kontrol Web yang sesuai; dan, dalam UpdateCommand
penanganan aktivitas, secara terprogram mengakses kontrol Web dan properti yang sesuai, meneruskan nilainya ke dalam BLL.
Saat membuat antarmuka pengeditan, baik terdiri dari TextBoxes saja atau kumpulan kontrol Web yang berbeda, pastikan untuk menangani nilai database NULL
dengan benar. Saat memperhitungkan NULL
s, sangat penting bahwa Anda tidak hanya menampilkan nilai yang ada NULL
dengan benar di antarmuka pengeditan, tetapi juga bahwa Anda menawarkan sarana untuk menandai nilai sebagai NULL
. Untuk DropDownLists di DataLists, itu biasanya berarti menambahkan statis ListItem
yang propertinya Value
secara eksplisit diatur ke string kosong (Value=""
), dan menambahkan sedikit kode ke UpdateCommand
penanganan aktivitas untuk menentukan apakah properti dipilih atau tidak NULL``ListItem
.
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.
Terima kasih khusus untuk
Seri tutorial ini ditinjau oleh banyak peninjau yang bermanfaat. Peninjau utama untuk tutorial ini adalah Dennis Patterson, David Suru, dan Randy Schmidt. Tertarik untuk meninjau artikel MSDN saya yang akan datang? Jika demikian, hubungi saya di mitchell@4GuysFromRolla.com.