Blazor - pre-set input values are not saving when edited

Question

I'm fairly new to Blazor. I have two EditForms. One is a new record input form. This works fine. The other is an edit form, where I want to read the values from the DB (which I'm doing fine), then display the form with those values - which works - and allow the user to edit the values. The problem I'm running into is that when the values are edited, tabbing to the next field, the value is reset to the original. I can't find anything in any documentation with this use case.

Before going into the form I call this:

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

The object selectedPatient is the model I'm using in the EditForm. This reads from the database the matching patient record.

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

Inside the form, I use @bind-value like this:

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

There are a number of fields. When the user types a new value, then tabs to the next field, the old value reappears. onchange is not being recognized as a change happening.

I've tried a lot of combination of things and cannot seem to get past this. Any help is much appreciated.

More code (did not include all input variables for brevity):

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";
    }
}

Neil W Neil W · Accepted Answer · 2020-12-18T01:22:42

Try:

@bind-value="@selectedPatient.phone"

Note the addition @ within the quotes to enable two-way binding which makes changes to the input element feed back to the variable.

Blazor - pre-set input values are not saving when edited

1 Answers