Bagikan melalui

Mengikat kontrol WPF ke layanan data WCF

  • Artikel

Dalam panduan ini, Anda akan membuat aplikasi WPF yang berisi kontrol terikat data. Kontrol terikat ke catatan pelanggan yang dienkapsulasi dalam Layanan Data WCF. Anda juga akan menambahkan tombol yang dapat digunakan pelanggan untuk melihat dan memperbarui rekaman.

Panduan ini mengilustrasikan tugas-tugas berikut:

  • Membuat Model Data Entitas yang dihasilkan dari data dalam database sampel AdventureWorksLT.

  • Membuat Layanan Data WCF yang mengekspos data dalam Model Data Entitas ke aplikasi WPF.

  • Membuat sekumpulan kontrol terikat data dengan menyeret item dari jendela Sumber Data ke perancang WPF.

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

  • Membuat tombol yang menyimpan perubahan pada data dalam kontrol ke Layanan Data WCF 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:

  • Visual Studio

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

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

  • Layanan Data WCF.

  • Model data di WCF Data Services.

  • Model Data Entitas dan Kerangka Kerja Entitas ADO.NET. Untuk informasi selengkapnya, lihat Gambaran umum Kerangka Kerja Entitas.

  • Pengikatan data WPF. Untuk informasi selengkapnya, lihat Gambaran umum Pengikatan Data.

Membuat proyek layanan

  1. Mulai panduan ini dengan membuat proyek C# atau Visual Basic ASP.NET Web Application . Beri nama proyek AdventureWorksService.

  2. Di Penjelajah Solusi, klik kanan Default.aspx dan pilih Hapus. File ini tidak diperlukan untuk panduan.

Membuat Model Data Entitas untuk layanan

Untuk mengekspos data ke aplikasi dengan menggunakan Layanan Data WCF, Anda harus menentukan model data untuk layanan tersebut. Layanan Data WCF mendukung dua jenis model data: Model Data Entitas, dan model data kustom yang ditentukan dengan menggunakan objek runtime bahasa umum (CLR) yang mengimplementasikan IQueryable<T> antarmuka. Dalam panduan ini, Anda membuat Model Data Entitas untuk model data.

  1. Pada menu Proyek, klik Tambahkan Item Baru.

  2. Di daftar Templat terinstal, klik Data, lalu pilih item proyek Model Data Entitas ADO.NET.

  3. Ubah nama menjadi AdventureWorksModel.edmx, dan klik Tambahkan.

    Wizard Model Data Entitas terbuka.

  4. Pada halaman Pilih Konten Model, klik Hasilkan dari database, dan 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, pilihlah.

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

  6. Pada halaman Pilih Koneksi ion Data Anda, pastikan bahwa opsi Simpan pengaturan koneksi entitas di App.Config sebagai dipilih, lalu klik Berikutnya.

  7. Pada halaman Pilih Objek Database Anda, perluas Tabel, lalu pilih tabel SalesOrderHeader .

  8. Klik Selesai.

Buat Layanan

Buat Layanan Data WCF untuk mengekspos data dalam Model Data Entitas ke aplikasi WPF:

  1. Pada menu Proyek, pilih Tambahkan Item Baru.

  2. Di daftar Templat terinstal, klik Web, lalu pilih item proyek WCF Data Service.

  3. Di kotak Nama , ketik AdventureWorksService.svc , dan klik Tambahkan .

    Visual Studio menambahkan ke AdventureWorksService.svc proyek.

Mengonfigurasi layanan

Anda harus mengonfigurasi layanan untuk beroperasi pada Model Data Entitas yang Anda buat:

  1. AdventureWorks.svc Dalam file kode, ganti deklarasi kelas AdventureWorksService dengan kode berikut.

    public class AdventureWorksService : DataService<AdventureWorksLTEntities>
{
    // This method is called only once to initialize service-wide policies.
    public static void InitializeService(IDataServiceConfiguration config)
    {
        config.SetEntitySetAccessRule("SalesOrderHeaders", EntitySetRights.All);
    }
}

    Kode ini memperbarui kelas AdventureWorksService , sehingga berasal dari DataService<T> yang beroperasi pada AdventureWorksLTEntities kelas konteks objek di Model Data Entitas Anda. Ini juga memperbarui InitializeService metode untuk memungkinkan klien layanan akses baca/tulis penuh ke SalesOrderHeader entitas.

  2. Bangun proyek, dan verifikasi bahwa proyek dibangun tanpa kesalahan.

Membuat aplikasi klien WPF

Untuk menampilkan data dari Layanan Data WCF, buat aplikasi WPF baru dengan sumber data yang didasarkan pada layanan. Nantinya dalam panduan ini, Anda akan menambahkan kontrol terikat data ke aplikasi.

  1. Di Penjelajah Solusi, klik kanan simpul solusi, klik Tambahkan, dan pilih Proyek Baru.

  2. Dalam dialog Proyek Baru, perluas Visual C# atau Visual Basic, lalu pilih Windows.

  3. Pilih templat proyek Aplikasi WPF.

  4. Dalam kotak Nama , ketik AdventureWorksSalesEditor, dan klik OK.

    Visual Studio menambahkan AdventureWorksSalesEditor proyek ke solusi.

  5. Pada menu Data klik Perlihatkan Sumber Data.

    Jendela Sumber Data terbuka.

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

    Wizard Konfigurasi Sumber Data terbuka.

  7. Di halaman Pilih Tipe Sumber Data wizard, pilih Layanan, lalu klik Berikutnya.

  8. Dalam kotak dialog Tambahkan Referensi Layanan, klik Temukan.

    Visual Studio mencari solusi saat ini untuk layanan yang tersedia, dan menambahkan AdventureWorksService.svc ke daftar layanan yang tersedia dalam kotak Layanan .

  9. Dalam kotak Namespace , ketik AdventureWorksService.

  10. Dalam kotak Layanan , klik AdventureWorksService.svc, lalu klik OK.

    Visual Studio mengunduh informasi layanan lalu kembali ke wizard Konfigurasi Sumber Data.

  11. Di halaman Tambahkan Referensi Layanan, klik Selesai.

    Visual Studio menambahkan simpul yang mewakili data yang dikembalikan oleh layanan ke jendela Sumber Data.

Menentukan antarmuka pengguna

Tambahkan beberapa tombol ke jendela dengan memodifikasi XAML di perancang WPF. Nantinya dalam panduan ini, Anda akan menambahkan kode yang memungkinkan pengguna untuk melihat dan memperbarui rekaman penjualan dengan menggunakan tombol ini.

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

    Jendela terbuka di perancang WPF.

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

    <Grid.RowDefinitions>
    <RowDefinition Height="75" />
    <RowDefinition Height="525" />
</Grid.RowDefinitions>
<Button HorizontalAlignment="Left" Margin="22,20,0,24" Name="backButton" Width="75"><</Button>
<Button HorizontalAlignment="Left" Margin="116,20,0,24" Name="nextButton" Width="75">></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 simpul SalesOrderHeaders dari jendela Sumber Data ke perancang.

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

  2. Perluas simpul SalesOrderHeaders .

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

    • CreditCardApprovalCode

    • ModifiedDate

    • OnlineOrderFlag

    • RevisiJumlah

    • rowguid

    Tindakan ini mencegah Visual Studio membuat kontrol terikat data untuk simpul ini di langkah berikutnya. Untuk panduan ini, asumsikan bahwa pengguna akhir tidak perlu melihat data ini.

  4. Dari jendela Sumber Data, seret simpul SalesOrderHeaders ke baris kisi di bawah baris yang berisi tombol.

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

  5. Di perancang, klik kotak teks di samping label ID Pelanggan.

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

  7. Atur properti IsReadOnly untuk setiap kotak teks berikut:

    • Nomor Pesanan Pembelian

    • ID Pesanan Penjualan

    • Nomor Pesanan Penjualan

Memuat data dari layanan

Gunakan objek proksi layanan untuk memuat data penjualan dari layanan. Kemudian tetapkan data yang dikembalikan ke sumber data untuk CollectionViewSource di jendela WPF.

  1. Di perancang, untuk membuat Window_Loaded penanganan aktivitas, klik dua kali teks yang berbunyi: MainWindow.

  2. Ganti penanganan aktivitas dengan kode berikut. Pastikan Anda mengganti localhost alamat dalam kode ini dengan alamat host lokal di komputer pengembangan Anda.

    private AdventureWorksService.AdventureWorksLTEntities dataServiceClient;
private System.Data.Services.Client.DataServiceQuery<AdventureWorksService.SalesOrderHeader> salesQuery;
private CollectionViewSource ordersViewSource;

private void Window_Loaded(object sender, RoutedEventArgs e)
{
    // TODO: Modify the port number in the following URI as required.
    dataServiceClient = new AdventureWorksService.AdventureWorksLTEntities(
        new Uri("http://localhost:45899/AdventureWorksService.svc"));
    salesQuery = dataServiceClient.SalesOrderHeaders;

    ordersViewSource = ((CollectionViewSource)(this.FindResource("salesOrderHeadersViewSource")));
    ordersViewSource.Source = salesQuery.Execute();
    ordersViewSource.View.MoveCurrentToFirst();
}

Tambahkan kode yang memungkinkan pengguna untuk menggulir rekaman penjualan 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. Tambahkan kode berikut ke penanganan aktivitas yang dihasilkan backButton_Click :

    if (ordersViewSource.View.CurrentPosition > 0)
    ordersViewSource.View.MoveCurrentToPrevious();

  3. Kembali ke perancang, dan klik dua kali tombol > .

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

  4. Tambahkan kode berikut ke penanganan aktivitas yang dihasilkan nextButton_Click :

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

Menyimpan perubahan pada rekaman penjualan

Tambahkan kode yang memungkinkan pengguna untuk melihat dan menyimpan perubahan pada rekaman penjualan 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.

    AdventureWorksService.SalesOrderHeader currentOrder = (AdventureWorksService.SalesOrderHeader)ordersViewSource.View.CurrentItem;
dataServiceClient.UpdateObject(currentOrder);
dataServiceClient.SaveChanges();

Uji aplikasi

Buat dan jalankan aplikasi untuk memverifikasi bahwa Anda dapat melihat dan memperbarui catatan pelanggan:

  1. Pada menu Build , klik Build Solution. Verifikasi bahwa solusi dibangun tanpa kesalahan.

  2. Tekan Ctrl+F5.

    Visual Studio memulai proyek AdventureWorksService , tanpa men-debugnya.

  3. Di Penjelajah Solusi, klik kanan proyek AdventureWorksSalesEditor.

  4. Pada menu klik kanan (menu konteks), di bawah Debug, klik Mulai instans baru.

    Aplikasi berjalan. Verifikasi hal berikut:

    • Kotak teks menampilkan bidang data yang berbeda dari rekaman penjualan pertama, yang memiliki ID pesanan penjualan 71774.

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

  5. Di salah satu rekaman penjualan, ketik beberapa teks dalam kotak Komentar , lalu klik Simpan perubahan.

  6. Tutup aplikasi, lalu mulai aplikasi lagi dari Visual Studio.

  7. Navigasikan ke catatan penjualan yang Anda ubah, dan verifikasi bahwa perubahan tetap ada setelah Anda menutup dan membuka kembali aplikasi.

  8. Tutup aplikasi.

Langkah berikutnya

Setelah menyelesaikan panduan ini, Anda dapat melakukan tugas terkait berikut:

  • Pelajari cara menggunakan jendela Sumber Data di Visual Studio untuk mengikat kontrol WPF ke jenis sumber data lainnya. Untuk informasi selengkapnya, lihat Mengikat kontrol WPF ke himpunan data.

  • Pelajari cara menggunakan jendela Sumber Data di Visual Studio untuk menampilkan data terkait (yaitu, data dalam hubungan induk-anak) dalam kontrol WPF. Untuk informasi selengkapnya, lihat Panduan: Menampilkan data terkait dalam aplikasi WPF.

Konten terkait