Blazor - 编辑时不保存预设输入值

Question

我对 Blazor 还很陌生。我有两个 EditForms。一种是新的记录输入表。这工作正常。另一个是编辑表单，我想从数据库中读取值（我做得很好），然后显示带有这些值的表单 - 这很有效 - 并允许用户编辑值。我遇到的问题是，当编辑值时，切换到下一个字段，值被重置为原始值。我在这个用例的任何文档中都找不到任何内容。

在进入表格之前，我称之为：

@{
    selectedPatient.readPatient(sharedVariables.editPatientId);
}

对象 selectedPatient 是我在 EditForm 中使用的模型。这会从数据库中读取匹配的患者记录。

<EditForm Model="@selectedPatient" OnValidSubmit="@HandleValidSubmit">

在表单中，我像这样使用@bind-value：

<label>
        Patient phone number:
 </label>
 <InputText @bind-Value="selectedPatient.phone" id="phone" @onchange="changedPatient"/>

有许多字段。当用户键入一个新值，然后跳到下一个字段时，旧值会重新出现。 onchange 没有被识别为正在发生的变化。

我尝试了很多组合方式，但似乎无法克服这一点。非常感谢任何帮助。

更多代码（为简洁起见，未包括所有输入变量）：

using System;
using System.ComponentModel.DataAnnotations;
using System.Data.SqlClient;


namespace mwhmockserviceui.Data
{
    public class validPatient
    {
        [Required]
        [StringLength(20, ErrorMessage = "Patient ID too long (20 character limit).")]
        public string patientID {get; set;}

       // Look into data validation capabilities more for other fields
       public patientNameObject patientName {get; set;}
       [Required]
       [StringLength(10, ErrorMessage = "DOB too long (10 character limit).")]
       public string dob {get; set;}
       public string phone {get;set;}
       public string kciPatientAccountNumber {get; set;}
       public string ron {get; set;}
       public string emergencyContactName {get; set;}
       public string emergencyContactPhone {get; set;}
       public string payorRestriction {get; set;}
       public string insuranceChangedFlag {get; set;}
       public string ionProgressFlag {get; set;}

       public addressObject[] addresses {get; set;}
       public string connectionString {get;set;}

       public validPatient()
       {
           patientID="";
           patientName = new patientNameObject();
           dob="";
           phone="";
           kciPatientAccountNumber="";
           ron="";
           emergencyContactName="";
           emergencyContactPhone="";
           payorRestriction="";
           insuranceChangedFlag="";
           ionProgressFlag="";
           // addresses goes here - need to create an array of the two address types.
           addresses = new addressObject[2];
           setAddresses();
           connectionString = "Server=tcp:blahblahblah..."
       }
}

@page "/EditPatient"

@using mwhmockserviceui.Data
@inject NavigationManager NavManager
@inject sharedVariables sharedVariables

<h1>Edit Mock KCI Patient</h1>

<h3>Patient ID: @sharedVariables.editPatientId</h3>
<h3> Error message: @sharedVariables.errorMessageText</h3>

@{
    selectedPatient.readPatient(sharedVariables.editPatientId);
}

<EditForm Model="@selectedPatient" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

<p>
    <label>
        Patient first name:
        <InputText @bind-Value="selectedPatient.patientName.firstName" />
    </label>
    &nbsp
    <label>
        Middle name:
        <InputText @bind-Value="selectedPatient.patientName.middleName" />
    </label>
    &nbsp
    <label>
        Last name:
        <InputText @bind-Value="selectedPatient.patientName.lastName" />
    </label>
</p>
<button class="btn btn-primary" type="submit">Submit</button>
&nbsp &nbsp &nbsp &nbsp
<button class="btn btn-primary" @onclick="CancelPatientInput">Cancel</button>

</EditForm>


@code {
    private validPatient selectedPatient = new validPatient();

    private void changedPatient()
    {
        sharedVariables.errorMessageText="changed patient";
        NavManager.NavigateTo("/Patients");
    }
    private void HandleValidSubmit()
    {
        // Add code to save the input data
        sharedVariables.errorMessageText = selectedPatient.savePatient(sharedVariables.editPatientId);
        NavManager.NavigateTo("/Patients");
    }

    private  void CancelPatientInput()
    {
        NavManager.NavigateTo("/Patients");
    }

    private void updatePatient()
    {
        sharedVariables.errorMessageText="Update Patient";
    }
}

Answer 1

试试：

@bind-value="@selectedPatient.phone"

注意引号中添加的 @ 以启用双向绑定，这会将输入元素的更改反馈给变量。