Как передать строковое значение из оболочки MAUI в параметр компонента Blazor в гибридном приложении MAUI Blazor?

Я разрабатываю приложение с использованием .NET MAUI Blazor, где у меня есть оболочка со следующим кодом в MainPage.xaml. У меня также есть страница Blazor под названием ListOfTask, на которой перечислены задачи. Ниже приведен код этой страницы Blazor. Я хочу знать, как передать строковое значение из оболочки MAUI в параметр в компоненте ListOfTask Blazor. Я впервые пишу приложение, поэтому учусь по ходу дела. Пожалуйста, извините за логические ошибки — это всего лишь тестовое приложение». **

MainPage.xaml

**
    <?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>

**

Моя страница Blazor ListOfTask

**

@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

Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
1
0
67
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Потенциально существует два метода передачи строкового значения из 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;
    }

Спасибо, это сработало!

ZCoder 28.08.2024 05:23

Другие вопросы по теме