当用户点击某个信息时#xff0c;跳转到信息详情页#xff0c;然后可以点击编辑按钮导航到编辑页面。

创建项目

我们首先在ViewModels目录下创建UserDetailViewModel。

实现从详情信息页面导航到编辑页面…

当用户点击某个信息时跳转到信息详情页然后可以点击编辑按钮导航到编辑页面。

创建项目

我们首先在ViewModels目录下创建UserDetailViewModel。

public

UserDetailViewModel:ObservableObject,IQueryAttributable

private

Shell.Current.GoToAsync(nameof(UserEditPage),parameters:

new

ParentRefreshAction(user);}public

virtual

ApplyQueryAttributes(IDictionarystring,

object

(query.TryGetValue(ParentRefreshAction,out

object

parentRefreshAction)){ParentRefreshAction

(FuncUser,

Task)parentRefreshAction;}query.Clear();}

ContentPage

xmlnshttp://schemas.microsoft.com/dotnet/2021/mauixmlns:xhttp://schemas.microsoft.com/winfx/2009/xamlxmlns:vmclr-namespace:MauiApp3.ViewModelsTitle用户详情x:ClassMauiApp3.Views.UserDetailPageContentPage.BindingContextvm:UserDetailViewModel//ContentPage.BindingContextContentPage.ToolbarItemsToolbarItem

Text编辑

ShowEditFormCommand}//ContentPage.ToolbarItemsVerticalStackLayoutLabel

Text{Binding

FontSizeLarge//VerticalStackLayout

/ContentPage

更新UserEditViewModel我们让他直接继承自UserDetailViewModel.

public

UserEditViewModel:UserDetailViewModel

private

isNewItem;[RelayCommand]private

async

(IsNewItem){context.Users.Add(ItemUser);}else{context.Users.Attach(ItemUser);context.Entry(ItemUser).State

Microsoft.EntityFrameworkCore.EntityState.Modified;}context.SaveChangesAsync();await

ParentRefreshAction(ItemUser);await

Shell.Current.GoToAsync(..);}public

override

ApplyQueryAttributes(IDictionarystring,

object

(bool)isNew;}base.ApplyQueryAttributes(query);}

public

{[ObservableProperty]ObservableCollectionUser

private

refreshing;[RelayCommand]private

async

ObservableCollectionUser(context.Users);});Refreshing

void

UserContext();context.Users.Remove(user);context.SaveChanges();Users.Remove(user);}[RelayCommand]private

async

Shell.Current.GoToAsync(nameof(UserEditPage),parameters:new

Dictionarystring,

object{{ParentRefreshAction,(FuncUser,Task)RefreshAddedAsync},{Item,new

User()},{IsNewItem,true}});}Task

addedUser){Users.Add(addedUser);return

Task.CompletedTask;}[RelayCommand]async

Task

Shell.Current.GoToAsync(nameof(UserDetailPage),parameters:new

Dictionarystring,

object{{ParentRefreshAction,(FuncUser,Task)RefreshEditedAsync},{Item,user},});}async

Task

(editedItemIndex-1){return;}Users[editedItemIndex]

updataUser;}

AppShell(){InitializeComponent();Routing.RegisterRoute(nameof(UserEditPage),typeof(UserEditPage));Routing.RegisterRoute(nameof(UserDetailPage),typeof(UserDetailPage));}

在主页添加GestureRecognizers对详情页面的跳转

Grid

RowDefinitions40,40ColumnDefinitions*,*Padding10Grid.GestureRecognizersTapGestureRecognizerCommand{Binding

PathBindingContext.ShowDetailFormCommand,Source{RelativeSource

ModeFindAncestor,AncestorType{x:Type

ContentPage}}}CommandParameter{Binding}//Grid.GestureRecognizers

IOS下运行程序

我们要在数据库和视图模型之间提供一个抽象层它能使项目有不同的模块区分更明确的分离开。

在项目中往往需要对多张表进行操作我们创建一个泛型接口来抽象对数据库中CURD。

public

item){DbSet.Attach(item);Context.Entry(item).State

async

DbUnitOfWork:IDisposable,IUnitOfWorkUser

{readonly

Dispose(){Context.Dispose();}public

async

uniOfWork.Items.GetAllAsync());Refreshing

false;

uniOfWork.Items.DeleteAsync(user);await

uniOfWork.SaveAsync();Users.Remove(user);

SaveAsync

unitOfWork.Items.AddAsync(ItemUser);elseawait

unitOfWork.Items.UpdateAsync(ItemUser);await

ParentRefreshAction(ItemUser);await

ShowEditFormAsync

unitOfWork.Items.GetByIdAsync(ItemUser.Id);await

Shell.Current.GoToAsync(nameof(UserEditPage),parameters:

new

很多时候我们需要对用户输入的数据进行验证有很多方法和形式我们来看看在数据库层面如何做错误验证处理。

并反馈在页面给用户。

使用try

{//用户邮箱唯一modelBuilder.EntityUser().HasIndex(u

u.Email).IsUnique();//用户名不能为空modelBuilder.EntityUser().Property(u

u.Name).IsRequired();//初始化数据modelBuilder.EntityUser().HasData(new

User{Id

123456789});base.OnModelCreating(modelBuilder);

修改MainViewModel

uniOfWork.Items.DeleteAsync(user);await

(Exception

Shell.Current.DisplayAlert(Error,

ex.Message,

OK);return;}Users.Remove(user);

修改UserEditViewModel

unitOfWork.Items.AddAsync(ItemUser);elseawait

unitOfWork.Items.UpdateAsync(ItemUser);await

(Exception

Shell.Current.DisplayAlert(Error,

ex.Message,

ParentRefreshAction(ItemUser);await

IOS下运行程序

程序中在将数据提交到数据库之前可以在UI层执行某些验证规则可以在用户保存某些修改时告知用户从而改善用户体验。

修改UserEditViewModel

在编辑用户页面我们添加对用户名和邮箱的验证并关联到保存命令上。

[NotifyCanExecuteChangedFor(nameof(SaveCommand))]

[ObservableProperty]

isEmailValid;[NotifyCanExecuteChangedFor(nameof(SaveCommand))]

[ObservableProperty]

IsNameValid;[RelayCommand(CanExecute

nameof(CanSave))]

unitOfWork.Items.AddAsync(ItemUser);elseawait

unitOfWork.Items.UpdateAsync(ItemUser);await

(Exception

Shell.Current.DisplayAlert(Error,

ex.Message,

ParentRefreshAction(ItemUser);await

在UserEditPage文件中我们添加一个样式来反馈给用户并使用工具包中的ValidationBehavior来进行验证和绑定命令。

这个验证很简单当用户输入的内容不满足条件时会使用我们设置的样式颜色来显示保存按钮无法点击当满足条件时颜色变为正常并可以保存内容。

ContentPage

xmlnshttp://schemas.microsoft.com/dotnet/2021/mauixmlns:xhttp://schemas.microsoft.com/winfx/2009/xamlxmlns:vmclr-namespace:MauiApp3.ViewModels;assemblyMauiApp3xmlns:toolkit

http://schemas.microsoft.com/dotnet/2022/maui/toolkitx:ClassMauiApp3.Views.UserEditPageTitle新用户ContentPage.BindingContextvm:UserEditViewModel//ContentPage.BindingContextContentPage.ResourcesStyle

TargetTypeEntry

ValueRed/Setter/Style/ContentPage.ResourcesGridVerticalStackLayout

ItemUser.Name}Entry.Behaviorstoolkit:TextValidationBehavior

invalidEntryStyle}IsValid{Binding

IsNameValid}FlagsValidateOnValueChanged,ValidateOnAttaching//内容长度不能小于5MinimumLength5//Entry.Behaviors/EntryEntry

ItemUser.Email}ReturnCommand{Binding

SaveCommand}Entry.Behaviors//验证是否时正常的邮箱格式toolkit:EmailValidationBehaviorInvalidStyle{StaticResource

invalidEntryStyle}IsValid{Binding

IsEmailValid}FlagsValidateOnValueChanged,ValidateOnAttaching//Entry.Behaviors/EntryButton

Text保存

SaveCommand}//VerticalStackLayoutActivityIndicator

VerticalOptionsCenterHorizontalOptionsCenterIsRunning{Binding

/ContentPage