Bài 8 – Kỹ thuật Binding dữ liệu MongoDB lên ListView WPF


bài 7 chúng ta đã thao tác tốt với các kỹ thật Filter rồi, bài này Tui hướng dẫn các bạn kỹ thuật Binding dữ liệu MongoDB lên ListView trong WPF như thế nào. Đây là một trog những bài toán mà chúng ta thường gặp khi triển khai dự án.

Kết thúc bài này bạn phải làm được chương trình như dưới đây:

Bước 1:

Ta tạo một Project tên là BindingMongoDBCSharp, cách tham chiếu Driver MongoDB cho C# Các bạn phải tự xem lại bài 4, trong bài này Tui không nói lại nữa.

Bước 2:

Tạo Model class tên là Product trong C# (bấm chuột phải vào Project/ Add/ new Class), Thuộc tính của lớp Product này sẽ match đúng với thuộc tính khai báo trong MongoDB Compass (xem lại cơ sở dữ liệu trình bày trong bài 3):


using MongoDB.Bson;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace BindingMongoDBCSharp
{
public class Product
{
public object _id { get; set; }
public string Ma { get; set; }
public string Ten { get; set; }
public double DonGia { get; set; }
}
}

Bước 3:

Thiết kế giao diện cho phần mềm, dùng ListView, cấu hình các thuộc tính để Binding (MainWindow.xaml):


Lưu ý, control ListView bạn kéo thả trực tiếp từ thanh toolbox vào. Sau đó định nghĩa các Cột:

Header=”Ma”==>cột Mã (hiển thị gì  bạn tự gõ vào đây, tên gì cũng được miễn sao phù hợp)

Header=”Tên”==>cột Tên (tương tự).

Header=”Đơn Giá”==>cột Đơn giá (tương tự)

Trong mỗi Column, các Em chú ý Tui để thuộc tính DisplayMemberBinding có giá trị {Binding Ma} , {Binding Ten}, {Binding DonGia} . Lưu ý các chữ Ma, Ten, DonGia là các thuộc tính của lớp mà ta muốn Binding, tức là nó phải đúng chính xác thuộc tính mà ta khai báo cho Lớp Product(Xem lại Lớp Product ở trên)

Ta đổ dữ liệu vào ListView này bằng lệnh ItemsSource. Nó sẽ tự đưa các giá trị tương ứng với các thuộc tính Ma, Ten, DonGia lên giao diện (Binding).

Bước 4:

Coding cho MainWindow.xaml.cs:


using MongoDB.Bson;
using MongoDB.Bson.Serialization;
using MongoDB.Driver;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace BindingMongoDBCSharp
{
///

/// Interaction logic for MainWindow.xaml
/// 

public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}

private void btnLoadProduct_Click(object sender, RoutedEventArgs e)
{
MongoClient client = new MongoClient("mongodb://localhost:27017");
IMongoDatabase database = client.GetDatabase("QuanLySanPham");
IMongoCollection collection = database.GetCollection("Product");

List documents = collection.Find(new BsonDocument()).ToList();

List dsProduct = new List();
foreach (BsonDocument document in documents)
{
//Convert BsonDocument về C# model class:
dsProduct.Add(BsonSerializer.Deserialize(document));
}
//đổ dữ liệu lên ListView
lvProduct.ItemsSource = dsProduct;
}
}
}

Coding ở trên có 3 nhiệm vụ:

  • Nhiệm vụ 1: Kết nối và lấy dữ liệu từ bảng Product trong MongoDB
  • Nhiệm vụ 2: Convert BSonDocument về Model class C#, đưa vào List<Product>dsProduct (tên của ListView)
  • Nhiệm vụ 3: Đổ List<Product> lên ListView bằng lệnh lvProduct.ItemsSource=dsProduct

Chạy chương trình lên ta có được kết quả như mong muốn.

Các bạn có thể tải source code đầy đủ ở đây: Source code Binding

Bài học Sau Tui sẽ hướng dẫn các bạn các kỹ thuật Sắp xếp dữ liệu trong MongoDB bằng C#-WPF, các bạn chú ý theo dõi.

Các khóa học online khác, bạn có thể tham khảo tại đây: http://communityuni.com/

Chúc các bạn thành công!

3 responses

  1. […] bài 8 ta đã biết cách Binding dữ liệu lên LiewView trong WPF, bài này Tui sẽ hướng dẫn […]

  2. […] Bài 8 – Kỹ thuật Binding dữ liệu MongoDB lên ListView WPF […]

  3. […] Ta sẽ viết thêm 1 lớp model Product để mô hình hóa dữ liệu từ MongoDB về Kotlin class (tương tự như C# mà ta đã được học) […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: