title: Blazor Reset Model to Initial State when Click on Cancel (Reset Button) in Editform
body: <p>I have a crud operation using Blazor Server Side and Editform.  Everything works great except for when I try to reset the form after editing an existing record.</p>
  
  <p>When I change something in a form control and then click the reset button, it closes the form.  The data that I change is updated to the HTML table, but it's not updated in the database.</p>
  
  <p>Is there anyway I can prevent this?</p>
  
  <p>Here is my model:</p>
  
  <pre><code>public class Address  
  {
      public string province { get; set; }
      public string address { get; set; }
      public string contact_name { get; set; }
      public string phone_number { get; set; }
  }
  </code></pre>
  
  <p>This is my EditForm:</p>
  
  <pre><code>&lt;EditForm Model="@model" OnValidSubmit="@HandleValidSubmit"&gt;
      &lt;DataAnnotationsValidator /&gt;
      &lt;ValidationSummary /&gt;
      &lt;div class="form-group"&gt;
          &lt;InputText @bind-Value="@model.province" /&gt;
      &lt;/div&gt; 
      &lt;div class="form-group"&gt;
          &lt;InputText @bind-Value="@model.contact_name" /&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;InputText @bind-Value="@model.phone_number" /&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;InputText @bind-Value="@model.address" /&gt;
      &lt;/div&gt;
      &lt;button type="submit" class="btn btn-primary"&gt;Save&lt;/button&gt;
      &lt;button type="reset" class="btn btn-warning"&gt;Cancel&lt;/button&gt;
  &lt;/EditForm&gt;
  </code></pre>
  
  <p>Here is my HTML Table:</p>
  
  <pre><code>@if (address_list== null)
  {
      &lt;p&gt;Loading&lt;/p&gt;
  }
  else
  {
      &lt;table class="table table-striped text-center"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th scope="col" class="text-center"&gt;Province&lt;/th&gt;
                  &lt;th scope="col" class="text-center"&gt;Contact Name&lt;/th&gt;
                  &lt;th scope="col" class="text-center"&gt;Phone&lt;/th&gt;
                  &lt;th scope="col" class="text-center"&gt;Address&lt;/th&gt;
                  &lt;th scope="col" class="text-center"&gt;Edit&lt;/th&gt;
                  &lt;th scope="col" class="text-center"&gt;Delete&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              @foreach (var d in  address_list)
              {
                  &lt;tr&gt;
                      &lt;td&gt;@d.province&lt;/td&gt;
                      &lt;td&gt;@d.contact_person&lt;/td&gt;
                      &lt;td&gt;@d.phone_number&lt;/td&gt;
                      &lt;td&gt;@d.address&lt;/td&gt;
                      &lt;td&gt;&lt;button type="button" class="btn btn-link" @onclick="@(() =&gt; Edit(d))"&gt;Edit&lt;/button&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;button type="button" class="btn btn-link" @onclick="@(() =&gt; Delete(d))"&gt;Delete&lt;/button&gt;&lt;/td&gt;  
                  &lt;/tr&gt;
              }
          &lt;/tbody&gt;
      &lt;/table&gt;
  }
  </code></pre>