WPF开发学生信息管理系统【WPF+Prism+MAH+WebApi】(四)

最近通过WPF开发项目,为了对WPF知识点进行总结,所以利用业余时间,开发一个学生信息管理系统【Student Information Management System】。前三篇文章进行了框架搭建和模块划分,后台WebApi接口编写,以及课程管理模块开发,本文在前三篇基础之上,继续深入开发学生信息管理系统的班级管理和学生管理模块,通过本篇文章,将继续巩固之前的知识点,本文仅供学习分享使用,如有不足之处,还请指正。

涉及知识点

由于班级管理和学生管理的服务端开发,在第二篇文章中以后介绍,所以本篇专注介绍客户端功能的开发。涉及知识点如下:

  1. WPF开发中TextBlock,TextBox,DataGrid,Combox等控件的基础使用以及数据绑定等操作。
  2. MAH样式的使用,在本示例中MAH主要用于统一页面风格,提高用户体验。
  3. HttpClient使用,主要用于访问服务端提供的接口。

业务逻辑

首先班级管理和学生管理既有关联,又相互独立,不像课程管理模块独立存在,不与其他模块存在依赖。所以两个模块一起放在一篇文章进行讲解。关系如下:

  1. 学生属于某一班级之学生,所以学生中包含班级信息。
  2. 班级中存在班长,班长又属于学生的一个实体。

班级管理

1. 接口访问类ClassesHttpUtil

班级数据表结构和服务接口,在第二篇文章中已有介绍,如有疑问,可前往参考。接口访问类用于封装访问服务端提供的接口。如下所示:

namespace SIMS.Utils.Http
{
    public class ClassesHttpUtil:HttpUtil
    {
        /// <summary>
        /// 通过id查询学生信息
        /// </summary>
        /// <param name="id"></param>
        /// <returns></returns>
        public static ClassesEntity GetClasses(int id)
        {
            Dictionary<string, object> data = new Dictionary<string, object>();
            data["id"] = id;
            var str = Get(UrlConfig.CLASSES_GETCLASSES, data);
            var classes = StrToObject<ClassesEntity>(str);
            return classes;
        }

        public static PagedRequest<ClassesEntity> GetClassess(string? dept, string? grade, int pageNum, int pageSize)
        {
            Dictionary<string, object> data = new Dictionary<string, object>();
            data["dept"] = dept;
            data["grade"] = grade;
            data["pageNum"] = pageNum;
            data["pageSize"] = pageSize;
            var str = Get(UrlConfig.CLASSES_GETCLASSESS, data);
            var classess = StrToObject<PagedRequest<ClassesEntity>>(str);
            return classess;
        }

        public static bool AddClasses(ClassesEntity classes) {
            var ret = Post<ClassesEntity>(UrlConfig.CLASSES_ADDCLASSES, classes);
            return int.Parse(ret)==0;
        }

        public static bool UpdateClasses(ClassesEntity classes) {
            var ret = Put<ClassesEntity>(UrlConfig.CLASSES_UPDATECLASSES, classes);
            return int.Parse(ret) == 0;
        }

        public static bool DeleteClasses(int Id)
        {
            Dictionary<string,  string> data = new Dictionary<string, string>();
            data["Id"] = Id.ToString();
            var ret = Delete(UrlConfig.CLASSES_DELETECLASSES, data);
            return int.Parse(ret) == 0;
        }
    }
}

2. 客户端页面视图

班级管理的客户端页面视图共两个,一个查询列表页面,一个新增编辑页面,共同组成了班级管理的增删改查。

查询班级列表页面,涉及知识点如下所示:

  1. 查询条件或者列表中数据列展示,通过数据绑定Binding的方式与ViewModel进行交互,即点击查询按钮,不再传递参数,因为ViewModel中的属性已经同步更新。
  2. ViewModel中并非所有属性都可实现双向绑定,必须是实现具有通知功能的属性才可以。在Prism框架中,通过BindableBase的SetProperty方法可以快速实现。
  3. View视图中如果控件存在Command命令,则可以直接绑定,如果不存在,则可以i:Interaction.Triggers将事件转换为命令,如Load事件等。
  4. 在列表中,如果需要添加按钮,可以通过DataTemplate进行数据定制。

查询班级页面代码,如下所示:

<UserControl x:Class="SIMS.ClassesModule.Views.Classes"
             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.ClassesModule.Views"
             xmlns:prism="http://prismlibrary.com/"
             xmlns:i="http://schemas.microsoft.com/xaml/behaviors"
             xmlns:mahApps="http://metro.mahapps.com/winfx/xaml/controls"
             xmlns:ctrls ="clr-namespace:SIMS.Utils.Controls;assembly=SIMS.Utils"
             prism:ViewModelLocator.AutoWireViewModel="True"
             mc:Ignorable="d"
             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>
                    <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 Dept}"
                             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 Grade}"
                             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="dgClasses"
                  Grid.Row="2"
                  Grid.Column="0"
                  Margin="2"
                  AutoGenerateColumns="False"
                  CanUserAddRows="False"
                  CanUserDeleteRows="False"
                  ItemsSource="{Binding Classes}"
                  RowHeaderWidth="0">
            <DataGrid.Columns>
                <DataGridTextColumn Binding="{Binding Dept}" Header="专业" Width="*" />
                <DataGridTextColumn Binding="{Binding Grade}" Header="年级" Width="*"/>
                <DataGridTextColumn Binding="{Binding Name}" Header="班级" Width="*"/>
                <DataGridTextColumn Binding="{Binding HeadTeacher}" Header="班主任" Width="*"/>
                <DataGridTextColumn Binding="{Binding MonitorName}" 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>

新增编辑页面

班级的新增功能和编辑功能,共用一个页面,涉及知识点如下所示:

  1. 在新增编辑的ViewModel中,班级实体是一个属性,所以在视图控件中进行数据绑定时,需要带上属性名,如:Classes.Name 。
  2. 班长列表在新增班级时尚无对应学生,可为空,待维护学生后,可通过学生列表进行选择即可。
  3. 班长列表为Combox下拉框,绑定的是学生实体列表,但客户端只需看到学生姓名即可,所以需要重写DataTemplate,只显示学生姓名。

新增班级信息视图,具体代码如下所示:

<UserControl x:Class="SIMS.ClassesModule.Views.AddEditClasses"
             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.ClassesModule.Views"
             mc:Ignorable="d"
             xmlns:i="http://schemas.microsoft.com/xaml/behaviors"
             xmlns:mahApps ="http://metro.mahapps.com/winfx/xaml/controls"
             xmlns:prism="http://prismlibrary.com/"
             d:DesignHeight="400" 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>
            <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 Classes.Dept}"></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 Classes.Grade}"></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 Classes.Name}"></TextBox>
        <TextBlock Text="班主任" Grid.Row="3" Grid.Column="1"   VerticalAlignment="Center" Margin="3"></TextBlock>
        <TextBox Grid.Row="3" Grid.Column="2" MinWidth="120" Height="35"   VerticalAlignment="Center" Margin="3" Text="{Binding Classes.HeadTeacher}"></TextBox>
        <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 Monitors}" mahApps:TextBoxHelper.ClearTextButton="True" SelectedItem="{Binding Monitor}">
            <ComboBox.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Name}"></TextBlock>
                </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>
        <TextBlock Grid.Row="6" Grid.Column="1" Grid.ColumnSpan="2" Text="注意:新增班级时,班长可空,等维护学生后,再设置班长。" Foreground="Red"></TextBlock>
    </Grid>
</UserControl>

3. 客户端ViewModel

班级管理模块,ViewModel和视图对应,也分为查询列表ViewModel和新增编辑ViewModel,如下所示:

ClassesViewModel页面代码分为三部分:

  1. 属性和构造函数,主要用于数据绑定,如查询条件,列表等。所有属性的set赋值时,均采用SetProperty进行赋值。
  2. 命令Command,如查询,新增,编辑,删除命令等。所有命令可以定义成DelegateCommand类型。
  3. 分页部分,因分页功能代码大同小异,所以此处略去。

ClassesViewModel具体代码如下所示:

namespace SIMS.ClassesModule.ViewModels
{
    public class ClassesViewModel :BindableBase
    {
        #region 属性及构造函数

        /// <summary>
        /// 专业
        /// </summary>
        private string dept;

        public string Dept
        {
            get { return dept; }
            set { SetProperty(ref dept , value); }
        }

        /// <summary>
        /// 年级
        /// </summary>
        private string grade;

        public string Grade
        {
            get { return grade; }
            set { SetProperty(ref grade , value); }
        }



        private ObservableCollection<ClassesInfo> classes;

        public ObservableCollection<ClassesInfo> Classes
        {
            get { return classes; }
            set { SetProperty(ref classes, value); }
        }

        private IDialogService dialogService;

        public ClassesViewModel(IDialogService dialogService)
        {
            this.dialogService = dialogService;
            this.pageNum = 1;
            this.pageSize = 20;
        }

        private void InitInfo()
        {
            Classes = new ObservableCollection<ClassesInfo>();
            var pagedRequst = ClassesHttpUtil.GetClassess(this.Dept,this.Grade, this.pageNum, this.pageSize);
            var entities = pagedRequst.items;
            Classes.AddRange(entities.Select(r=>new ClassesInfo(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();
        }

        private DelegateCommand queryCommand;

        public DelegateCommand QueryCommand
        {
            get
            {
                if (queryCommand == null)
                {
                    queryCommand = new DelegateCommand(Query);
                }
                return queryCommand;
            }
        }

        private void Query() {
            this.pageNum = 1;
            this.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("addEditClasses",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 classes = this.Classes.FirstOrDefault(r => r.Id == Id);
            if (classes == 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("classes",classes);
            this.dialogService.ShowDialog("addEditClasses", 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.Classes.FirstOrDefault(r => r.Id == Id);
            if (classes == null)
            {
                MessageBox.Show("无效的班级ID");
                return;
            }
            bool flag = ClassesHttpUtil.DeleteClasses(Id);
            if (flag) {
                this.pageNum = 1;
                this.InitInfo();
            }
        }

        #endregion

    }
}

AddEditClassesViewModel代码同样分为三部分:

  1. 属性和构造函数,主要用于数据绑定,如页面文本框,下拉选择框等。
  2. 命令Command,主要用于响应事件,如保存,取消等。
  3. 对话框接口,因为新增编辑是以弹出框的形式呈现,所以根据Prism框架的 要求,需要实现IDialogAware接口。

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. 客户端页面视图

学生管理模块的客户端视图页面,也分为两个:学生列表查询,新增编辑学生信息页面。

学生列表查询页面

学生信息列表页面设计知识点,和班级管理差不多,只有一点差异:

  1. 在数据库中,性别保存的是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>

新增编辑页面

新增编辑页面涉及知识点和班级新增页面差不多,仅有一处差异:

  1. 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代码分为三部分:

  1. 属性和构造函数,主要用于数据绑定,如查询条件,列表等。所有属性的set赋值时,均采用SetProperty进行赋值。
  2. 命令Command,如查询,新增,编辑,删除命令等。所有命令可以定义成DelegateCommand类型。
  3. 分页部分,因分页功能代码大同小异,所以此处略去。

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代码同样分为三部分:

  1. 属性和构造函数,主要用于数据绑定,如页面文本框,下拉选择框等。
  2. 命令Command,主要用于响应事件,如保存,取消等。
  3. 对话框接口,因为新增编辑是以弹出框的形式呈现,所以根据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等组成的,虽功能略有差异,但总归万变不离其宗。开发方法也大同小异,复杂的功能都是普通的功能累加起来的。这也是本系列文章由浅入深的渐进安排。希望能够抛砖引玉,不局限于某一功能,而是能够举一反三,自我理解,以达到自我开发的能力。

  • 2
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

老码识途呀

写作不易,多谢支持

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值