MAUI Blazor Navigation Manager 不停留在第二頁

Question

目前我正在使用 blazor 模板開發 MAUI 應用程序。我使用導航管理器導航到另一個頁面，以便在用戶成功輸入其憑據時移動到下一頁。

導航管理器將我移至下一頁。 但是在一毫秒內，它將被重定向到索引頁面。

下面是我的索引代碼：

@page "/"
@inject NavigationManager Navigation;

<div class="center_div" >
    <form class="center_content">
        <center>
            <h3 class="login_title">Sign In</h3>
            <p class="login_text">Login with your Credentials</p>
            <div class="field_cont">
                <input type="text" class="field_input" placeholder=" " />
                <label class="field_label">Username</label>
            </div>
            <div class="field_cont">
                <input type="password" class="field_input" placeholder=" " />
                <label class="field_label">Password</label>
            </div>
            <button @onclick="()=>NavigateToCompany()" class="form_btn">Sign In</button>
        </center>
    </form>
</div>


@code{
    private string UserName = "";
    private string Password = "";

    private void NavigateToCompany()
    {
        Navigation.NavigateTo("/company-select");
    }
}

下面是我的第二頁代碼：

@page "/company-select"

<h3>CompanySelect</h3>

@code {

}

我怎樣才能留在第二頁而不是被重定向到索引頁？

我使用.NET 7和Visual Studio 2022

Answer 1

您需要將Button元素放在 form 元素之外，如下所示：

@page "/"
@inject NavigationManager Navigation;

<div class="center_div"> 

    <form class="center_content">

        <center>

            <h3 class="login_title">Sign In</h3>

            <p class="login_text">Login with your Credentials</p>

            <div class="field_cont">

                <input type="text" class="field_input" placeholder=" " />

                <label class="field_label">Username</label>

            </div>

            <div class="field_cont">

                <input type="password" class="field_input" placeholder=" " />

                <label class="field_label">Password</label>

            </div>

        </center>

    </form>

    <button @onclick="()=>NavigateToCompany()" class="form_btn">Sign In</button>

</div>

@code{
    private string UserName = "";
    private string Password = "";

    private void NavigateToCompany()
    {
        Navigation.NavigateTo("/company-select");
    }
}

您需要將按鈕放在表單外部的原因是，當將按鈕元素放在表單元素內時，按鈕元素的屬性默認為submit導致它將被重定向到索引。