blazor页面上的“取消”按钮不回滚更改

问题描述

我是炽热的初学者。我无法正确处理Back功能。编辑完数据后，返回不还原先前的数据，重新加载页面后将显示正确的数据。如何放弃编辑表单中的更改？ 我希望Back从编辑表单返回到数据页面，并且数据应与编辑之前相同。

谢谢！

我单击“编辑”，更改了文本，然后单击“返回”。

详细信息已更改。我无法收回它。

@page "/tcdemo"

@using tcDemo.Data
@inject tcDemo.Services.TcDemoService tcDemoService
@inject NavigationManager NavigationManager

<h1>TC Demo</h1>

@if (tcDemos == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Details (C)</th>
                <th>Id</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var tcDemo in tcDemos)
            {
                <tr>

                    <td>@tcDemo.Name</td>
                    <td>@tcDemo.Details</td>
                    <td>@tcDemo.Id</td>
                    <td>
                        <button class="btn btn-primary" @onclick="(() => GoToEdit(tcDemo.Id))">
                            Edit
                        </button>
                    </td>
                </tr>
            }
        </tbody>
    </table>
}

@code {
    private IList<tcDemo.Data.TcDemo> tcDemos;

    protected override async Task OnInitializedAsync()
    {
        tcDemos = await tcDemoService.GetListAsync();
    }

    public async Task GoToEdit(Guid id)
    {
        NavigationManager.Navigateto("/tcdemo/" + id);
        //UriHelper.Navigateto("/todo/" + id);
    }
}

@page "/tcdemo/{Id:guid}"
@inject NavigationManager NavigationManager
@using tcDemo.Data
@inject tcDemo.Services.TcDemoService tcDemoService

<h1>TC Demo Edit @Id</h1>


@if (tcDemo == null)
{
    <p><em>Loading...</em></p>
}
else
{

<EditForm Model="@tcDemo" OnValidSubmit="@Save">
    <DataAnnotationsValidator />
    <ValidationSummary />

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

    <InputText id="details" @bind-Value="tcDemo.Details" />

    <button type="submit" class="btn btn-primary">
        Submit
    </button>
    <button type="reset" class="btn btn-primary" @onclick="(() => Back())">
        Back
    </button>
</EditForm>


}
                  

@code {
    [Parameter]
    public Guid Id { get; set; }

    [Parameter]
    public tcDemo.Data.TcDemo tcDemo { get; set; }

    [Parameter]
    public EventCallback CancelRequest { get; set; }

    //private tcDemo.Data.TcDemo tcDemo;

    protected override async Task OnInitializedAsync()
    {
        tcDemo = await tcDemoService.GetAsync(Id);
    }

    public async Task Save()
    {
        await tcDemoService.UpdateAsync(tcDemo);
        NavigationManager.Navigateto("/tcdemo/");
    }

    private async Task Back()
    {
        NavigationManager.Navigateto("/tcdemo/");

    }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）