Menyesuaikan Antarmuka Pengeditan DataList (C#)

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 edit-waktu 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: Atur Daftar Drop-Down Tab UPDATE, INSERT, dan DELETE 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 ListItemText 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" DataTextField="CompanyName"
                    DataSourceID="SuppliersDataSource"
                    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 Baca-Saja (Klik untuk melihat gambar ukuran penuh)

Langkah 3: Membuat EditCommand dan CancelCommand Event Handler

Saat ini, tidak ada sintaks pengikatan data dalam EditItemTemplate (kecuali , UnitPriceLabelyang disalin melalui verbatim dari ItemTemplate). Kita akan menambahkan sintaks pengikatan data sesaat, tetapi pertama-tama mari kita buat penanganan aktivitas untuk DataList dan EditCommandCancelCommand 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 void Products_EditCommand(object source, DataListCommandEventArgs e)
{
    // Set the DataList's EditItemIndex property and rebind the data
    Products.EditItemIndex = e.Item.ItemIndex;
    Products.DataBind();
}
protected void Products_CancelCommand(object source, DataListCommandEventArgs e)
{
    // Return to DataList to its pre-editing state
    Products.EditItemIndex = -1;
    Products.DataBind();
}

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 SuppliersSelectedValue, 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 void Products_UpdateCommand(object source, DataListCommandEventArgs e)
{
    // Make sure the page is valid...
    if (!Page.IsValid)
        return;
    // Read in the ProductID from the DataKeys collection
    int productID = Convert.ToInt32(Products.DataKeys[e.Item.ItemIndex]);
    // Read in the product name and price values
    TextBox productName = (TextBox)e.Item.FindControl("ProductName");
    DropDownList categories = (DropDownList)e.Item.FindControl("Categories");
    DropDownList suppliers = (DropDownList)e.Item.FindControl("Suppliers");
    CheckBox discontinued = (CheckBox)e.Item.FindControl("Discontinued");
    string productNameValue = null;
    if (productName.Text.Trim().Length > 0)
        productNameValue = productName.Text.Trim();
    int categoryIDValue = Convert.ToInt32(categories.SelectedValue);
    int supplierIDValue = Convert.ToInt32(suppliers.SelectedValue);
    bool discontinuedValue = discontinued.Checked;
    // Call the ProductsBLL's UpdateProduct method...
    ProductsBLL productsAPI = new ProductsBLL();
    productsAPI.UpdateProduct(productNameValue, categoryIDValue, supplierIDValue,
                              discontinuedValue, productID);
    // Revert the DataList back to its pre-editing state
    Products.EditItemIndex = -1;
    Products.DataBind();
}

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 Tingkat BLL dan DAL 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 CategoryIDSupplierID kolom. Namun, antarmuka pengeditan kami saat ini tidak mengakomodasi NULL nilai. Jika kita mencoba mengedit produk yang memiliki NULL nilai untuk kolom atau CategoryID , SupplierID kita akan mendapatkan dengan pesan kesalahan yang ArgumentOutOfRangeException 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 non-nilaiNULL menjadi NULL satu.

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 ListItemsecara 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 NULLListItem 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 NULLListItem 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 Daftar DropDown 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:

int? categoryIDValue = null;
if (!string.IsNullOrEmpty(categories.SelectedValue))
    categoryIDValue = Convert.ToInt32(categories.SelectedValue);
int? supplierIDValue = null;
if (!string.IsNullOrEmpty(suppliers.SelectedValue))
    supplierIDValue = Convert.ToInt32(suppliers.SelectedValue);

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.

Sebelumnya Berikutnya

Saran dan Komentar

Apakah halaman ini membantu?

Last updated on 2025-05-05