简体   繁体   English

在 Blazor 模板 Visual Studio 2019 中自动导航两个 razor 组件

[英]Navigate two razor component automatically in Blazor template visual studio 2019

I have two razor component with names of "new" and "second".我有两个 razor 组件,名称分别为“新”和“第二”。 How can i navigate them automatically, i mean when there is something to show navigate to new automatically and when there is nothing to show, navigate back to second automatically again.我如何自动导航它们,我的意思是当有东西要显示时自动导航到新的,当没有东西要显示时,再次自动导航回第二个。

Here is new: @page "/new"这是新的:@page "/new"

<div class="Vistit">
        <div class="container-fluid">
            <div class="row h-100">
                <div class="col-sm-8 ">


                    @foreach (var appointment in _visibleAppointments)
                    {
                        <div class="row mb-5">
                            <div class="col-sm-4"> <h1> @appointment.HeaderText: </h1> </div>

                            <div class="col-sm-8">
                                @foreach (var contactPerson in appointment.Contacts)
                                {
                                    <h1> @contactPerson.Gender @contactPerson.Name </h1>
                                }

                            </div>

                        </div>
                        <div class="row mt-5"></div>
                        <div class="row mt-5"></div>
                        <div class="row mt-5">
                            <div class="col-sm-4"> <h1>Company:</h1> </div> <div class="col-sm-8"> <h1> @appointment.Company </h1> </div>
                        </div>
                    }

                </div>

                <div class="col-sm-4 ">

                        <TemplatedCarousel Items="AssetImages" TItem="ImageFile" AutoScrollInterval="3" OnCarouselItemClicked="OnCarouselItemClicked" ShowNavigation="false">
                            <ItemTemplate>

                                <div class="Slideimg">
                                    <img class="d-block center" src="@GetImageSource(@context)" alt="@context.FileName">
                                </div>
                                <div class="Slogan">
                                    <p>Here is slogan!</p>
                                </div>
                            </ItemTemplate>
                        </TemplatedCarousel>

                </div>
                </div>
        </div>
        </div>

And here is second: @page"/second"这是第二个:@page"/second"

<div class="SecondP">
        <div class="container-fluid">
            <div class="row h-100">
                <div class="col-sm-6 ">
                    <video controls="controls" class="ml-auto" autoplay muted loop>
                        <source src="/Video/TestMovie_small.mp4" type="video/mp4" />
                    </video>
                </div>

                <div class="col-sm-6 ">
                    <TemplatedCarousel Items="AssetImages" TItem="ImageFile" AutoScrollInterval="3" OnCarouselItemClicked="OnCarouselItemClicked" ShowNavigation="false">
                        <ItemTemplate>
                            <img class="d-block center" src="@GetImageSource(@context)" alt="@context.FileName">
                        </ItemTemplate>
                    </TemplatedCarousel>
                </div>
            </div>
        </div>
    </div>

You can override OnInitializedAsync() or OnInitialized() in your @code {} section in new or second and inject the NavigationManager to help you.您可以在@code {}部分中以 new 或 second 覆盖OnInitializedAsync()OnInitialized()并注入NavigationManager来帮助您。

@inject NavigationManager navigationManager // at the top
///HTML
@code
{
    protected override Task OnInitializedAsync()
    {
        //if something is empty
        navigationManager.NavigateTo("/second");
    }
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Visual Studio Community 2019 16.5.3 与 Blazor 应用程序 -&gt; 添加 -&gt; 新项目 -&gt; Razor 组件 -&gt; 路由或组件未呈现 - Visual Studio Community 2019 16.5.3 with Blazor App -> Add -> New Item -> Razor Component -> Route or component is not rendered 在 Visual Studio 2019 中找不到“Blazor App”项目模板 - Can not find “Blazor App” project template in Visual Studio 2019 如何在 Visual Studio 2019 的 Blazor 中向组件添加分部类? - How to add a Partial Class to a component in Blazor in Visual Studio 2019? 如何使用 Visual Studio 2019 清理 blazor 组件中的代码 - How to clean/lint the code in a blazor component with visual studio 2019 blazor 智能感知无法正常工作 Visual Studio 2019 - blazor intellisense not working visual studio 2019 适用于 Autocad 的 Visual Studio 2019 中的模板 - Template in Visual Studio 2019 for Autocad 在 .net 核心 3.1 / Visual Studio 2019 中自定义脚手架 Razor 页面 (CRUD) 的模板 - Customise the template for Scaffolded Razor Pages (CRUD) in .net core 3.1 / Visual Studio 2019 未显示 Visual Studio 2019 空白解决方案模板 - Visual Studio 2019 Blank Solution template is not showed Visual Studio 2019 Blazor 服务器端项目太慢了 - Visual Studio 2019 Blazor serverside project is soooooo slow 为什么 Visual Studio 2019 会删除对新 .razor 文件的监视? - Why does Visual Studio 2019 remove watch for new .razor files?
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM