將Abp移植進.NET MAUI項目

前言

寫在.NET MAUI官宣正式發布之際，熱烈慶祝MAUI正式發布！

去年12月份做了MAUI混合開發框架的調研，想起來文章里給自己挖了個坑，要教大家如何把Abp移植進Maui項目。

熟悉Abp的同學都知道，Abp 是一套強大的應用程序設計時框架（俗稱腳手架），新版本的Abp vNext為微服務和網絡優化的更多，然而本地開發經典Abp已經夠用，而且官方沒有停止維護，因此使用這個框架

MAUI則是跨平臺的應用程序抽象層，強大的運行時框架 + 強大的設計時框架，我說這是宇宙最強大跨平臺開發框架，不為過吧？😁

計劃：

整個程序我們還是利用Mvvm設計模式，但是將利用Abp的Ioc容器，而不使用mvvmlight或者xamarinToolkit這些庫，自行編寫一個ViewModelBase
使用Abp.EntityFrameworkCore庫中的EF相關功能，使用sqlite作為數據持久化方案。

目標：編寫一個歌單App，對歌曲信息進行增、刪、查、改。

下面來看看如何搭建

搭建MAUI項目

請注意：本文發布時，MAUI處于RC3版本，仍沒有正式發布，需要安裝Visual Studio 2022 17.3 (Preview)

首先按照官方教程搭建一個MAUI項目，命名為MauiBoilerplateBuild your first .NET MAUI app - .NET MAUI | Microsoft Docs

再前往Abp官網生成一個項目?
Startup Templates - Create a Demo | AspNet Boilerplate

選擇最新版本 v7.x 和.Net 6版本
取消勾選“Include login, register, user, role and tenant management pages”
項目名稱中填入MauiBoilerplate與Maui項目保持一致

點擊“Create My Project”生成abp項目文件，等待下載完成

下載，解壓好后，打開src目錄可以發現4個項目目錄，我們僅需要Core和EntityFrameworkCore項目，將這兩個目錄移至項目根目錄，并且添加至解決方案。

配置應用入口點

在MauiBoilerplate.Core項目中

改寫默認配置文件

{"ConnectionStrings": {"Default": "Data Source=file:{0};"},"Logging": {"IncludeScopes": false,"LogLevel": {"Default": "Debug","System": "Information","Microsoft": "Information"}}
}

在MauiBoilerplate.Core.csproj中的ItemGroup節點下添加

<EmbeddedResource Include="appsettings.json"><CopyToOutputDirectory>Always</CopyToOutputDirectory></EmbeddedResource>

在MauiBoilerplate.Core項目中新建MauiBoilerplateBuilderExtensions.cs 作為程序入口

添加一個靜態方法InitConfig，用于讀取項目的配置文件appsettings.json，若第一次運行或者該文件不存在則讀取默認的配置文件

private static void InitConfig(string logCfgName, string documentsPath){var assembly = IntrospectionExtensions.GetTypeInfo(typeof(MauiBoilerplateBuilderExtensions)).Assembly;Stream stream = assembly.GetManifestResourceStream($"MauiBoilerplate.Core.{logCfgName}");string text = "";using (var reader = new System.IO.StreamReader(stream)){text = reader.ReadToEnd();}if (DirFileHelper.IsExistFile(documentsPath)){var currentFileContent = DirFileHelper.ReadFile(documentsPath);var isSameContent = currentFileContent.ToMd5() == text.ToMd5();if (isSameContent){return;}DirFileHelper.CreateFile(documentsPath, text);}else{DirFileHelper.CreateFile(documentsPath, text);}}

添加一個靜態方法InitDataBase用于初始化sqlite數據庫文件"mato.db"

private static void InitDataBase(string dbName, string documentsPath){var assembly = IntrospectionExtensions.GetTypeInfo(typeof(MauiBoilerplateBuilderExtensions)).Assembly;Stream stream = assembly.GetManifestResourceStream($"MauiBoilerplate.Core.{dbName}");StreamHelper.WriteStream(stream, documentsPath);var path = Path.GetDirectoryName(documentsPath);DirFileHelper.CreateDir(path);}

添加一個靜態方法UseMauiBoilerplate用于初始化配置文件，初始化db文件和向管道服務中注冊AbpBootstrapper實例。

public static MauiAppBuilder UseMauiBoilerplate<TStartupModule>(this MauiAppBuilder builder) where TStartupModule : AbpModule{var logCfgName = "log4net.config";var appCfgName = "appsettings.json";var dbName = "mato.db";string documentsPath = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData), MauiBoilerplateConsts.LocalizationSourceName, logCfgName);string documentsPath2 = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData), MauiBoilerplateConsts.LocalizationSourceName, appCfgName);string dbPath = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData), MauiBoilerplateConsts.LocalizationSourceName, dbName);InitConfig(logCfgName, documentsPath);InitConfig(appCfgName, documentsPath2);InitDataBase(dbName, dbPath);var _bootstrapper = AbpBootstrapper.Create<TStartupModule>(options =>{options.IocManager = new IocManager();});_bootstrapper.IocManager.IocContainer.AddFacility<LoggingFacility>(f => f.UseAbpLog4Net().WithConfig(documentsPath));builder.Services.AddSingleton(_bootstrapper);WindsorRegistrationHelper.CreateServiceProvider(_bootstrapper.IocManager.IocContainer, builder.Services);return builder;}

在MauiBoilerplate項目中

新建MauiBoilerplateModule.cs ，并編寫代碼如下，這是App起始模塊

[DependsOn(typeof(MauiBoilerplateEntityFrameworkCoreModule))]public class MauiBoilerplateModule : AbpModule{public override void Initialize(){IocManager.RegisterAssemblyByConvention(typeof(MauiBoilerplateModule).GetAssembly());}}

打開MauiProgram.cs文件，將UseMauiBoilerplate添加到MauiAppBuilder

這里提一下,?MAUI 應用跟其他.Net6應用一樣采用泛型主機啟動應用，在項目中有一個靜態MauiProgram類，這是應用的入口點。這提供了從單個位置配置應用、服務和第三方庫的功能。

更多泛型主機的信息，請參閱微軟文檔.NET 通用主機 | Microsoft Docs

?至此，在主機管道中已經配置了MauiBoilerplate服務

配置Abp

App.xaml是應用的聲明起始點，將從這里初始化Abp

打開App.xaml.cs，添加如下代碼：

public partial class App : Application{private readonly AbpBootstrapper _abpBootstrapper;public App(AbpBootstrapper abpBootstrapper){_abpBootstrapper = abpBootstrapper;InitializeComponent();_abpBootstrapper.Initialize();this.MainPage = abpBootstrapper.IocManager.Resolve(typeof(MainPage)) as MainPage;}}

注意，我們還沒有創建初始頁面MainPage，你可以先創建這個文件，將在第三章講UI層時介紹

至此，就完成了MAUI項目的搭建與Abp腳手架的集成，現在你可以在這個項目中使用Abp的IocManager，ConfigurationManager，工作單元特性，模組化特性，等等任何的Abp提供的功能了。

但是距離目標：制作一個具有數據訪問層的App，還需要兩段路要走：配置數據庫，以及編寫界面。

因為我們要做一個數據持久化型的小應用，所以在完成Abp功能的集成后，我們需要做數據庫相關的配置工作

配置數據庫

在MauiBoilerplate.Core項目中，添加兩個實體類：

我們簡單的寫一個歌曲（song）的實體類

其中包含了歌曲標題（MusicTitle），藝術家（Artist），專輯（Album），時長（Duration）以及發售日期（ReleaseDate）

public class Song : FullAuditedEntity<long>{[Key, DatabaseGenerated(DatabaseGeneratedOption.Identity)]public override long Id { get; set; }public string MusicTitle { get; set; }public string Artist { get; set; }public string Album { get; set; }public TimeSpan Duration { get; set; }public DateTime ReleaseDate { get; set; }}

在MauiBoilerplate.EntityFrameworkCore項目中：將這個類添加至MauiBoilerplateDbContext中

public class MauiBoilerplateDbContext : AbpDbContext
{//Add DbSet properties for your entities...public DbSet<Song> Song { get; set; }
}

?新建WithDbContextHelper.cs

創建一個靜態類WithDbContext，利用Abp的工作單元模式對dbcontext執行操作

public class WithDbContextHelper{public static void WithDbContext<TDbContext>(IIocResolver iocResolver, Action<TDbContext> contextAction)where TDbContext : DbContext{using (var uowManager = iocResolver.ResolveAsDisposable<IUnitOfWorkManager>()){using (var uow = uowManager.Object.Begin(TransactionScopeOption.Suppress)){var context = uowManager.Object.Current.GetDbContext<TDbContext>();contextAction(context);uow.Complete();}}}}

[可選]種子數據相關類編寫

編寫種子數據幫助類SeedHelper.cs，與數據庫初始化類InitialDbBuilder，這里將在程序啟動時向數據庫插入一些種子數據

public static class SeedHelper{public static void SeedHostDb(IIocResolver iocResolver){Helper.WithDbContextHelper.WithDbContext<MauiBoilerplateDbContext>(iocResolver, SeedHostDb);}public static void SeedHostDb(MauiBoilerplateDbContext context){context.SuppressAutoSetTenantId = true;// Host seednew InitialDbBuilder(context).Create();}}

編寫MauiBoilerplateEntityFrameworkCoreModule.cs

[DependsOn(typeof(MauiBoilerplateCoreModule), typeof(AbpEntityFrameworkCoreModule))]public class MauiBoilerplateEntityFrameworkCoreModule : AbpModule{public bool SkipDbContextRegistration { get; set; }public bool SkipDbSeed { get; set; }public override void PreInitialize(){if (!SkipDbContextRegistration){Configuration.Modules.AbpEfCore().AddDbContext<MauiBoilerplateDbContext>(options =>{if (options.ExistingConnection != null){DbContextOptionsConfigurer.Configure(options.DbContextOptions, options.ExistingConnection);}else{DbContextOptionsConfigurer.Configure(options.DbContextOptions, options.ConnectionString);}});}}public override void Initialize(){IocManager.RegisterAssemblyByConvention(typeof(MauiBoilerplateEntityFrameworkCoreModule).GetAssembly());}public override void PostInitialize(){Helper.WithDbContextHelper.WithDbContext<MauiBoilerplateDbContext>(IocManager, RunMigrate);if (!SkipDbSeed){SeedHelper.SeedHostDb(IocManager);}}public static void RunMigrate(MauiBoilerplateDbContext dbContext){dbContext.Database.Migrate();}}

將MauiBoilerplate.EntityFrameworkCore設置為啟動項目，選擇框架為.net6.0

打開程序包管理器控制臺，選擇默認項目MauiBoilerplate.EntityFrameworkCore

編輯

?運行Add-Migration命令，將生成遷移腳本

運行MauiBoilerplate.EntityFrameworkCore，將生成mato.db等三個文件，

編輯

編寫基類（可選）

我們在使用相關的父類時，某某ContentPage，或者某某UserControl時，需要像使用AbpServiceBase一樣使用一些常用的功能，比如字符串的本地化，配置，AutoMapper對象等，就像AbpServiceBase的注釋里描述的那樣：

? ? /// <summary>
? ? /// This class can be used as a base class for services.
? ? /// It has some useful objects property-injected and has some basic methods
? ? /// most of services may need to.
? ? /// </summary>

此時，需要編寫一個基類（奈何.net本身沒有Mixin模式，C#語言也不支持多繼承），這些基類僅是注入了一些常用的Manager，方便代碼編寫者使用，因此基類的創建不是必須的。

比如可以增加一個ContentPageBase類作為ContentPage實例控件的基類

新建ContentPageBase.cs文件，創建類ContentPageBase繼承于ContentPage

public class ContentPageBase : ContentPage{public IObjectMapper ObjectMapper { get; set; }/// <summary>/// Reference to the setting manager./// </summary>public ISettingManager SettingManager { get; set; }/// <summary>/// Reference to the localization manager./// </summary>public ILocalizationManager LocalizationManager { get; set; }/// <summary>/// Gets/sets name of the localization source that is used in this application service./// It must be set in order to use <see cref="L(string)"/> and <see cref="L(string,CultureInfo)"/> methods./// </summary>protected string LocalizationSourceName { get; set; }/// <summary>/// Gets localization source./// It's valid if <see cref="LocalizationSourceName"/> is set./// </summary>protected ILocalizationSource LocalizationSource{get{if (LocalizationSourceName == null){throw new AbpException("Must set LocalizationSourceName before, in order to get LocalizationSource");}if (_localizationSource == null || _localizationSource.Name != LocalizationSourceName){_localizationSource = LocalizationManager.GetSource(LocalizationSourceName);}return _localizationSource;}}private ILocalizationSource _localizationSource;/// <summary>/// Constructor./// </summary>protected ContentPageBase(){LocalizationSourceName = MauiBoilerplateConsts.LocalizationSourceName;ObjectMapper = NullObjectMapper.Instance;LocalizationManager = NullLocalizationManager.Instance;}/// <summary>/// Gets localized string for given key name and current language./// </summary>/// <param name="name">Key name</param>/// <returns>Localized string</returns>protected virtual string L(string name){return LocalizationSource.GetString(name);}/// <summary>/// Gets localized string for given key name and current language with formatting strings./// </summary>/// <param name="name">Key name</param>/// <param name="args">Format arguments</param>/// <returns>Localized string</returns>protected virtual string L(string name, params object[] args){return LocalizationSource.GetString(name, args);}/// <summary>/// Gets localized string for given key name and specified culture information./// </summary>/// <param name="name">Key name</param>/// <param name="culture">culture information</param>/// <returns>Localized string</returns>protected virtual string L(string name, CultureInfo culture){return LocalizationSource.GetString(name, culture);}/// <summary>/// Gets localized string for given key name and current language with formatting strings./// </summary>/// <param name="name">Key name</param>/// <param name="culture">culture information</param>/// <param name="args">Format arguments</param>/// <returns>Localized string</returns>protected virtual string L(string name, CultureInfo culture, params object[] args){return LocalizationSource.GetString(name, culture, args);}}

同理，若我們使用了其他控件類時，可以增加一個Base類作為實例控件的基類的

比如Popup控件，就編寫一個PopupBase基類。

在這里我們編寫了兩個基類

編輯

?本地化配置

新建一個TranslateExtension.cs作為Xaml標簽的本地化處理類

[ContentProperty("Text")]public class TranslateExtension : DomainService, IMarkupExtension{public TranslateExtension(){LocalizationSourceName = MauiBoilerplateConsts.LocalizationSourceName;}public string Text { get; set; }public object ProvideValue(IServiceProvider serviceProvider){if (Text == null)return "";var translation = L(Text);          return translation;}}

在MauiBoilerplateLocalization.cs配置好SourceFiles?

public static void Configure(ILocalizationConfiguration localizationConfiguration){localizationConfiguration.Sources.Add(new DictionaryBasedLocalizationSource(MauiBoilerplateConsts.LocalizationSourceName,new XmlEmbeddedFileLocalizationDictionaryProvider(typeof(LocalizationConfigurer).GetAssembly(),"MauiBoilerplate.Core.Localization.SourceFiles")));}

編寫ViewModelBase

為實現Mvvm設計模式，頁面需要綁定一個繼承于ViewModelBase的類型

在ViewModelBase中，需要實現INotifyPropertyChanged以處理綁定成員變化時候的通知消息；

ViewModelBase集成于AbpServiceBase以方便ViewModel代碼編寫者使用常用的功能，比如字符串的本地化，配置，AutoMapper對象等。

public abstract class ViewModelBase : AbpServiceBase, ISingletonDependency, INotifyPropertyChanged{public ViewModelBase(){LocalizationSourceName = MauiBoilerplateConsts.LocalizationSourceName;}public event PropertyChangedEventHandler PropertyChanged;protected PropertyChangedEventHandler PropertyChangedHandler { get; }public void VerifyPropertyName(string propertyName){Type type = GetType();if (!string.IsNullOrEmpty(propertyName) && type.GetTypeInfo().GetDeclaredProperty(propertyName) == null)throw new ArgumentException("找不到屬性", propertyName);}public virtual void RaisePropertyChanged([CallerMemberName] string propertyName = null){PropertyChangedEventHandler propertyChanged = PropertyChanged;if (propertyChanged == null)return;propertyChanged(this, new PropertyChangedEventArgs(propertyName));}public virtual void RaisePropertyChanged<T>(Expression<Func<T>> propertyExpression){if (PropertyChanged == null)return;string propertyName = GetPropertyName(propertyExpression);if (string.IsNullOrEmpty(propertyName))return;RaisePropertyChanged(propertyName);}protected static string GetPropertyName<T>(Expression<Func<T>> propertyExpression){if (propertyExpression == null)throw new ArgumentNullException(nameof(propertyExpression));MemberExpression body = propertyExpression.Body as MemberExpression;if (body == null)throw new ArgumentException("參數不合法", nameof(propertyExpression));PropertyInfo member = body.Member as PropertyInfo;if (member == null)throw new ArgumentException("找不到屬性", nameof(propertyExpression));return member.Name;}}

至此，我們完成了數據庫的配置，內容頁基類與 ViewModel基類的編寫，接下來可以制作我們的頁面了。

?很開心，終于到了創建頁面的時候了！

我們需要兩個頁面

MainPage 主頁面
MusicItemPage 條目編輯頁面

編寫主頁面

?新建一個MainPageViewModel.cs，作為MainPage的ViewModel層

public class MainPageViewModel : ViewModelBase{private readonly IRepository<Song, long> songRepository;public MainPageViewModel(IRepository<Song, long> songRepository){this.RefreshCommand=new Command(Refresh, (o) => true);this.DeleteCommand=new Command(Delete, (o) => true);this.songRepository=songRepository;}private void Delete(object obj){songRepository.Delete(obj as Song);}private async void Refresh(object obj){this.IsRefreshing=true;var getSongs = this.songRepository.GetAllListAsync();await getSongs.ContinueWith(r => IsRefreshing=false);var songs = await getSongs;this.Songs=new ObservableCollection<Song>(songs);}private ObservableCollection<Song> songs;public ObservableCollection<Song> Songs{get { return songs; }set{songs = value;RaisePropertyChanged();}}private Song currentSong;public Song CurrentSong{get { return currentSong; }set{currentSong = value;RaisePropertyChanged();}}private bool _isRefreshing;public bool IsRefreshing{get { return _isRefreshing; }set{_isRefreshing = value;RaisePropertyChanged();}}public Command RefreshCommand { get; set; }public Command DeleteCommand { get; private set; }}

新建一個MainPage頁面

編寫Xaml為：

注意這個頁面將繼承MauiBoilerplate.ContentPageBase

<?xml version="1.0" encoding="utf-8" ?>
<mato:ContentPageBase xmlns="http://schemas.microsoft.com/dotnet/2021/maui"xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"xmlns:mato="clr-namespace:MauiBoilerplate;assembly=MauiBoilerplate.Core"x:Class="MauiBoilerplate.MainPage"><Grid><Grid.RowDefinitions><RowDefinition Height="155"></RowDefinition><RowDefinition></RowDefinition></Grid.RowDefinitions><Label Text="My Music" FontSize="65"></Label><ListView Grid.Row="1"ItemsSource="{Binding Songs,Mode=TwoWay}"x:Name="MainListView"RowHeight="74" IsPullToRefreshEnabled="True"IsRefreshing="{Binding IsRefreshing}"RefreshCommand="{Binding RefreshCommand}"SelectedItem="{Binding CurrentSong,Mode=TwoWay}"><ListView.Header><Grid HeightRequest="96"><Grid.RowDefinitions><RowDefinition></RowDefinition><RowDefinition></RowDefinition></Grid.RowDefinitions><Button Clicked="AddButton_Clicked"CornerRadius="100"Text="?"HeightRequest="44"WidthRequest="200"FontFamily="FontAwesome"></Button><StackLayout VerticalOptions="End"Margin="0,0,0,8"Grid.Row="1"HorizontalOptions="Center"Orientation="Horizontal"><Label HorizontalTextAlignment="Center"FontSize="Small" Text="{Binding Songs.Count}"></Label><Label  HorizontalTextAlignment="Center"FontSize="Small" Text="首歌"></Label></StackLayout></Grid></ListView.Header><ListView.ItemTemplate><DataTemplate><ViewCell><Grid x:Name="ModeControlLayout" VerticalOptions="CenterAndExpand"><Grid.ColumnDefinitions><ColumnDefinition Width="*" /><ColumnDefinition Width="Auto" /></Grid.ColumnDefinitions><StackLayout Grid.Column="0" HorizontalOptions="Center" VerticalOptions="CenterAndExpand"><Label Text="{Binding MusicTitle}"                                    HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center" FontSize="Body" /><LabelText="{Binding Artist}" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center" FontSize="Body" /></StackLayout><Button x:Name="MoreButton"HeightRequest="44" WidthRequest="44" Margin="10"Text="?"Clicked="SongMoreButton_OnClicked"FontFamily="FontAwesome"Grid.Column="1" CornerRadius="100"HorizontalOptions="Center" /></Grid></ViewCell></DataTemplate></ListView.ItemTemplate></ListView></Grid>
</mato:ContentPageBase>

?編寫CodeBehind為：

注意將它繼承ITransientDependency接口

這個頁面之前提到過，已經通過IocManager.Resolve(typeof(MainPage))解析出實例并賦值給App.MainPage了。

public partial class MainPage : ContentPageBase, ITransientDependency
{private readonly MainPageViewModel mainPageViewModel;private readonly MusicItemPageViewModel musicItemPageViewModel;private readonly MusicItemPage musicItemPage;public MainPage(MainPageViewModel mainPageViewModel, MusicItemPageViewModel musicItemPageViewModel, MusicItemPage musicItemPage){InitializeComponent();this.mainPageViewModel=mainPageViewModel;this.musicItemPageViewModel=musicItemPageViewModel;this.musicItemPage=musicItemPage;BindingContext=this.mainPageViewModel;}protected override void OnAppearing(){base.OnAppearing();mainPageViewModel.RefreshCommand.Execute(null);}private async void SongMoreButton_OnClicked(object sender, EventArgs e){var currentsong = (sender as BindableObject).BindingContext as Song;string action = await DisplayActionSheet(currentsong.MusicTitle, "取消", null, "修改", "刪除");if (action=="修改"){musicItemPageViewModel.CurrentSong  = currentsong;await Navigation.PushModalAsync(musicItemPage);}else if (action=="刪除"){mainPageViewModel.DeleteCommand.Execute(currentsong);mainPageViewModel.RefreshCommand.Execute(null);}}private async void AddButton_Clicked(object sender, EventArgs e){musicItemPageViewModel.CurrentSong  = new Song();await Navigation.PushModalAsync(musicItemPage);}
}

此頁面將顯示一個列表，并在列表條目下可以彈出一個菜單

?編寫條目編輯頁面

?新建一個MusicItemPageViewModel.cs，作為MusicItemPage的ViewModel層

public class MusicItemPageViewModel : ViewModelBase{private readonly IIocResolver iocResolver;private readonly IRepository<Song, long> songRepository;public event EventHandler OnFinished;public MusicItemPageViewModel(IIocResolver iocResolver,IRepository<Song, long> songRepository){this.CommitCommand=new Command(Commit, (o) => CurrentSong!=null);this.iocResolver=iocResolver;this.songRepository=songRepository;this.PropertyChanged+=MusicItemPageViewModel_PropertyChanged;}private void MusicItemPageViewModel_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e){if (e.PropertyName==nameof(CurrentSong)){CommitCommand.ChangeCanExecute();}}private void Commit(object obj){songRepository.InsertOrUpdate(currentSong);       }private Song currentSong;public Song CurrentSong{get { return currentSong; }set{currentSong = value;RaisePropertyChanged();}}}

新建一個MusicItemPage 頁面

編寫Xaml為：

注意這個頁面將繼承MauiBoilerplate.ContentPageBase

<?xml version="1.0" encoding="utf-8" ?>
<mato:ContentPageBase xmlns="http://schemas.microsoft.com/dotnet/2021/maui"xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"xmlns:mato="clr-namespace:MauiBoilerplate;assembly=MauiBoilerplate.Core"x:Class="MauiBoilerplate.MusicItemPage"><Grid><Grid.RowDefinitions><RowDefinition></RowDefinition><RowDefinition Height="155"></RowDefinition></Grid.RowDefinitions><TableView Intent="Form"><TableRoot><TableSection Title="基礎"><EntryCell Label="標題"   Text="{Binding CurrentSong.MusicTitle, Mode=TwoWay}"/><EntryCell  Label="藝術家"  Text="{Binding CurrentSong.Artist, Mode=TwoWay}"/><EntryCell  Label="專輯"  Text="{Binding CurrentSong.Album, Mode=TwoWay}"/></TableSection><TableSection Title="其他"><EntryCell  Label="時長"  Text="{Binding CurrentSong.Duration}"/><EntryCell  Label="發布日期"  Text="{Binding CurrentSong.ReleaseDate}"/></TableSection></TableRoot></TableView><Button x:Name="CommitButton"Grid.Row="1"CornerRadius="100"HeightRequest="44"WidthRequest="200"Text="?"Command="{Binding CommitCommand}"FontFamily="FontAwesome"             HorizontalOptions="Center" /></Grid>
</mato:ContentPageBase>

?編寫CodeBehind為：

注意將它繼承ITransientDependency接口

public partial class MusicItemPage : ContentPageBase, ITransientDependency
{private readonly MusicItemPageViewModel musicItemPageViewModel;public MusicItemPage(MusicItemPageViewModel musicItemPageViewModel){InitializeComponent();this.musicItemPageViewModel=musicItemPageViewModel;this.musicItemPageViewModel.OnValidateErrors+=MusicItemPageViewModel_OnValidateErrors;this.musicItemPageViewModel.OnFinished+=MusicItemPageViewModel_OnFinished;BindingContext=this.musicItemPageViewModel;Unloaded+=MusicItemPage_Unloaded;}private async void MusicItemPageViewModel_OnFinished(object sender, EventArgs e){await this.Navigation.PopModalAsync();}private void MusicItemPage_Unloaded(object sender, EventArgs e){musicItemPageViewModel.CurrentSong = null;}private async void MusicItemPageViewModel_OnValidateErrors(object sender, List<System.ComponentModel.DataAnnotations.ValidationResult> e){var content = string.Join(',', e);await DisplayAlert("請注意", content, "好的");}
}

這個頁面提供歌曲條目新增和編輯的交互功能

[可選]使用Abp校驗數據功能

這個部分使用Abp的ValidationConfiguration功能校驗表單數據，以展示Abp功能的使用

首先在MusicItemPageViewModel 構造函數中添加對IValidationConfiguration對象的注入

編輯

?添加OnValidateErrors事件，并且在Page中訂閱這個事件。此事件將在校驗未通過時觸發

MusicItemPageViewModel.cs中：

public event EventHandler<List<ValidationResult>> OnValidateErrors;

?MusicItemPage.xaml.cs中：

this.musicItemPageViewModel.OnValidateErrors+=MusicItemPageViewModel_OnValidateErrors;

private async void MusicItemPageViewModel_OnValidateErrors(object sender, List<System.ComponentModel.DataAnnotations.ValidationResult> e){var content = string.Join(',', e);await DisplayAlert("請注意", content, "好的");}

編寫校驗邏輯代碼

MusicItemPageViewModel.cs中：

protected List<ValidationResult> GetValidationErrors(Song validatingObject){List<ValidationResult> validationErrors = new List<ValidationResult>();foreach (var validatorType in _configuration.Validators){using (var validator = iocResolver.ResolveAsDisposable<IMethodParameterValidator>(validatorType)){var validationResults = validator.Object.Validate(validatingObject);validationErrors.AddRange(validationResults);}}return validationErrors;}

Commit提交方法，改造如下：

當GetValidationErrors返回的校驗錯誤列表中有內容時，將OnValidateErrors事件Invoke

private void Commit(object obj){var validateErrors = GetValidationErrors(this.CurrentSong);if (validateErrors.Count==0){songRepository.InsertOrUpdate(currentSong);this.OnFinished?.Invoke(this, EventArgs.Empty);}else{OnValidateErrors?.Invoke(this, validateErrors);}}

接下來在實體中定義校驗規則，校驗器將按照這些規則返回校驗結果

public class Song : FullAuditedEntity<long>, IValidatableObject{[Key, DatabaseGenerated(DatabaseGeneratedOption.Identity)]public override long Id { get; set; }[Required][StringLength(6, ErrorMessage = "歌曲名稱要在6個字以內")]public string MusicTitle { get; set; }[Required][StringLength(10, ErrorMessage = "歌曲名稱要在10個字以內")]public string Artist { get; set; }[Required][StringLength(10, ErrorMessage = "歌曲名稱要在10個字以內")]public string Album { get; set; }public TimeSpan Duration { get; set; }public DateTime ReleaseDate { get; set; }public IEnumerable<ValidationResult> Validate(ValidationContext validationContext){if (ReleaseDate != default && ReleaseDate>DateTime.Now){yield return new ValidationResult("ReleaseDate不能大于當天",new[] { nameof(ReleaseDate) });}}}