WPF开发学生信息管理系统【WPF+Prism+MAH+WebApi】（四）（上）-阿里云开发者社区

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

涉及知识点

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

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

业务逻辑

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

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

班级管理

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

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

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

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

新增编辑页面

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

在新增编辑的ViewModel中，班级实体是一个属性，所以在视图控件中进行数据绑定时，需要带上属性名，如：Classes.Name 。
班长列表在新增班级时尚无对应学生，可为空，待维护学生后，可通过学生列表进行选择即可。
班长列表为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页面代码分为三部分：

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

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

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

WPF开发学生信息管理系统【WPF+Prism+MAH+WebApi】（四）（上）

涉及知识点

业务逻辑

班级管理

1. 接口访问类ClassesHttpUtil

2. 客户端页面视图

3. 客户端ViewModel

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

WPF开发学生信息管理系统【WPF+Prism+MAH+WebApi】（四）（上）

涉及知识点

业务逻辑

班级管理

1. 接口访问类ClassesHttpUtil

2. 客户端页面视图

3. 客户端ViewModel

热门文章

最新文章

相关电子书