Bagikan melalui

Mengikat kontrol WPF ke himpunan data dalam aplikasi .NET Framework

  • Artikel

Catatan

Himpunan data dan kelas terkait adalah teknologi .NET Framework warisan dari awal 2000-an yang memungkinkan aplikasi untuk bekerja dengan data dalam memori saat aplikasi terputus dari database. Himpunan data tersebut sangat berguna untuk aplikasi yang mengaktifkan pengguna guna memodifikasi data dan mempertahankan perubahan kembali ke database. Meskipun himpunan data telah terbukti menjadi teknologi yang sangat sukses, sebaiknya aplikasi .NET baru menggunakan Entity Framework Core. Entity Framework menyediakan cara yang lebih alami untuk bekerja dengan data tabular sebagai model objek, dan memiliki antarmuka pemrograman yang lebih sederhana.

Dalam panduan ini, Anda membuat aplikasi WPF yang berisi kontrol terikat data. Kontrol terikat ke rekaman produk yang dirangkum dalam himpunan data. Anda juga menambahkan tombol untuk menelusuri produk dan menyimpan perubahan pada catatan produk.

Panduan ini mengilustrasikan tugas-tugas berikut:

  • Membuat aplikasi WPF dan himpunan data yang dihasilkan dari data dalam database sampel AdventureWorksLT.

  • Membuat sekumpulan kontrol terikat data dengan menyeret tabel data dari jendela Sumber Data ke jendela di WPF Designer.

  • Membuat tombol yang menavigasi ke depan dan mundur melalui rekaman produk.

  • Membuat tombol yang menyimpan perubahan yang dilakukan pengguna ke rekaman produk ke tabel data dan sumber data yang mendasar.

Catatan

Komputer Anda mungkin menampilkan nama atau lokasi yang berbeda untuk beberapa elemen antarmuka pengguna Visual Studio dalam artikel ini. Anda mungkin menggunakan edisi Visual Studio yang berbeda atau pengaturan lingkungan yang berbeda. Untuk informasi selengkapnya, lihat Mempersonalisasi IDE.

Prasyarat

Anda memerlukan komponen berikut untuk menyelesaikan panduan ini:

  • Untuk menyelesaikan tutorial ini, Anda memerlukan beban kerja pengembangan desktop .NET dan Penyimpanan data dan pemrosesan yang diinstal di Visual Studio. Untuk menginstalnya, buka penginstal Visual Studio, lalu pilih Ubah(atau Lebih> Ubah) di samping versi Visual Studio yang ingin Anda ubah. Lihat Ubah Visual Studio.

  • Akses ke instans SQL Server atau SQL Server Express yang berjalan yang memiliki database sampel AdventureWorks Light (AdventureWorksLT) yang melekat padanya. Untuk mengunduh database, lihat Database sampel AdventureWorks.

Pemahaman sebelumnya tentang konsep berikut juga berguna, tetapi tidak diperlukan untuk menyelesaikan panduan:

Membuat proyek

Buat proyek WPF baru untuk menampilkan rekaman produk.

  1. Buka Visual Studio.

  2. Dari jendela awal, pilih Buat proyek baru.

  3. Cari templat proyek Aplikasi C# WPF dan ikuti langkah-langkah untuk membuat proyek, menamai proyek AdventureWorksProductsEditor.

    Visual Studio membuat proyek AdventureWorksProductsEditor.

Membuat himpunan data untuk aplikasi

Sebelum dapat membuat kontrol terikat data, Anda harus menentukan model data untuk aplikasi Anda dan menambahkannya ke jendela Sumber Data. Dalam panduan ini, Anda membuat himpunan data untuk digunakan sebagai model data.

  1. Pada menu Data klik Perlihatkan Sumber Data.

    Jendela Sumber Data terbuka.

  2. Di jendela Sumber Data, klik Tambahkan Sumber Data Baru.

    Wizard Konfigurasi Sumber Data terbuka.

  3. Pada halaman Pilih Jenis Sumber Data, pilih Database, lalu klik Berikutnya.

  4. Pada halaman Pilih Model Database, pilih Himpunan Data, lalu klik Berikutnya.

  5. Pada halaman Pilih Koneksi Data Anda, pilih salah satu opsi berikut ini:

    • Jika koneksi data ke database sampel AdventureWorksLT tersedia di daftar dropdown, pilih lalu klik Berikutnya.

    • Klik Koneksi Baru, dan buat koneksi ke database AdventureWorksLT.

  6. Pada kotak centang Simpan String Koneksi ion ke File Konfigurasi Aplikasi, pilih kotak centang Ya, simpan koneksi sebagai, lalu klik Berikutnya.

  7. Pada halaman Pilih Objek Database Anda, perluas Tabel, lalu pilih tabel Produk (SalesLT).

  8. Klik Selesai.

    Visual Studio menambahkan file AdventureWorksLTDataSet.xsd baru ke proyek, dan menambahkan item AdventureWorksLTDataSet yang sesuai ke jendela Sumber Data. File AdventureWorksLTDataSet.xsd menentukan himpunan data berjenis bernama AdventureWorksLTDataSet dan TableAdapter bernama ProductTableAdapter. Nantinya dalam panduan ini, Anda akan menggunakan ProductTableAdapter untuk mengisi himpunan data dengan data dan menyimpan perubahan kembali ke database.

  9. Bangun proyek.

Mengedit metode pengisian default TableAdapter

Untuk mengisi himpunan data dengan data, gunakan metode Fill dari ProductTableAdapter. Secara default, metode Fill mengisi ProductDataTable dalam AdventureWorksLTDataSet dengan semua baris data dari tabel Produk. Anda dapat mengubah metode ini untuk mengembalikan hanya subset baris. Untuk panduan ini, ubah metode Fill untuk mengembalikan hanya baris untuk produk yang memiliki foto.

  1. Di Penjelajah Solusi, klik dua kali file AdventureWorksLTDataSet.xsd.

    Perancang Himpunan data terbuka.

  2. Di perancang, klik kanan kueri Isi, GetData() dan pilih Konfigurasikan.

    Wizard Konfigurasi TableAdapter terbuka.

  3. Di halaman Masukkan Pernyataan SQL, tambahkan klausa berikut WHERE setelah SELECT pernyataan dalam kotak teks.

    WHERE ThumbnailPhotoFileName <> 'no_image_available_small.gif'

  4. Klik Selesai.

Menentukan antarmuka pengguna

Tambahkan beberapa tombol ke jendela dengan memodifikasi XAML di WPF Designer. Nantinya dalam panduan ini, Anda akan menambahkan kode yang memungkinkan pengguna untuk menggulir dan menyimpan perubahan pada rekaman produk dengan menggunakan tombol ini.

  1. Di Penjelajah Solusi, klik dua kali MainWindow.xaml.

    Jendela terbuka di WPF Designer.

  2. Dalam tampilan XAML perancang, tambahkan kode berikut di antara tag <Grid>:

    <Grid.RowDefinitions>
    <RowDefinition Height="75" />
    <RowDefinition Height="625" />
</Grid.RowDefinitions>
<Button HorizontalAlignment="Left" Margin="22,20,0,24" Name="backButton" Width="75">&lt;</Button>
<Button HorizontalAlignment="Left" Margin="116,20,0,24" Name="nextButton" Width="75">&gt;</Button>
<Button HorizontalAlignment="Right" Margin="0,21,46,24" Name="saveButton" Width="110">Save changes</Button>

  3. Bangun proyek.

Membuat kontrol terikat data

Buat kontrol yang menampilkan rekaman pelanggan dengan menyeret tabel Product dari jendela Sumber Data ke WPF Designer.

  1. Di jendela Sumber Data, klik menu daftar dropdown untuk simpul Produk dan pilih Detail.

  2. Perluas node Produk.

  3. Untuk contoh ini, beberapa bidang tidak akan ditampilkan, jadi klik menu daftar dropdown di samping simpul berikut dan pilih Tidak Ada:

    • ProductCategoryID

    • ProductModelID

    • ThumbnailPhotoFileName

    • rowguid

    • ModifiedDate

  4. Klik menu daftar dropdown di samping simpul ThumbNailPhoto dan pilih Gambar.

    Catatan

    Secara default, item di jendela Sumber Data yang mewakili gambar memiliki kontrol default yang diatur ke Tidak Ada. Ini karena gambar disimpan sebagai array byte dalam database, dan array byte dapat berisi apa pun dari array byte sederhana hingga file yang dapat dieksekusi dari aplikasi besar.

  5. Dari jendela Sumber Data, seret node Produk ke baris kisi di bawah baris yang berisi tombol.

    Visual Studio menghasilkan XAML yang menentukan sekumpulan kontrol yang terikat ke data dalam tabel Produk. Ini juga menghasilkan kode yang memuat data. Untuk informasi selengkapnya tentang XAML dan kode yang dihasilkan, lihat Mengikat kontrol WPF ke data dalam Visual Studio.

  6. Di perancang, klik kotak teks di samping label ID Produk.

  7. Di jendela Properti , pilih kotak centang di samping properti IsReadOnly .

Tambahkan kode yang memungkinkan pengguna untuk menggulir rekaman produk dengan menggunakan tombol < dan >.

  1. Di perancang, klik dua kali tombol < pada permukaan jendela.

    Visual Studio membuka file code-behind, dan membuat penanganan aktivitas backButton_Click baru untuk peristiwa Click tersebut.

  2. Ubah penanganan aktivitas Window_Loaded, sehingga ProductViewSource, AdventureWorksLTDataSet, dan AdventureWorksLTDataSetProductTableAdapter berada di luar metode dan dapat diakses oleh seluruh formulir. Nyatakan hanya ini untuk menjadi global ke formulir, dan tetapkan dalam penanganan aktivitas Window_Loaded yang mirip dengan yang berikut ini:

    private AdventureWorksProductsEditor.AdventureWorksLTDataSet AdventureWorksLTDataSet;
private AdventureWorksProductsEditor.AdventureWorksLTDataSetTableAdapters.ProductTableAdapter adventureWorksLTDataSetProductTableAdapter;
private System.Windows.Data.CollectionViewSource productViewSource;

private void Window_Loaded(object sender, RoutedEventArgs e)
{
    AdventureWorksLTDataSet = ((AdventureWorksProductsEditor.AdventureWorksLTDataSet)(this.FindResource("adventureWorksLTDataSet")));
    // Load data into the table Product. You can modify this code as needed.
    adventureWorksLTDataSetProductTableAdapter = new AdventureWorksProductsEditor.AdventureWorksLTDataSetTableAdapters.ProductTableAdapter();
    adventureWorksLTDataSetProductTableAdapter.Fill(AdventureWorksLTDataSet.Product);
    productViewSource = ((System.Windows.Data.CollectionViewSource)(this.FindResource("productViewSource")));
    productViewSource.View.MoveCurrentToFirst();
}

  3. Tambahkan kode berikut ke penanganan aktivitas backButton_Click:

    if (productViewSource.View.CurrentPosition > 0)
{
    productViewSource.View.MoveCurrentToPrevious();
}

  4. Kembali ke perancang dan klik dua kali tombol >.

  5. Tambahkan kode berikut ke penanganan aktivitas nextButton_Click:

    if (productViewSource.View.CurrentPosition < ((CollectionView)productViewSource.View).Count - 1)
{
    productViewSource.View.MoveCurrentToNext();
}

Menyimpan perubahan ke rekaman produk

Tambahkan kode yang memungkinkan pengguna menyimpan perubahan ke rekaman produk dengan menggunakan tombol Simpan perubahan.

  1. Di perancang, klik dua kali tombol Simpan perubahan.

    Visual Studio membuka file code-behind, dan membuat penanganan aktivitas saveButton_Click baru untuk peristiwa Click tersebut.

  2. Tambahkan kode berikut ke penanganan aktivitas saveButton_Click:

    adventureWorksLTDataSetProductTableAdapter.Update(AdventureWorksLTDataSet.Product);

    Catatan

    Contoh ini menggunakan metode Save dari TableAdapter untuk menyimpan perubahan. Ini sesuai dalam panduan ini, karena hanya satu tabel data yang sedang diubah. Jika Anda perlu menyimpan perubahan ke beberapa tabel data, Anda dapat menggunakan metode UpdateAll dari TableAdapterManager yang Visual Studio hasilkan dengan himpunan data Anda. Untuk informasi selengkapnya, lihat TableAdapters.

Uji aplikasi

Membuat dan menjalankan aplikasi. Verifikasi bahwa Anda bisa menampilkan dan memperbarui catatan produk.

  1. Tekan F5.

    Aplikasi membangun dan menjalankan. Verifikasi hal berikut:

    • Kotak teks menampilkan data dari rekaman produk pertama yang memiliki foto. Produk ini memiliki ID produk 713, dan nama Long-Sleeve Logo Jersey, S.

    • Anda dapat mengklik tombol > atau < untuk menavigasi melalui rekaman produk lainnya.

  2. Di salah satu catatan produk, ubah nilai Ukuran, lalu klik Simpan perubahan.

  3. Tutup aplikasi, lalu mulai ulang aplikasi dengan menekan F5 di Visual Studio.

  4. Navigasikan ke catatan produk yang Anda ubah, dan verifikasi bahwa perubahan tetap ada.

  5. Tutup aplikasi.

Langkah berikutnya

Setelah menyelesaikan panduan ini, Anda mungkin mencoba tugas terkait berikut:

Konten terkait