Hello, 各位 iT 邦幫忙 的粉絲們大家好~~~

在本系列文會利用目前 Visual Studio 內建的專案樣本建立一個初始的 .NET MAUI 專案，並且透過此 .NET MAUI 專案來把 TopStore App 的開發從 Xamairn.Forms 轉換到 .NET MAUI 上進行。

本篇是 Re: 從零改成用 .NET MAUI 技術來繼續過去用 Xamarin 開發的一個 App : TopStore 系列 系列文的 EP24。

在上一回當中可以看到 Product 資料正確的顯示在 GoodsPage 這個 "物品項" 的頁籤之後，接著繼續到 GoodsPageViewModel 中來設計在 GoodsPage 當中所需要的功能操作。

首先，開啟 "ViewModels" 資料夾底下的 "GoodsPageViewModel.cs"：

接著加入以下方法的設計：

[RelayCommand]
private void Add()
{

}

[RelayCommand]
private void Edit(Models.Product product)
{

}

[RelayCommand]
private void Delete(Models.Product product)
{

}

[RelayCommand]
private void MakeOrder(Models.Product product)
{

}

[RelayCommand]
private void Search(string keyword)
{

}

完成的結果如下圖紅框所示：

而注意到每個方法上都會掛上 [RelayCommand] 的這個 Attritube，並且會看到檔案的上面引用命名空間的撰寫處 Visual Studio 2022 應該也會協助 "自動" 會引用：

using CommunityToolkit.Mvvm.Input;

確認的部分如下圖紅框所示：

接著就逐步完成每個方法的設計了，首先來看看前三個方法 Add()、Edit()、Delete()：

    [RelayCommand]
    private async void Add()
    {
        await Shell.Current.DisplayAlert("Alert", "ProductDetailPageNotImplement", "Cancel");
        //await Shell.Current.GoToAsync("//Goods/ProductDetail?isEdit=true");
    }

    [RelayCommand]
    private async void Edit(Models.Product product)
    {
        await Shell.Current.DisplayAlert("Alert", $"You select the {product.Name}, " +
                                                  $"but ProductDetailPageNotImplement", "Cancel");
        //await Shell.Current.GoToAsync($"//Goods/ProductDetail?isEdit=false&productId={product.Id}");
    }

    [RelayCommand]
    private async void Delete(Models.Product product)
    {
        var isOk = await Shell.Current.DisplayAlert("警告", $"確定\"{product.Name}\"刪除?", "確定", "取消");
        if (isOk)
        {
            App.DataService.DeleteProduct(product);
            Goods = App.DataService.GetGoods();
        }
    }

完成的結果如下圖紅框所示：

而注意綠框的部分 async 關鍵字是當在方法撰寫中有用到 await 關鍵字的時候(打字輸入，複製貼上不算)，Visual Studio 2022 會自動協助在方法的簽章上加入。

另外，因為目前 "TopStoreApp" 尚未設計 ProductDetailPage ，所以先暫時透過 DisplayAlert() 作為 UI 介面的代表，以確保在下一回進到 XAML 畫面設定 Command 繫結後，UI 都能有所顯示的反應。

再來接著設計 MakerOrder()、Search() 的兩個方法：

    [RelayCommand]
    private async void MakeOrder(Models.Product product)
    {
        await Shell.Current.DisplayAlert("Alert", "MakeOrderPageNotImplement", "Cancel");
        //await Shell.Current.GoToAsync($"//Orders/MakeOrder?productId={product.Id}");
    }

    [RelayCommand]
    private async void Search(string keyword)
    {
        var results = App.DataService.GetGoods(keyword);
        if (results.Count != 0)
        {
            Goods = results;
            return;
        }
        await Shell.Current.DisplayAlert("通知", "查無相關貨品", "OK");
    }

完成的結果如下圖紅框所示：

而注意綠框的部分 async 關鍵字是當在方法撰寫中有用到 await 關鍵字的時候(打字輸入，複製貼上不算)，Visual Studio 2022 會自動協助在方法的簽章上加入。

另外，因為目前 "TopStoreApp" 尚未設計 MakeOrderPage ，所以先暫時透過 DisplayAlert() 作為 UI 介面的代表，以確保在下一回進到 XAML 畫面設定 Command 繫結後，UI 都能有所顯示的反應。

以上完成後可以先嘗試將整個專案 "重建"：

最後在 Visual Studio 2022 的左下角應該會得的 "全部重建成功" 的訊息顯示：

本 EP 介紹所完成的範例程式碼可在此下載。