asp.net 如何确保剃刀组件仅显示有效的对象状态?(即,如数据存储中所示)

cdmah0mi  于 2022-12-15  发布在  .NET
关注(0)|答案(1)|浏览(113)

我正在尝试使用ASP.NET Blazor Server,但我不太了解组件的生命周期。我的项目是一个简单的“员工管理器”应用程序,用户可以在其中CRUD员工存储库。员工数据存储在远程数据库中。
主页(“/”和“/Employee/List”)列出了表中的所有员工数据。该表中的每个条目都有一个“更新”按钮,用于重定向到相关员工的更新页(“/Employee/Update/{EmployeeId:int}”),在该页中,我有一个EditForm来处理更改和更新数据库。该页中还有一个“返回列表”链接。
快乐路径中的一切都很顺利。如果我进行更改并保存,它们将按预期复制到数据库中,并在我返回时显示在列表页中。但是,如果我进行更改并单击“返回列表”按钮或浏览器的后退按钮而不提交表单,我仍会在列表页中看到这些更改。
当然,这些更改不会复制到数据库中,如果刷新列表页面,就会得到预期的值。但是为什么会发生这种情况呢?更重要的是,如何修复它?
List.razor

@page "/"
@page "/Employee/List"

@inject IEmployeeRepository EmployeeRepository

[...]
<table border="1" cellpadding="10">
    <tr>
        <th>Employee ID</th>
        <th>Employee Name</th>
        <th colspan="2">Actions</th>
    </tr>
    @foreach (var item in Employees)
    {
        <tr>
            <td>@item.EmployeeId</td>
            <td>@item.EmployeeName</td>
            <td><a class="link-button" href="/employee/update/@item.EmployeeId">Update</a></td>
            <td><a class="link-button" href="/employee/delete/@item.EmployeeId">Delete</a></td>
        </tr>
    }
</table>

@code {
    private List<EmployeeModel> Employees { get; set; }

    protected override void OnInitialized()
    {
        Employees = EmployeeRepository.GetEmployees();
    }
}

Update.razor

@page "/Employee/Update/{EmployeeId:int}"

@inject IEmployeeRepository EmployeeRepository

[...]
<EditForm Model="Employee" OnSubmit="OnSaveClicked">
    <table border="0" cellpadding="10">
        <tr>
            <td class="right"><label for="EmployeeId">Employee ID</label></td>
            <td><span id="EmployeeId">@Employee.EmployeeId</span></td>
        </tr>
        <tr>
            <td class="right"><label for="EmployeeName">Employee Name</label></td>
            <td><InputText id="EmployeeName" @bind-Value="Employee.EmployeeName"></InputText></td>
        </tr>
        <tr>
            <td colspan="2"><button type="submit">Save</button></td>
        </tr>
    </table>
</EditForm>
<a href="/employee/list">Back to List of Employees</a>

@code {
    [Parameter]
    public int EmployeeId { get; set; }
    private EmployeeModel Employee { get; set; }

    protected override void OnInitialized()
    {
        Employee = EmployeeRepository.GetEmployee(EmployeeId);
    }

    private void OnSaveClicked()
    {
        EmployeeRepository.UpdateEmployee(Employee);
    }
}
tf7tbtn2

tf7tbtn21#

原因相对简单。当你从数据源获取数据时,你会将它作为一个类--一个引用对象来获取。你将那个引用传递到你的编辑器中,然后编辑引用所指向的对象。列表指向同一个对象,从而显示编辑过的值。当你从数据存储区刷新时,你会再次得到原始值。
如何修复它取决于您的数据管道设计。我可以提供一个(冗长的)答案,但首先我想看看EmployeeRepository是什么样子的,以了解它如何与您的数据存储(可能是EF)交互。

相关问题