Bagikan melalui


Menggunakan database SQL Server di aplikasi UWP

Aplikasi Anda dapat terhubung langsung ke database SQL Server lalu menyimpan dan mengambil data dengan menggunakan kelas di namespace System.Data.SqlClient .

Dalam panduan ini, kami akan menunjukkan kepada Anda salah satu cara untuk melakukannya. Jika Anda menginstal database sampel Northwind ke instans SQL Server Anda, lalu menggunakan cuplikan ini, Anda akan berakhir dengan UI dasar yang menampilkan produk dari database sampel Northwind.

Produk Northwind

Tip

Anda juga bisa mendapatkan skrip untuk membuat database sampel Northwind dan pub dari repositori GitHub Sampel SQL Server.

Cuplikan yang muncul dalam panduan ini didasarkan pada sampel yang lebih lengkap ini.

Pertama, siapkan solusi Anda

Untuk menyambungkan aplikasi Anda langsung ke database SQL Server, pastikan versi minimum proyek Anda menargetkan pembaruan Windows 10 Fall Creators (Build 16299) atau yang lebih baru. Anda dapat menemukan informasi tersebut di halaman properti proyek UWP Anda.

Versi minimum Windows SDK

Buka file Package.appxmanifest proyek UWP Anda di perancang manifes.

Di tab Kemampuan , pilih kotak centang Autentikasi Perusahaan jika Anda menggunakan Autentikasi Windows untuk mengautentikasi SQL Server Anda.

Kemampuan Autentikasi Perusahaan

Penting

Anda juga harus memilih Internet (Klien & Server), Internet (Klien), dan Jaringan Privat (Klien & Server), terlepas dari apakah Anda menggunakan Autentikasi Windows atau tidak.

Menambahkan dan mengambil data dalam database SQL Server

Di bagian ini, kita akan melakukan hal-hal ini:

1️⃣ Tambahkan string koneksi.

2️⃣ Buat kelas untuk menyimpan data produk.

3️⃣ Ambil produk dari database SQL Server.

4️⃣ Tambahkan antarmuka pengguna dasar.

5️⃣ Isi UI dengan Produk.

Catatan

Bagian ini mengilustrasikan salah satu cara untuk mengatur kode akses data Anda. Ini dimaksudkan hanya untuk memberikan contoh bagaimana Anda dapat menggunakan System.Data.SqlClient untuk menyimpan dan mengambil data dari database SQL Server. Anda dapat mengatur kode Anda dengan cara apa pun yang paling masuk akal untuk desain aplikasi Anda.

Menambahkan string koneksi

Dalam file App.xaml.cs, tambahkan properti ke App kelas , yang memberikan kelas lain dalam akses solusi Anda ke string koneksi.

String koneksi kami menunjuk ke database Northwind dalam instans SQL Server Express. string koneksi dalam cuplikan ini mengasumsikan Anda menyimpan nama SQLEXPRESS instans default saat menginstal SQL Server Express. Anda dapat membuat perubahan pada string koneksi agar sesuai dengan instans, database, dan metode autentikasi SQL Server Anda.

sealed partial class App : Application
{
    // Create a connection string using Windows Authentication.
    private string connectionString =
        @"Data Source=.\SQLEXPRESS;Initial Catalog=NORTHWIND;Integrated Security=SSPI";

    public string ConnectionString { get => connectionString; set => connectionString = value; }

    ...
}

Penting

Dalam aplikasi produksi, informasi koneksi harus disimpan dengan aman dalam konfigurasi aplikasi (lihat Menambahkan Azure App Configuration dengan menggunakan Visual Studio Connected Services). String koneksi dan rahasia lainnya tidak boleh dikodekan secara permanen.

Membuat kelas untuk menyimpan data produk

Kami akan membuat kelas yang mengimplementasikan peristiwa INotifyPropertyChanged sehingga kami dapat mengikat atribut di UI XAML kami ke properti di kelas ini.

public class Product : INotifyPropertyChanged
{
    public int ProductID { get; set; }
    public string ProductCode { get { return ProductID.ToString(); } }
    public string ProductName { get; set; }
    public string QuantityPerUnit { get; set; }
    public decimal UnitPrice { get; set; }
    public string UnitPriceString { get { return UnitPrice.ToString("######.00"); } }
    public int UnitsInStock { get; set; }
    public string UnitsInStockString { get { return UnitsInStock.ToString("#####0"); } }
    public int CategoryId { get; set; }

    public event PropertyChangedEventHandler PropertyChanged;
    private void NotifyPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

}

Mengambil produk dari database SQL Server

Dalam file MainPage.xaml.cs proyek UWP, buat metode yang mendapatkan produk dari database sampel Northwind, lalu mengembalikannya sebagai kumpulan Product instans ObservableCollection.

public ObservableCollection<Product> GetProducts(string connectionString)
{
    const string GetProductsQuery = "select ProductID, ProductName, QuantityPerUnit," +
       " UnitPrice, UnitsInStock, Products.CategoryID " +
       " from Products inner join Categories on Products.CategoryID = Categories.CategoryID " +
       " where Discontinued = 0";

    var products = new ObservableCollection<Product>();
    try
    {
        using (var conn = new SqlConnection(connectionString))
        {
            conn.Open();
            if (conn.State == System.Data.ConnectionState.Open)
            {
                using (SqlCommand cmd = conn.CreateCommand())
                {
                    cmd.CommandText = GetProductsQuery;
                    using (SqlDataReader reader = cmd.ExecuteReader())
                    {
                        while (reader.Read())
                        {
                            var product = new Product();
                            product.ProductID = reader.GetInt32(0);
                            product.ProductName = reader.GetString(1);
                            product.QuantityPerUnit = reader.GetString(2);
                            product.UnitPrice = reader.GetDecimal(3);
                            product.UnitsInStock = reader.GetInt16(4);
                            product.CategoryId = reader.GetInt32(5);
                            products.Add(product);
                        }
                    }
                }
            }
        }
        return products;
    }
    catch (Exception eSql)
    {
        Debug.WriteLine($"Exception: {eSql.Message}");
    }
    return null;
}

Menambahkan antarmuka pengguna dasar

Tambahkan XAML berikut ke file MainPage.xaml dari proyek UWP.

XAML ini membuat ListView untuk menampilkan setiap produk yang Anda kembalikan di cuplikan sebelumnya, dan mengikat atribut setiap baris di ListView ke properti yang kami tentukan di Product kelas .

<Grid Background="{ThemeResource SystemControlAcrylicWindowBrush}">
    <RelativePanel>
        <ListView Name="InventoryList"
                  SelectionMode="Single"
                  ScrollViewer.VerticalScrollBarVisibility="Auto"
                  ScrollViewer.IsVerticalRailEnabled="True"
                  ScrollViewer.VerticalScrollMode="Enabled"
                  ScrollViewer.HorizontalScrollMode="Enabled"
                  ScrollViewer.HorizontalScrollBarVisibility="Auto"
                  ScrollViewer.IsHorizontalRailEnabled="True"
                  Margin="20">
            <ListView.HeaderTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal"  >
                        <TextBlock Text="ID" Margin="8,0" Width="50" Foreground="DarkRed" />
                        <TextBlock Text="Product description" Width="300" Foreground="DarkRed" />
                        <TextBlock Text="Packaging" Width="200" Foreground="DarkRed" />
                        <TextBlock Text="Price" Width="80" Foreground="DarkRed" />
                        <TextBlock Text="In stock" Width="80" Foreground="DarkRed" />
                    </StackPanel>
                </DataTemplate>
            </ListView.HeaderTemplate>
            <ListView.ItemTemplate>
                <DataTemplate x:DataType="local:Product">
                    <StackPanel Orientation="Horizontal" >
                        <TextBlock Name="ItemId"
                                    Text="{x:Bind ProductCode}"
                                    Width="50" />
                        <TextBlock Name="ItemName"
                                    Text="{x:Bind ProductName}"
                                    Width="300" />
                        <TextBlock Text="{x:Bind QuantityPerUnit}"
                                   Width="200" />
                        <TextBlock Text="{x:Bind UnitPriceString}"
                                   Width="80" />
                        <TextBlock Text="{x:Bind UnitsInStockString}"
                                   Width="80" />
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </RelativePanel>
</Grid>

Tampilkan produk di ListView

Buka file MainPage.xaml.cs, dan tambahkan kode ke konstruktor MainPage kelas yang mengatur properti ItemSource dari ListView ke ObservableCollection Product instans.

public MainPage()
{
    this.InitializeComponent();
    InventoryList.ItemsSource = GetProducts((App.Current as App).ConnectionString);
}

Mulai proyek dan lihat produk dari database sampel Northwind muncul di UI.

Produk Northwind

Jelajahi namespace System.Data.SqlClient untuk melihat hal lain yang dapat Anda lakukan dengan data di database SQL Server Anda.

Masalah saat menyambungkan ke database Anda?

Dalam kebanyakan kasus, beberapa aspek konfigurasi SQL Server perlu diubah. Jika Anda dapat menyambungkan ke database Anda dari jenis aplikasi desktop lain seperti aplikasi Formulir Windows atau WPF, pastikan Anda telah mengaktifkan TCP/IP untuk SQL Server. Anda dapat melakukannya di konsol Manajemen Komputer. (Lihat Alat Windows/Alat Administratif untuk informasi selengkapnya.)

Manajemen Komputer

Kemudian, pastikan layanan Browser SQL Server Anda berjalan.

Layanan SQL Server Browser

Langkah berikutnya

Menggunakan database ringan untuk menyimpan data di perangkat pengguna

Lihat Menggunakan database SQLite di aplikasi UWP.

Berbagi kode antara aplikasi yang berbeda di beberapa platform

Lihat Berbagi kode antara desktop dan UWP.

Menambahkan halaman detail master dengan back end Azure SQL

Lihat Sampel Database Pesanan Pelanggan.