EP 10: Passing Data for Navigation in TopStore App - I

Hello, 各位 iT邦帮忙 的粉丝们大家好~~~

本篇是 Re: 从零开始用 Xamarin 技术来复刻过去开发的一个 App: TopStore 系列文的 EP10。

在上一篇 EP9 当中已经能让 PeoplePage 点选右上角的 "新增" 按钮後，透过 Shell 利用 URI 的 Navigation 模式转跳到 PersonDetailPage 的页面，并且新增一笔联络人资料到联络人列表当中。

接下来本篇 EP10 要来讨论一个问题，当我们从 PeoplePage 的联络人列表去点选某一个联络人时，可否能跳到原本设计的 PersonDetailPage 并且把资讯带过去检视，并再进一步做到编辑呢?

就来看怎麽处理吧，Go~~~

如果是要从 PeoplePage 的联络人列表点选某一个联络人时引发 UI 有反应动作，当然要针对 ListView 这个控制项的标记本身设计来作一些调整。

在这边选择增加 ListView 的 ItemTapped 事件，并且在透过该 ItemTapped 事件去执行 PeoplePageViewModel 所设计的 EditCommand (在 EP7 的时候就预留设计的)。

就打开 PeoplePage.xaml 找到 ListView 的标记增加 ItemTapped 的事件处理常式。

透过 Visual Studio 的提示很快就能完成此事件处理常识的建立。

再来打开 PeoplePage.xaml.cs 并找到刚刚增加的事件处理常式的 C# 程序码。

撰写执行 PeoplePageViewModel 所设计的 EditCommand 的程序码，而 ListView 的 ItemTapped 事件的 e 参数，透过 e.Item 可以取得使用者透过 UI 点选的项目内容所对应的物件资料，也就是 Person。

接下来就打开 PeoplePageViewModel 来编辑一下 EditCommand。

由於前面确定 ItemTapped 的事件处理常式会丢一个 Person 的物件资料进到 EditCommand 来执行，所以我们将 Command 的泛型改成 Person 的类别，并且将引数名称设计改叫做 person。

如果没什麽规划上的特殊需求，这边也是要转跳到 PersonDetailPage 这个页面，所以撰写上跟 AddCommand 的动作差不多，透过 Shell 的 URI 设计方式进行 Navigation 到 PersonDetailPage。

喔，对了...GoToAsync 是非同步呼叫的方法，所以别忘记加上 "await/async" 的使用。

目前的双平台(iOS、Android)执行结果上其实跟点选 ToolbarItem 的 "新增" 效果是一样的，就切换到 PersonDetailPage 正确无误。

但怎哪里怪怪的?

是的，点选的该笔联络人资料并没有被带入到 PersonDetailPage 中显示，虽然我们在 ListView 的 ItemTapped 的事件处理常式当中的程序码撰写，有将联络人的资讯带给 EditCommand 没错，但是当我们在透过 Shell 的 URI 进行 Navigation 转跳到 PersonDetailPage 的时候，我们并没有将该资料带入 URI 的参数当中来传递，所以我们并没有办法在 PersonDetailPage 顺利的将该笔联络人显示出来。

在这边我们还要透过一些调整，才能正确地带入资料到 PersonDetailPage。

首先回到 Models 当中的 Person 类别设计，这边我们再多增加一个 Id 的属性。

第二个调整的部分是在 MockData 的部分增加 Id 的资料值。

第三个调整的部分是 EditCommand 的 URI 加入传递资料的参数格式。

第四个调整的其中第1部分是 PersonDetailPageViewModel 的 class 设计要挂上 QueryProperty 的 Attritube 以便接收参数资料。

第四个调整的其中第2部分是 PersonDetailPageViewModel 的 class 中多设计一个属性 PersonId (也就是前一个步骤 QueryProperty 的 Attritube 设计 "nameof()" 小括号中要给予的属性名称)。

另外，这边在透过 Linq 找出 MockData 所设计的 People 当中 Person 的 Id 跟传递的 PersonId 一致的 Person 资料，并且将该 Person 资料设定给 EditPerson。

所以最後我们来执行看看，如果想看 personId 传递过程可以透过 "F5" 的侦错模式，透过中断点设定来确认 personId 的设定过程。

而双平台(iOS 在 ListView 当中点选第四笔资料、Android 在 ListView 当中点选第五笔资料)的执行结果如下效果:

PersonDetailPage 正确的显示点选的 Person 资讯。

等等...虽然本篇 EP10 介绍到这边~~~

点选联络人的 ListView 选许某笔联络人转跳 PersonDetailPage 後能够正确的在当中显示 Person 资料了，但到目前似乎还没有办法区分出 "新增" 跟 "检视/编辑" 的差异呢...?

是的!

目前还没能明显的区分，我们会在 PersonDetailPage 的 ToolbarItem 当中来做一点变化，以便区隔出 "新增" 跟 "检视/编辑" 的差异。

这就留待下一篇 EP 来介绍罗~~~

罗辣各位，鸠咪^_<