web-dev-qa-db-ja.com

NavLinkはURLを更新しますが、Blazorでページをリロードしません

プロジェクトの作成、表示、編集に使用するProjectBase.razorページがあります。次のルートはすべてこのページに移動します。

/project/view/{projNum}
/project/create/
/project/edit/{projNum}

また、ナビゲーションメニューにナビゲーションプロジェクトがあり、新しいプロジェクトを作成できます。

<NavLink class="nav-link" href="/Project/Create" Match="NavLinkMatch.All" >
    <span aria-hidden="true">New Project</span>
</NavLink>

同じページの表示/編集機能でそのリンクをクリックすると、URLは「/ Project/Create」に変わりますが、ページ自体が更新または再読み込みされません。 NavLinkを通じてこれを強制する方法はありますか？または、これを行うにはOnClick関数を追加する必要がありますか？

asp.net-coreblazor
5
Katie P

同じ問題がありました。私が持っている解決策は...

新しいページを作成

@page "/project/create/"
<ProjectBase></ProjectBase>

それでおしまい！削除する @pageディレクティブ（/project/create/）ProjectBaseページから

すべてが期待どおりに動作します...これで、すべてのページで実行できます。

0
PhotoSonic

あなたのケースでは、ロッド・ウィアーによる言及として以下の変更を行う必要があります、私は答えを広げています。

 /project/view/{projNum}
 /project/create/
 /project/edit/{projNum}

上記のクエリパラメータについては、コードで[Parameter]を定義する必要があります。

[Parameter]
public string projNum {get;set;}

次にメソッドを追加します

protected override async Task OnParametersSetAsync()
{

  var projectDetail = await getProjectDetails(projNum); // ProgNum will change as it get changes in url, you don't have to do anything extra here.
}

ページを強制的に再読み込みすると、他のいくつかの問題が発生します。正しい結果が得られますが、ページの動作は変化します。ページには、header/left Nav /など、他のコンポーネントがあります。これらは、動的であれば変更されません。変更を強制し、すべてのコンポーネントでhanldeがリロードを強制します。また、ユーザーエクスペリエンスも影響を受けます。

この助けを願っています。

0
ZKS

これは仕様によるものです。<NavLink>はサーバーにリクエストを送信せず（F12で確認）、クライアントの同じページにリダイレクトするため、何も更新されません。

これらのURLをブラウザに入力すると、リクエストが送信され、ページが更新されます。

回避策は、現在のルートに基づいて異なるコンテンツを表示できることです。

@page "/project/view/{projNum}"
@page "/project/create/"
@page "/project/edit/{projNum}"
@using Models
<h3>ProjectBase</h3>

@if (projNum == null)
{
<EditForm Model="@createModel" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <InputText id="name" @bind-Value="createModel.Name" />

    <button type="submit">Create</button>
</EditForm>
}
else
{


<EditForm Model="@exampleModel" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <InputText id="name" @bind-Value="exampleModel.Name" />

    <button type="submit">Submit</button>
</EditForm>
}
@code {


    [Parameter]
    public string projNum { get; set; }

    private ExampleModel createModel = new ExampleModel();
    private ExampleModel exampleModel = new ExampleModel();

    protected override void OnInitialized()
    {
        exampleModel.Name = projNum;
    }



    private void HandleValidSubmit()
    {
        //your logic
        Console.WriteLine("OnValidSubmit");
    }
}
0
Ryan