在 .NET MAUI（Multi-platform App UI）中使用查询参数，实现不同页面之间传递数据

在移动应用开发中，经常需要在不同页面之间传递数据。例如，在餐厅预订应用中，当用户选择一个餐厅时，应用需要将餐厅的 ID 从一个页面传递到另一个页面以显示详细信息。可以通过在 .NET MAUI（Multi-platform App UI）中使用查询参数实现。

本教程将详细讲解如何在 .NET MAUI 应用中传递查询参数，并解决常见问题。包括如何正确注册路由，如何使用查询属性，以及如何在视图和视图模型之间传递参数。

示例代码

以下代码展示如何在 .NET MAUI 中传递查询参数并将其绑定到视图模型。

在 .NET MAUI 中，使用 Shell 来管理应用的导航。首先，需要在 AppShell.cs 中注册路由。

AppShell.cs

public partial class AppShell : Shell
{
    public AppShell()
    {
        InitializeComponent();
        Routing.RegisterRoute("login", typeof(LoginPage));
        Routing.RegisterRoute("home", typeof(MainPage));
        Routing.RegisterRoute("location", typeof(LocationPage));
    }
}

页面导航代码

为了在页面之间传递数据，可以使用查询参数。在 Shell 导航中，使用 GoToAsync 方法，并将参数作为查询字符串的一部分传递。

string restaurantId = "12345"; // 这是要传递的餐厅ID
await Shell.Current.GoToAsync($"location?restaurantId={restaurantId}");

LocationPage.xaml.cs

[QueryProperty(nameof(Id), "restaurantId")]
public partial class LocationPage : ContentPage
{
    private LocationModel _viewModel;

    public string Id
    {
        set => _viewModel.RestaurantId = value;
    }

    public LocationPage()
    {
        InitializeComponent();
        BindingContext = _viewModel = new LocationModel();
    }
}

LocationModel.cs

public partial class LocationModel : ObservableObject
{
    [ObservableProperty]
    public string restaurantId;
}

这样，我们成功地将查询参数从一个页面传递到另一个页面，并绑定到视图模型中。在实际应用中，可以根据传递的 RestaurantId 实现相应的数据加载逻辑。