Blazor 导航问题

Question

我有 2 个 Blazor 页面。

Home.razor @page "/"

MgrLanding.razor @page "/MgrLanding"

还有一个组件 PersonEdit.razor

主页上有一个 link 可以导航到 MrgLanding 页面。当我单击 link 时，它会将我带到 MgrLanding。

MgrLanding 有 PersonEdit 组件。

有一个 link 来显示 PersonEdit 组件。

当我点击 link 时，它会将我带回主页。

如果我通过以下方式将 MgrLanding 页面设置为主页：@page "/" 行为符合预期，PersonEdit 组件显示。

HomePage.razor

@page "/"
<h3>HomePage</h3>
<a href="/MgrLanding">Mgr Landing Page</a>

MgrLanding.razor

@page "/MgrLanding"

<h3>MgrLanding</h3>

<a href="" onclick="@ChangeEditMode">Edit</a>

@if (EditMode)
{
    <PersonEdit Employee=@PE FormSubmittedCallback=@Save></PersonEdit>
}

@code {
    public bool EditMode { get; set; }
    public Person PE { get; set; }

    public class Person
    {
        public string Name { get; set; }
    }

    protected async override Task OnInitializedAsync()
    {
        PE = new Person();
        PE.Name = "Bob The Builder";
    }
    protected void ChangeEditMode()
    {
        EditMode = true;
    }
    public void Save()
    {
        EditMode = false;
    }
}

PersonEdit.razor分量

<h5>PersonEdit Component</h5>

<EditForm Context="formContext" Model=@Employee>
    <InputText @bind-Value=Employee.Name class="form-control" id="Name" />
    <input type="submit" class="btn btn-primary" value="Save" @onclick="Save" />
</EditForm>

@code {
    [Parameter]
    public MgrLanding.Person Employee { get; set; }
    [Parameter]
    public EventCallback FormSubmittedCallback { get; set; }

    private void Save()
    {
        FormSubmittedCallback.InvokeAsync();
    }
}

Answer 1

将锚点更改为按钮：

<a href="" onclick="@ChangeEditMode">Edit</a>

到

<button onclick="@ChangeEditMode">Edit</button>

如果需要使用锚点和动作，那么更好的 blazor 方法是简单地省略 href 属性：

<a onclick="@ChangeEditMode">Edit</a>

如果需要 link 的样式，我会

<button class="btn btn-link" onclick="@ChangeEditMode">Edit</button>

Answer 2

您仍然可以使用 link 并阻止其默认操作

<a href="" @onclick:preventDefault=true 
 @onclick="@ChangeEditMode">Edit</a>

Blazor 导航问题

Blazor Navigation Issue

navigation

blazor

blazor-server-side