Bui 6 Thm Cp nht Xa d liu
Buổi 6 Thêm – Cập nhật – Xóa dữ liệu Trần Minh Thái 1
Mục tiêu Các thao tác cơ bản trong việc xử lý dữ liệu trên Data. Grid: 1. Nhập mới dữ liệu 2. Cập nhật dữ liệu 3. Sửa dữ liệu 2 2
Nhập mới dữ liệu
Nhập thêm sản phẩm mới Thiết kế giao diện cho phép nhập thông tin: 1. Mã sản phẩm (txt. ID) 2. Tên sản phẩm (txt. Name) Yêu cầu • Thông tin sản phẩm sẽ hiển thị trên lưới (data. Grid) • Nhấn nút Thêm mới (button. Add) sẽ thêm sản phẩm vào lưới 4
<Stack. Panel Margin="20"> <Stack. Panel> <Group. Box Header="Nhập thông tin"> <Grid. Column. Definitions> <Column. Definition/> <Column. Definition Width="2*"/> </Grid. Column. Definitions> <Grid. Row. Definitions> <Row. Definition/> </Grid. Row. Definitions> <Label Grid. Row="0" Grid. Column="0" Content="Mã sản phẩm"/> <Text. Box Grid. Row="0" Grid. Column="1" Name="txt. ID"/> <Label Grid. Row="1" Grid. Column="0" Content="Tên sản phẩm"/> <Text. Box Grid. Row="1" Grid. Column="1" Name="txt. Name"/> </Grid> </Group. Box> </Stack. Panel> <Label Content="Danh sách sản phẩm"/> <Data. Grid Name="data. Grid" Items. Source="{Binding}" Auto. Generate. Columns="false" Height="200" Vertical. Scroll. Bar. Visibility="Auto"> <Data. Grid. Columns> <Data. Grid. Text. Column Header="Mã sản phẩm" Binding="{Binding ID}"/> <Data. Grid. Text. Column Header="Tên sản phẩm" Binding="{Binding Name}"/> </Data. Grid. Columns> </Data. Grid> <Button Content="Thêm mới" Name="button. Add" Width="100" Height="35" Click="button. Add_Click"/> </Stack. Panel>
public partial class Add. New. Product : Window { List<Product> list. Product = Product. Get. Data(). To. List(); public Add. New. Product() { Initialize. Component(); data. Grid. Items. Source = list. Product; } private void button. Add_Click(object sender, Routed. Event. Args e) { var product = new Product { ID = int. Parse(txt. ID. Text), Name = txt. Name. Text }; list. Product. Add(product); data. Grid. Items. Refresh(); } } 6
Kết quả thực thi 7
Bài tập Cải tiến theo yêu cầu sau: 1. Chỉ thêm nếu nhập đủ thông tin (mã sản phẩm phải là số nguyên) 2. Sau khi nhấn nút Thêm mới thì ô mã sản phẩm và tên sản phẩm được xóa trống 8
Cập nhật dữ liệu
Cập nhật thông tin sản phẩm Cho phép nhập thông tin: 1. Mã sản phẩm (txt. ID) 2. Tên sản phẩm (txt. Name) Yêu cầu • Thông tin sản phẩm sẽ hiển thị trên lưới (data. Grid) • Nhấn nút Cập nhật (button. Update) sẽ cập nhật sản phẩm có mã số txt. ID vào lưới 10
public partial class Update. Product : Window { List<Product> list. Product = Product. Get. Data(). To. List(); public Update. Product() { Initialize. Component(); data. Grid. Items. Source = list. Product; } private void button. Update_Click(object sender, Routed. Event. Args e) { var product = list. Product. Find(m => m. ID == Int 32. Parse(txt. ID. Text)); product. Name = txt. Name. Text; data. Grid. Items. Refresh(); } }
Kết quả thực thi 12
Bài tập 1. Chọn 1 dòng trên data. Grid thì sẽ hiển thị thông tin trên ô textbox tương ứng để sửa thông tin 2. Nếu chưa chọn hoặc chưa nhập thông tin vào tên sản phẩm thì nút Cập nhật bị mờ (không cho chọn) 13
public partial class Update. Product : Window { List<Product> list. Product = Product. Get. Data(). To. List(); public Update. Product() { Initialize. Component(); data. Grid. Items. Source = list. Product; } private void button. Update_Click(object sender, Routed. Event. Args e) { var product = list. Product. Find(m => m. ID == Int 32. Parse(txt. ID. Text)); product. Name = txt. Name. Text; data. Grid. Items. Refresh(); } private void data. Grid_Selection. Changed(object sender, Selection. Changed. Event. Args e) { Product product = (Product)data. Grid. Selected. Item; txt. ID. Text = product. ID. To. String(); txt. Name. Text = product. Name; } }
Xóa dữ liệu
Xóa một sản phẩm Nhập mã số sản phẩm, nhấn nút Xóa để xóa sản phẩm có mã số tương ứng 16
public partial class Delete. Product : Window { List<Product> list. Product = Product. Get. Data(). To. List(); public Delete. Product() { Initialize. Component(); data. Grid. Items. Source = list. Product; } private void button. Xoa_Click(object sender, Routed. Event. Args e) { var product = list. Product. Find(m => m. ID == Int 32. Parse(txt. ID. Text)); list. Product. Remove(product); data. Grid. Items. Refresh(); } }
Kết quả thực thi 18
Binding Data. Grid với Text. Box
Mục tiêu • Dùng để hiển thị chi tiết đối tượng được chọn trên Data. Grid lên các Text. Box • Tận dụng sức mạnh binding của WPF giúp hạn chế việc xử lý trên code behind 20
<Label Grid. Row="0" Grid. Column="0" Content="Mã sản phẩm"/> <Text. Box Grid. Row="0" Grid. Column="1" Name="txt. ID" Text="{Binding Element. Name=data. Grid, Path=Selected. Item. ID}"/> <Label Grid. Row="1" Grid. Column="0" Content="Tên sản phẩm"/> <Text. Box Grid. Row="1" Grid. Column="1" Name="txt. Name" Text="{Binding Element. Name=data. Grid, Path=Selected. Item. Name}"/> public partial class Binding. Example : Window { List<Product> list. Product = Product. Get. Data(). To. List(); public Binding. Example() { Initialize. Component(); data. Grid. Items. Source = list. Product; } private void button. Update_Click(object sender, Routed. Event. Args e) { Product product = (Product)data. Grid. Selected. Item; txt. ID. Text = product. ID. To. String(); txt. Name. Text = product. Name; } }
Kết quả thực thi 22
Thay đổi trực tiếp grid khi nhập textbox <Text. Box Grid. Row="1" Grid. Column="1" Name="txt. Name" Text="{Binding Element. Name=data. Grid, Path=Selected. Item. Name, Mode=Two. Way, Update. Source. Trigger=Property. Changed}"/> Mode=Two. Way: dùng để binding 2 chiều giữa data. Grid và Text. Box Update. Source. Trigger=Property. Changed: dùng để cập nhật ngay khi có thay đổi giá trị thuộc tính 23
Q&A 24 24
- Slides: 24
