AddEditClassesViewModel具体代码如下所示:
namespace SIMS.ClassesModule.ViewModels { public class AddEditClassesViewModel : BindableBase, IDialogAware { #region 属性和构造函数 /// <summary> /// 班级实体 /// </summary> private ClassesInfo classes; public ClassesInfo Classes { get { return classes; } set { SetProperty(ref classes ,value); } } private List<StudentEntity> monitors; public List<StudentEntity> Monitors { get { return monitors; } set { SetProperty(ref monitors , value); } } private StudentEntity monitor; public StudentEntity Monitor { get { return monitor; } set { SetProperty(ref monitor, value); } } public AddEditClassesViewModel() { } #endregion #region Command private DelegateCommand loadedCommand; public DelegateCommand LoadedCommand { get { if (loadedCommand == null) { loadedCommand = new DelegateCommand(Loaded); } return loadedCommand; } } private void Loaded() { this.Monitors= new List<StudentEntity>(); if (Classes?.Id>0) { var pagedRequst = StudentHttpUtil.GetStudentsByClasses(Classes.Id); var entities = pagedRequst.items; Monitors.AddRange(entities); //如果有班长,则为班长赋值 if (Classes.Monitor > 0) { this.Monitor= this.Monitors?.FirstOrDefault(r=>r.Id==Classes.Monitor); } } } private DelegateCommand cancelCommand; public DelegateCommand CancelCommand { get { if (cancelCommand == null) { cancelCommand = new DelegateCommand(Cancel); } return cancelCommand; } } private void Cancel() { RequestClose?.Invoke((new DialogResult(ButtonResult.Cancel))); } private DelegateCommand saveCommand; public DelegateCommand SaveCommand { get { if (saveCommand == null) { saveCommand = new DelegateCommand(Save); } return saveCommand; } } private void Save() { if (Classes != null) { Classes.CreateTime = DateTime.Now; Classes.LastEditTime = DateTime.Now; if (Monitor != null) { Classes.Monitor = Monitor.Id; } bool flag=false; if (Classes.Id > 0) { flag = ClassesHttpUtil.UpdateClasses(Classes); } else { flag = ClassesHttpUtil.AddClasses(Classes); } if (flag) { RequestClose?.Invoke((new DialogResult(ButtonResult.OK))); } } } #endregion #region 对话框 public string Title => "新增或编辑班级信息"; public event Action<IDialogResult> RequestClose; public bool CanCloseDialog() { return true; } public void OnDialogClosed() { } public void OnDialogOpened(IDialogParameters parameters) { if (parameters != null && parameters.ContainsKey("classes")) { this.Classes = parameters.GetValue<ClassesInfo>("classes"); } else { this.Classes = new ClassesInfo(); } } #endregion } }
4. 示例截图
班级管理示例截图,如下所示:
学生管理
1. 接口访问类StudentHttpUtil
学生数据表结构和服务接口,在第二篇文章中已有介绍,如有疑问,可前往参考。接口访问类用于封装访问服务端提供的接口。如下所示:
namespace SIMS.Utils.Http { /// <summary> /// 学生类Http访问通用类 /// </summary> public class StudentHttpUtil:HttpUtil { /// <summary> /// 通过id查询学生信息 /// </summary> /// <param name="id"></param> /// <returns></returns> public static StudentEntity GetStudent(int id) { Dictionary<string, object> data = new Dictionary<string, object>(); data["id"] = id; var str = Get(UrlConfig.STUDENT_GETSTUDENT, data); var student = StrToObject<StudentEntity>(str); return student; } public static PagedRequest<StudentEntity> GetStudents(string no,string name, int pageNum, int pageSize) { Dictionary<string, object> data = new Dictionary<string, object>(); data["no"] = no; data["name"] = name; data["pageNum"] = pageNum; data["pageSize"] = pageSize; var str = Get(UrlConfig.STUDENT_GETSTUDENTS, data); var students = StrToObject<PagedRequest<StudentEntity>>(str); return students; } public static PagedRequest<StudentEntity> GetStudentsByClasses(int classId) { Dictionary<string, object> data = new Dictionary<string, object>(); data["classId"] = classId; var str = Get(UrlConfig.STUDENT_GETSTUDENTSBYCLASSES, data); var students = StrToObject<PagedRequest<StudentEntity>>(str); return students; } public static bool AddStudent(StudentEntity student) { var ret = Post<StudentEntity>(UrlConfig.STUDENT_ADDSTUDENT, student); return int.Parse(ret) == 0; } public static bool UpdateStudent(StudentEntity student) { var ret = Put<StudentEntity>(UrlConfig.STUDENT_UPDATESTUDENT, student); return int.Parse(ret) == 0; } public static bool DeleteStudent(int Id) { Dictionary<string, string> data = new Dictionary<string, string>(); data["Id"] = Id.ToString(); var ret = Delete(UrlConfig.STUDENT_DELETESTUDENT, data); return int.Parse(ret) == 0; } } }
2. 客户端页面视图
学生管理模块的客户端视图页面,也分为两个:学生列表查询,新增编辑学生信息页面。
学生列表查询页面
学生信息列表页面设计知识点,和班级管理差不多,只有一点差异:
- 在数据库中,性别保存的是bit类型,在C#中,数据类型为bool,但是在列表中需要转换成男或女显示,所以需要用到Converter进行转换。
学生信息查询页面,具体代码如下所示:
<UserControl x:Class="SIMS.StudentModule.Views.Student" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="clr-namespace:SIMS.StudentModule.Views" xmlns:i="http://schemas.microsoft.com/xaml/behaviors" xmlns:mahApps ="http://metro.mahapps.com/winfx/xaml/controls" xmlns:prism="http://prismlibrary.com/" xmlns:ctrls ="clr-namespace:SIMS.Utils.Controls;assembly=SIMS.Utils" xmlns:conv="clr-namespace:SIMS.Utils.Converter;assembly=SIMS.Utils" mc:Ignorable="d" prism:ViewModelLocator.AutoWireViewModel="True" d:DesignHeight="450" d:DesignWidth="800"> <UserControl.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" /> <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Themes/Light.Blue.xaml" /> <ResourceDictionary> <conv:SexConverter x:Key="SexConverter"></conv:SexConverter> <Style x:Key="LinkButton" TargetType="Button"> <Setter Property="Background" Value="White"></Setter> <Setter Property="Cursor" Value="Hand"></Setter> <Setter Property="Margin" Value="3"></Setter> <Setter Property="MinWidth" Value="80"></Setter> <Setter Property="MinHeight" Value="25"></Setter> <Setter Property="BorderThickness" Value="0 0 0 0"></Setter> </Style> </ResourceDictionary> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </UserControl.Resources> <i:Interaction.Triggers> <i:EventTrigger EventName="Loaded"> <i:InvokeCommandAction Command="{Binding LoadedCommand}"></i:InvokeCommandAction> </i:EventTrigger> </i:Interaction.Triggers> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto"></RowDefinition> <RowDefinition Height="Auto"></RowDefinition> <RowDefinition Height="*"></RowDefinition> <RowDefinition Height="Auto"></RowDefinition> </Grid.RowDefinitions> <TextBlock Text="学生信息" FontSize="20" Background="AliceBlue" Margin="2"></TextBlock> <StackPanel Grid.Row="1" Orientation="Horizontal" VerticalAlignment="Center"> <TextBlock Text="学号" VerticalAlignment="Center" Margin="2"></TextBlock> <TextBox Margin="4" MinWidth="120" Height="30" Text="{Binding No}" HorizontalContentAlignment="Stretch" mahApps:TextBoxHelper.ClearTextButton="True" mahApps:TextBoxHelper.Watermark="学号" mahApps:TextBoxHelper.WatermarkAlignment="Left" SpellCheck.IsEnabled="True" /> <TextBlock Text="姓名" VerticalAlignment="Center" Margin="2"></TextBlock> <TextBox Margin="4" MinWidth="120" Height="30" Text="{Binding Name}" HorizontalContentAlignment="Stretch" mahApps:TextBoxHelper.ClearTextButton="True" mahApps:TextBoxHelper.Watermark="学生姓名" mahApps:TextBoxHelper.WatermarkAlignment="Left" SpellCheck.IsEnabled="True" /> <Button Content="查询" Style="{DynamicResource MahApps.Styles.Button.Square.Accent}" Width="120" Height="30" Margin="3" Command="{Binding QueryCommand}"></Button> <Button Content="新增" Style="{DynamicResource MahApps.Styles.Button.Square.Accent}" Width="120" Height="30" Margin="3" Command="{Binding AddCommand}"></Button> </StackPanel> <DataGrid x:Name="dgStudent" Grid.Row="2" Grid.Column="0" Margin="2" AutoGenerateColumns="False" CanUserAddRows="False" CanUserDeleteRows="False" ItemsSource="{Binding Students}" RowHeaderWidth="0"> <DataGrid.Columns> <DataGridTextColumn Binding="{Binding No}" Header="学号" Width="*" /> <DataGridTextColumn Binding="{Binding Name}" Header="姓名" Width="*"/> <DataGridTextColumn Binding="{Binding Age}" Header="年龄" Width="*"/> <DataGridTextColumn Binding="{Binding Sex, Converter={StaticResource SexConverter}}" Header="性别" Width="*"/> <DataGridTextColumn Binding="{Binding ClassesName}" Header="班级" Width="*" /> <DataGridTemplateColumn Header="操作" Width="*"> <DataGridTemplateColumn.CellTemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> <Button Content="Edit" Style="{StaticResource LinkButton}" Command="{Binding RelativeSource={RelativeSource AncestorType=DataGrid, Mode=FindAncestor}, Path=DataContext.EditCommand}" CommandParameter="{Binding Id}" > <Button.Template> <ControlTemplate TargetType="Button"> <TextBlock TextDecorations="Underline" HorizontalAlignment="Center"> <ContentPresenter /> </TextBlock> </ControlTemplate> </Button.Template> </Button> <Button Content="Delete" Style="{StaticResource LinkButton}" Command="{Binding RelativeSource={RelativeSource AncestorType=DataGrid, Mode=FindAncestor}, Path=DataContext.DeleteCommand}" CommandParameter="{Binding Id}"> <Button.Template> <ControlTemplate TargetType="Button"> <TextBlock TextDecorations="Underline" HorizontalAlignment="Center"> <ContentPresenter /> </TextBlock> </ControlTemplate> </Button.Template> </Button> </StackPanel> </DataTemplate> </DataGridTemplateColumn.CellTemplate> </DataGridTemplateColumn> </DataGrid.Columns> </DataGrid> <ctrls:PageControl Grid.Row="3" DataContext="{Binding}" ></ctrls:PageControl> </Grid> </UserControl>
新增编辑页面
新增编辑页面涉及知识点和班级新增页面差不多,仅有一处差异:
- C#中的bool类型,需要绑定到两个单选按钮上,以表示男,女,所以需要扩展。
新增编辑页面,具体代码如下所示:
<UserControl x:Class="SIMS.StudentModule.Views.AddEditStudent" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="clr-namespace:SIMS.StudentModule.Views" xmlns:i="http://schemas.microsoft.com/xaml/behaviors" xmlns:mahApps ="http://metro.mahapps.com/winfx/xaml/controls" xmlns:prism="http://prismlibrary.com/" mc:Ignorable="d" d:DesignHeight="450" d:DesignWidth="600"> <prism:Dialog.WindowStyle> <Style TargetType="Window"> <Setter Property="Width" Value="600"></Setter> <Setter Property="Height" Value="400"></Setter> </Style> </prism:Dialog.WindowStyle> <UserControl.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" /> <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Themes/Light.Blue.xaml" /> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </UserControl.Resources> <i:Interaction.Triggers> <i:EventTrigger EventName="Loaded"> <i:InvokeCommandAction Command="{Binding LoadedCommand}"></i:InvokeCommandAction> </i:EventTrigger> </i:Interaction.Triggers> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="0.2*"></ColumnDefinition> <ColumnDefinition Width="Auto"></ColumnDefinition> <ColumnDefinition Width="*"></ColumnDefinition> <ColumnDefinition Width="0.2*"></ColumnDefinition> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition></RowDefinition> <RowDefinition></RowDefinition> <RowDefinition></RowDefinition> <RowDefinition></RowDefinition> <RowDefinition></RowDefinition> <RowDefinition></RowDefinition> </Grid.RowDefinitions> <TextBlock Text="学号" Grid.Row="0" Grid.Column="1" VerticalAlignment="Center" Margin="3"></TextBlock> <TextBox Grid.Row="0" Grid.Column="2" MinWidth="120" Height="35" VerticalAlignment="Center" Margin="3" Text="{Binding Student.No}"></TextBox> <TextBlock Text="姓名" Grid.Row="1" Grid.Column="1" VerticalAlignment="Center" Margin="3"></TextBlock> <TextBox Grid.Row="1" Grid.Column="2" MinWidth="120" Height="35" VerticalAlignment="Center" Margin="3" Text="{Binding Student.Name}"></TextBox> <TextBlock Text="年龄" Grid.Row="2" Grid.Column="1" VerticalAlignment="Center" Margin="3"></TextBlock> <TextBox Grid.Row="2" Grid.Column="2" MinWidth="120" Height="35" VerticalAlignment="Center" Margin="3" Text="{Binding Student.Age}"></TextBox> <TextBlock Text="性别" Grid.Row="3" Grid.Column="1" VerticalAlignment="Center" Margin="3"></TextBlock> <StackPanel Grid.Row="3" Grid.Column="2" Orientation="Horizontal" > <RadioButton Content="男" IsChecked="{Binding Student.IsBoy}"></RadioButton> <RadioButton Content="女" IsChecked="{Binding Student.IsGirl}"></RadioButton> </StackPanel> <TextBlock Text="班级" Grid.Row="4" Grid.Column="1" VerticalAlignment="Center" Margin="3"></TextBlock> <ComboBox Grid.Row="4" Grid.Column="2" MinWidth="120" Height="35" ItemsSource="{Binding Classess}" mahApps:TextBoxHelper.ClearTextButton="True" SelectedItem="{Binding Classes}"> <ComboBox.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> <TextBlock Text="{Binding Dept}"></TextBlock> <TextBlock Text="{Binding Grade}"></TextBlock> <TextBlock Text="{Binding Name}"></TextBlock> </StackPanel> </DataTemplate> </ComboBox.ItemTemplate> </ComboBox> <StackPanel Grid.Row="5" Grid.Column="1" Grid.ColumnSpan="2" Orientation="Horizontal" HorizontalAlignment="Center" Margin="3"> <Button Content="取消" Margin="5" MinWidth="120" Height="35" Style="{DynamicResource MahApps.Styles.Button.Square.Accent}" Command="{Binding CancelCommand}" ></Button> <Button Content="保存" Margin="5" MinWidth="120" Height="35" Style="{DynamicResource MahApps.Styles.Button.Square.Accent}" Command="{Binding SaveCommand}"></Button> </StackPanel> </Grid> </UserControl>
3. 客户端ViewModel
学生管理客户端ViewModel,与页面视图对应,也分为两个部分
StudentViewModel代码分为三部分:
- 属性和构造函数,主要用于数据绑定,如查询条件,列表等。所有属性的set赋值时,均采用SetProperty进行赋值。
- 命令Command,如查询,新增,编辑,删除命令等。所有命令可以定义成DelegateCommand类型。
- 分页部分,因分页功能代码大同小异,所以此处略去。
StudentViewModel具体代码如下所示:
namespace SIMS.StudentModule.ViewModels { public class StudentViewModel:BindableBase { #region 属性及构造函数 /// <summary> /// 学号 /// </summary> private string no; public string No { get { return no; } set { SetProperty(ref no , value); } } /// <summary> /// 学生姓名 /// </summary> private string name; public string Name { get { return name; } set { SetProperty(ref name, value); } } private ObservableCollection<StudentInfo> students; public ObservableCollection<StudentInfo> Students { get { return students; } set { SetProperty(ref students, value); } } private IDialogService dialogService; public StudentViewModel(IDialogService dialogService) { this.dialogService = dialogService; this.pageNum = 1; this.pageSize = 20; } private void InitInfo() { Students = new ObservableCollection<StudentInfo>(); var pagedRequst = StudentHttpUtil.GetStudents(this.No,this.Name, this.pageNum, this.pageSize); var entities = pagedRequst.items; Students.AddRange(entities.Select(r=>new StudentInfo(r))); // this.TotalCount = pagedRequst.count; this.TotalPage=((int)Math.Ceiling(this.TotalCount*1.0/this.pageSize)); } #endregion #region 事件 private DelegateCommand loadedCommand; public DelegateCommand LoadedCommand { get { if (loadedCommand == null) { loadedCommand = new DelegateCommand(Loaded); } return loadedCommand; } } private void Loaded() { InitInfo(); } /// <summary> /// 新增命令 /// </summary> private DelegateCommand addCommand; public DelegateCommand AddCommand { get { if (addCommand == null) { addCommand = new DelegateCommand(Add); } return addCommand; } } private void Add() { this.dialogService.ShowDialog("addEditStudent", null, AddEditCallBack, "MetroDialogWindow"); } private void AddEditCallBack(IDialogResult dialogResult) { if (dialogResult != null && dialogResult.Result == ButtonResult.OK) { //刷新列表 this.pageNum = 1; this.InitInfo(); } } /// <summary> /// 编辑命令 /// </summary> private DelegateCommand<object> editCommand; public DelegateCommand<object> EditCommand { get { if (editCommand == null) { editCommand = new DelegateCommand<object>(Edit); } return editCommand; } } private void Edit(object obj) { if (obj == null) { return; } var Id = int.Parse(obj.ToString()); var student = this.Students.FirstOrDefault(r => r.Id == Id); if (student == null) { MessageBox.Show("无效的学生ID"); return; } if (MessageBoxResult.Yes != MessageBox.Show("Are you sure to delete?", "Confirm", MessageBoxButton.YesNo)) { return; } IDialogParameters dialogParameters = new DialogParameters(); dialogParameters.Add("student", student); this.dialogService.ShowDialog("addEditStudent", dialogParameters, AddEditCallBack, "MetroDialogWindow"); } /// <summary> /// 编辑命令 /// </summary> private DelegateCommand<object> deleteCommand; public DelegateCommand<object> DeleteCommand { get { if (deleteCommand == null) { deleteCommand = new DelegateCommand<object>(Delete); } return deleteCommand; } } private void Delete(object obj) { if (obj == null) { return; } var Id = int.Parse(obj.ToString()); var classes = this.Students.FirstOrDefault(r => r.Id == Id); if (classes == null) { MessageBox.Show("无效的学生ID"); return; } bool flag = StudentHttpUtil.DeleteStudent(Id); if (flag) { this.pageNum = 1; this.InitInfo(); } } #endregion } }
AddEditStudentViewModel代码同样分为三部分:
- 属性和构造函数,主要用于数据绑定,如页面文本框,下拉选择框等。
- 命令Command,主要用于响应事件,如保存,取消等。
- 对话框接口,因为新增编辑是以弹出框的形式呈现,所以根据Prism框架的 要求,需要实现IDialogAware接口。(实现接口代码大同小异,在此略去)
AddEditStudentViewModel具体代码如下所示:
namespace SIMS.StudentModule.ViewModels { public class AddEditStudentViewModel : BindableBase, IDialogAware { /// <summary> /// 班级实体 /// </summary> private ClassesEntity classes; public ClassesEntity Classes { get { return classes; } set { SetProperty(ref classes, value); } } /// <summary> /// 班级列表 /// </summary> private List<ClassesEntity> classess; public List<ClassesEntity> Classess { get { return classess; } set { SetProperty(ref classess, value); } } private StudentInfo student; public StudentInfo Student { get { return student; } set { student = value; } } public AddEditStudentViewModel() { } #region Command private DelegateCommand loadedCommand; public DelegateCommand LoadedCommand { get { if (loadedCommand == null) { loadedCommand = new DelegateCommand(Loaded); } return loadedCommand; } } private void Loaded() { this.Classess = new List<ClassesEntity>(); var pagedRequst = ClassesHttpUtil.GetClassess(null,null,1,0);//0表示所有班级 var entities = pagedRequst.items; Classess.AddRange(entities); } private DelegateCommand cancelCommand; public DelegateCommand CancelCommand { get { if (cancelCommand == null) { cancelCommand = new DelegateCommand(Cancel); } return cancelCommand; } } private void Cancel() { RequestClose?.Invoke((new DialogResult(ButtonResult.Cancel))); } private DelegateCommand saveCommand; public DelegateCommand SaveCommand { get { if (saveCommand == null) { saveCommand = new DelegateCommand(Save); } return saveCommand; } } private void Save() { if (Student != null) { Student.CreateTime = DateTime.Now; Student.LastEditTime = DateTime.Now; bool flag = false; if (Classes != null) { Student.ClassesId = Classes.Id; } if (Student.Id > 0) { flag = StudentHttpUtil.UpdateStudent(Student); } else { flag = StudentHttpUtil.AddStudent(Student); } if (flag) { RequestClose?.Invoke((new DialogResult(ButtonResult.OK))); } } } #endregion } }
4. 示例截图
学生管理示例截图,如下所示:
总结
通过本篇文章的班级管理模块,学生管理模块,以及上一篇文章中的课程管理模块,不难发现,每一个模块的开发都是由列表DataGrid,文本框TextBox,下拉框Combox,单选按钮RadioButton,按钮Button等组成的,虽功能略有差异,但总归万变不离其宗。开发方法也大同小异,复杂的功能都是普通的功能累加起来的。这也是本系列文章由浅入深的渐进安排。希望能够抛砖引玉,不局限于某一功能,而是能够举一反三,自我理解,以达到自我开发的能力。