Я разрабатываю приложение с использованием .NET MAUI Blazor, где у меня есть оболочка со следующим кодом в MainPage.xaml. У меня также есть страница Blazor под названием ListOfTask, на которой перечислены задачи. Ниже приведен код этой страницы Blazor. Я хочу знать, как передать строковое значение из оболочки MAUI в параметр в компоненте ListOfTask Blazor. Я впервые пишу приложение, поэтому учусь по ходу дела. Пожалуйста, извините за логические ошибки — это всего лишь тестовое приложение». **
**
<?xml version = "1.0" encoding = "utf-8" ?>
<Shell xmlns = "http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x = "http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local = "clr-namespace:MauiApp14"
x:Class = "MauiApp14.MainPage"
xmlns:pages = "clr-namespace:MauiApp14.Components.Pages"
xmlns:pagese = "clr-namespace:MauiApp14.Components.Pages.Survey"
xmlns:in = "clr-namespace:MauiApp14.Components.Layout"
>
<TabBar>
<!--<ShellContent Title = "Settings" Icon = "settings.png" ContentTemplate = "{DataTemplate pages:NewPage4}" />-->
<ShellContent Title = "Home" Icon = "icons_task.png">
<ContentPage>
<BlazorWebView x:Name = "Survey" HostPage = "wwwroot/index.html">
<BlazorWebView.RootComponents>
<RootComponent Selector = "#app" ComponentType = "{x:Type pagese:ListOftask}" />
</BlazorWebView.RootComponents>
</BlazorWebView>
</ContentPage>
</ShellContent>
</TabBar>
</Shell>
**
**
@page "/tasklist"
@using MauiApp14.Components.Layout
@inject NavigationManager navigationManager
<table class = "table">
<thead>
<tr>
<th>ID</th>
<th>Task Name</th>
<th>Description</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
@foreach (var task in tasks)
{
<tr>
<td>@task.Id</td>
<td>@task.Name</td>
<td>@task.Description</td>
<td>
<button class = "btn btn-primary" @onclick = "() => StartTask(task)">Start</button>
</td>
</tr>
}
</tbody>
</table>
@code {
private List<TaskModel> tasks;
protected override void OnInitialized()
{
// Initialize the list of tasks
tasks = new List<TaskModel>
{
new TaskModel { Id = 1, Name = "Task 1", Description = "Description for Task 1", RedirectUrl = "/task1" },
new TaskModel { Id = 2, Name = "Task 2", Description = "Description for Task 2", RedirectUrl = "/task1" },
new TaskModel { Id = 3, Name = "Task 3", Description = "Description for Task 3", RedirectUrl = "/task1" },
// Add more tasks as needed
};
}
private async Task StartTask(TaskModel task)
{
await App.Current.MainPage.Navigation.PushAsync(new NewPage1("test" );
// navigationManager.NavigateTo(task.RedirectUrl,true);
}
}
Если вы видите, что я передаю тестовое значение для ожидания App.Current.MainPage.Navigation.PushAsync(new NewPage1("test" ); который также вызывает страницу blazor
<?xml version = "1.0" encoding = "utf-8" ?>
<ContentPage xmlns = "http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x = "http://schemas.microsoft.com/winfx/2009/xaml"
x:Class = "MauiApp14.Components.NewPage1"
Title = "Survey"
xmlns:pages = "clr-namespace:MauiApp14.Components.Pages">
<StackLayout>
<!-- Entry (TextBox) for user input -->
<Entry x:Name = "entryTextBox" Placeholder = "Enter text here" />
<!-- BlazorWebView to display Blazor content -->
<BlazorWebView x:Name = "blazorWebView4" HostPage = "wwwroot/index.html">
<BlazorWebView.RootComponents>
<RootComponent Selector = "#app" ComponentType = "{x:Type pages:Counter}" />
</BlazorWebView.RootComponents>
</BlazorWebView>
</StackLayout>
</ContentPage>
**
**
@page "/task1"
@using MauiApp14.Components.Layout
@inject Radzen.DialogService DialogService
@inject NavigationManager navigationManager
@inject DataTransferService DataTransferService
<div style = "padding-bottom: 60px;">
<!-- Adjust padding-bottom as needed -->
<div class = "rz-p-0 rz-p-md-12">
<RadzenStack Orientation = "Orientation.Horizontal" FlexWrap = "FlexWrap.Wrap" Gap = "1rem" class = "rz-p-4 rz-mb-6">
<RadzenTimeline Orientation = "@orientation" LinePosition = "LinePosition.Start"
style = "--rz-timeline-line-width: 3px;
--rz-timeline-line-color: var(--rz-info);
--rz-timeline-axis-size: 72px;
max-width: 600px;
margin: 0 auto;">
<Items>
@foreach (var step in Steps)
{
<RadzenTimelineItem PointVariant = "Variant.Outlined" PointStyle = "@step.PointStyle" PointShadow = "@step.PointShadow">
<PointContent><RadzenIcon Icon = "@step.Icon" /></PointContent>
<ChildContent>
<RadzenText TextStyle = "TextStyle.Subtitle1" class = "rz-m-0">Step @step.Id</RadzenText>
<RadzenText TextStyle = "TextStyle.Body2" class = "rz-m-0">@step.Title</RadzenText>
</ChildContent>
</RadzenTimelineItem>
}
</Items>
</RadzenTimeline>
</RadzenStack>
</div>
@if (!isComplete)
{
<!-- Symptom Check Dialog -->
<SymptomCheckDialog OnNext = "HandleNext" />
}
else
{
<MauiApp14.Components.Pages.Survey.Complete />
}
<button class = "btn btn-primary" @onclick = "GoBack">@MyProperty</button>
</div>
@code {
[Parameter]
public string MyProperty { get; set; }
private async Task GoBack()
{
// Navigate back to the previous page
await App.Current.MainPage.Navigation.PopToRootAsync();
}
public List<UserTask> Steps { get; set; } = new List<UserTask>();
private bool isComplete = false;
protected override Task OnInitializedAsync()
{
MyProperty = DataTransferService.EntryText;
return base.OnInitializedAsync();
}
private void HandleNext()
{
isComplete = true;
Steps.ForEach(step =>
{
if (step.Title == "Complete Your Profile")
{
step.PointStyle = PointStyle.Warning;
}
else
{
step.PointStyle = PointStyle.Primary;
}
});
StateHasChanged(); // Refresh the UI to show the Complete component
}
Orientation orientation = Orientation.Horizontal;
public class UserTask
{
public int Id { get; set; }
public string Title { get; set; }
public bool LeftOn { get; set; } = false;
public string Icon { get; set; }
public int PointShadow { get; set; } = 0;
public PointStyle PointStyle { get; set; } = PointStyle.Info;
}
}
это способ получить это значение в моем параметре Blazor MyProperty
Потенциально существует два метода передачи строкового значения из MAUI в компонент Blazor.
№1:
Вы можете определить свой MainPage.xaml
с помощью ContentPage
, чтобы передать его через конструктор.
<ContentPage xmlns = "http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x = "http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local = "clr-namespace:MauiBlazorWindow.Components.Pages"
x:Class = "MauiBlazorWindow.MainPage">
<BlazorWebView x:Name = "blazorWebView" HostPage = "wwwroot/index.html">
<BlazorWebView.RootComponents>
<RootComponent x:Name = "root" Selector = "#app" ComponentType = "{x:Type local:Home}" />
</BlazorWebView.RootComponents>
</BlazorWebView>
</ContentPage>
public partial class MainPage : ContentPage
{
public string myPassString = "This is a string";
public MainPage()
{
InitializeComponent();
root.Parameters = new Dictionary<string, object>()
{
{"MyProperty",myPassString }
};
}
}
В своем компоненте Blazor определите переменную [Parameter]
, а затем вы сможете получить ее через @MyProperty
.
@code {
[Parameter]
public string MyProperty { get; set; }
№2:
Определите строку myPassString
, которую вы хотите передать ниже в свой MainPage.xaml.cs
:
public string myPassString = "This is a string";
А затем передайте его MyProperty
:
@code {
[Parameter]
public string MyProperty { get; set; }
protected override void OnInitialized()
{
base.OnInitialized();
MyProperty = (App.Current.MainPage as MainPage).myPassString;
}
Спасибо, это сработало!