MAUI Blazor Navigation Manager does not stay on the second page-CodePudding

Currently I’m developing MAUI application with blazor template. I use the navigation manager to navigate to another page in order to move to the next page when a user successfully enters their credentials.

Navigation manager moves me to the next page. But in a millisecond, it will be redirected to the index page.

Here is my index code below:

@page "/"
@inject NavigationManager Navigation;

<div  >
    <form >
        <center>
            <h3 >Sign In</h3>
            <p >Login with your Credentials</p>
            <div >
                <input type="text"  placeholder=" " />
                <label >Username</label>
            </div>
            <div >
                <input type="password"  placeholder=" " />
                <label >Password</label>
            </div>
            <button @onclick="()=>NavigateToCompany()" >Sign In</button>
        </center>
    </form>
</div>


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

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

Here is my second page code below:

@page "/company-select"

<h3>CompanySelect</h3>

@code {

}

How can I stay on second page rather than be redirected to the index page?

I use .NET 7 and Visual studio 2022

CodePudding user response：

You need to put the Button element outside the form element like below:

@page "/"
@inject NavigationManager Navigation;

<div > 

    <form >

        <center>

            <h3 >Sign In</h3>

            <p >Login with your Credentials</p>

            <div >

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

                <label >Username</label>

            </div>

            <div >

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

                <label >Password</label>

            </div>

        </center>

    </form>

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

</div>

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

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

The reason why you need place the button outside of the form is that when putting a button element inside a form element, the attribute of the button element defaults to submit leading to that it will be redirected to the index.