Blazor导航重新加载同一页面

时间:2020-05-27 20:24:52

标签: c# asp.net blazor

我有一个维护任务网站,列出了机器的任务。 MachineDetails页面:

 @page "/MachineDetails/{MachineName}"
 @inherits MachineDetailsBase

 <h3>Machine Details for @Machine.MachineName</h3>
 <table class="table table-bordered table-striped table-hover">
    <thead>
        <tr>
            <th scope="col">Description</th>
            <th scope="col">Repeat<br />(Days)</th>
            <th scope="col">Exp Dur<br /> (Min)</th>
            <th scope="col">Next Due</th>
            <th scope="col">Owner</th>
            <th scope="col">Perform<br />Task</th>
        </tr>
    </thead>
    @foreach (var t in Machine.TasksForMachine)
    {
        <tr scope="row">
            <td>@t.TaskDescription</td>
            <td>@t.TaskRepeatDays</td>
            <td>@t.TaskMinutes</td>
            <td>@t.NextDue.Value.ToShortDateString()</td>
            <td>@t.TaskOwnerType</td>               
            <td style="text-align:center"><button class="btn btn-primary" @onclick="(() => ShowPerformTask(t.TaskId))"> <img src="/css/open-iconic/svg/check.svg" height="12" /></button></td>                
        </tr>
    }
</table>

MachineDetailsBase是:

  public class MachineDetailsBase : ComponentBase
  {
    [Inject]
    public IMaintenancePMRepository repo { get; set; }
    [Inject]
    NavigationManager NavigationManager { get; set; }
    [Parameter]
    public string MachineName { get; set; }
    public MachineForTasks Machine {get;set;}        
    // other details

    protected override async Task OnInitializedAsync()
    {
        GetSelectedMachine(MachineName);
        EmployeeList = repo.GetEmployeeList().ToList();
        StatusLoookup = repo.GetStatusList().ToList();            
    }

    private void GetSelectedMachine(string inputName)
    {
        Machine= repo.GetAllEquipment().Where(m => m.EquipmentName == inputName).FirstOrDefault(); ;
    }

    public void ShowPerformTask(int  taskID)
    {
      NavigationManager.NavigateTo("/PerformTask/" + taskID.ToString());
    }

在任务页面上,我执行了必要的工作,然后尝试再次调用NavigationManager,以返回到原始页面。

PerformTaskBase上的相关代码执行相同的基本操作代码以获取回执:

剃刀页码:

        <div class="row">
            <div class="col-sm-4 ">
                <button class="btn btn-primary" @onclick="(() => ClosePerformTask(true))"> Save </button>
            </div>
            <div class="col-sm-4 ">
                <button class="btn btn-secondary" @onclick="(() => ClosePerformTask())"> Don't Save</button>
            </div>
        </div>

然后输入代码:

  public void ClosePerformTask(bool SaveTask = false)
  {
     if (SaveTask)
        {                
            repo.PerformTask(TaskRecord);
            TaskToPerform.NextDue = DateTime.Today.AddDays(TaskToPerform.TaskRepeatDays.GetValueOrDefault());
            repo.UpdateTask(TaskToPerform);                
        }

        NavigationManager.NavigateTo("/MachineDetails/" + MachineID);
    }

一秒钟会加载MachineDetails页面,然后将重新执行PerformTask页面。

将断点放在MachineDetails页面后面的代码中,除了OnInitializedAsync()外,我什么都看不到。我如何才能加载MachineDetails页面而不返回到PerformTask?

1 个答案:

答案 0 :(得分:1)

我的答案是基于这样的假设,即该代码位于表单元素中...

div class="row">
        <div class="col-sm-4 ">
            <button class="btn btn-primary" @onclick="(() => 
           ClosePerformTask(true))"> Save </button>
        </div>
        <div class="col-sm-4 ">
            <button class="btn btn-secondary" @onclick="(() => 
                        ClosePerformTask())"> Don't Save</button>
        </div>
    </div>

我是对的

如果是,则此行为的解释非常简单:使用输入按钮而不设置type属性等同于设置要提交的type属性。当您单击任一按钮时,除了NavigationManager的导航之外,还会发生传统的回发到服务器的事件。但是您不回发到SPA应用程序中。这意味着要退出应用程序的导航空间...要解决此问题,请将type属性添加到两个带有按钮值的按钮:<button type="button">这将不允许回发,并且导航将按预期进行

希望这对您有帮助...