How to cancel bind-data in a Modalform

Question

I have a modaldialog where I do add,edit and delete operations. The problem I have are when I start editing and then before saving the work - I press the Cancel button. The database is not updated and that is good, but the DOM? is updated.

 

So my question are - how can I cancel the updating of the DOM?.

 

The datalist before I start

 

 

 

The modal/popup window before I start edit

 

 

 

I change the Name field

 

 

 

Then I press CANCEL button - and as you can see - the Name is changed

 

 

 

When I refresh the page - the changed value is back to original value.

 

 

 

My code look like this

@page "/forms"
@using WebZenter.DynamicForms.Data
@using WebZenter.DynamicForms.Repository
@using WebZenter.DynamicForms.Models
@using WebZenter.DynamicForms.ViewModel
@using System.Threading;
@inject WeatherForecastService ForecastService
@inject ISkjemaRepository skjemaRepository
<h1>Skjemaoversikt</h1>
<div class="container">
<div class="row">
<div class="col-xs-3">
<button type="button"
class="btn btn-primary"
data-toggle="modal"
data-target="#AddEditSkjemaModal"
@onclick="@AddSkjema">
<i class="oi oi-plus"></i>
Add Skjema
</button>
</div>
</div>
</div>
<br />
@if (skjemaList == null)
{
<p><em>Loading...</em></p>
}
else if (!skjemaList.Any())
{
<p><em>Det eksister ingen skjemadefinisjoner - Legg til en....</em></p>
}
else
{
<table class="table">
<thead>
<tr>
<th>Navn</th>
<th>Beskrivelse</th>
<th>Status</th>
<th>Gyldig til dato</th>
<th>Max ant deltagere</th>
<th>Velg skjema</th>
<th>Aktiver/DeAktiver</th>
<th>Rediger</th>
<th>Slette</th>
</tr>
</thead>
<tbody>
@foreach (var form in skjemaList)
{
<tr>
<td>@form.Name</td>
<td>@form.Description</td>
<td>@form.Status</td>
<td>@form.ValidToDate.ToShortDateString()</td>
<td>@form.MaxNoOfParticipants.ToString()</td>
<td><button type="button"
@onclick="@(async (e) => await ChooseSkjema(form.SkjemaId))">
<i class="oi oi-pin close"></i></button>
</td>
@if (form.Status == StatusActive.Inactive)
{
<td><button type="button"
@onclick="@(async (e) => await Aktivate(form.SkjemaId))">
<i class="oi oi-signal"></i>
</button>
</td>
}
else
{
<td><button type="button"
@onclick="@(async (e) => await Deaktivate(form.SkjemaId))">
<i class="oi oi-signal"></i></button>
</td>
}
<td>
<button type="button"
data-toggle="modal"
data-target="#AddEditSkjemaModal"
@onclick="@(async (e) => await EditSkjema(form.SkjemaId))">
<i class="oi oi-pencil"></i>
</button>
</td>
<td><button type="button"
@onclick="@(async (e) => await RemoveSkjema(form.SkjemaId))">
<i class="oi oi-trash"></i></button>
</td>
</tr>
}
</tbody>
</table>
}
@if (showModal)
{
<div class="modal" style="display:block" role="dialog" id="AddEditSkjemaModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">@modalTitle</h3>
<button type="button"
class="close"
data-dismiss="modal"
@onclick="@CancelInput">
<span aria-hidden="true">X</span>
</button>
</div>
<div class="modal-body">
<Form>
<div class="form-group">
<label class="control-label">Name</label>
<input class="form-control"
type="text"
@bind="@skjema.Name" />
</div>
<div class="form-group">
<label class="control-label">Description</label>
<input class="form-control"
type="text"
@bind="@skjema.Description" />
</div>
<div class="form-group">
<label class="control-label">Gyldig til dato</label>
<input class="form-control"
type="date"
@bind="@skjema.ValidToDate"
@bind:format="yyyy-MM-dd" />
</div>
<div class="form-group">
<label class="control-label">Max ant deltagere</label>
<input class="form-control"
type="number"
@bind="@skjema.MaxNoOfParticipants" />
</div>
</Form>
</div>
<div class="modal-footer">
@if (@modalType == ModalType.Add)
{
<button type="submit"
class="btn btn-success"
@onclick="@(async () => await Add())"
data-dismiss="modal">
Add
</button>
}
@if (@modalType == ModalType.Edit)
{
<button type="submit"
class="btn btn-success"
@onclick="@(async () => await Edit())"
data-dismiss="modal">
Save
</button>
}
@if (@modalType == ModalType.Delete)
{
<button type="submit"
class="btn btn-success"
@onclick="@(async () => await Delete())"
data-dismiss="modal">
Delete
</button>
}
<button type="submit"
class="btn btn-warning"
@onclick="@CancelInput"
data-dismiss="modal">
Cancel
</button>
</div>
</div>
</div>
</div>
}
@code {
private string modalTitle { get; set; } = "";
private bool showModal { get; set; } = false;
private ModalType modalType { get; set; }
protected List<Skjema> skjemaList;
protected Skjema skjema = new Skjema();
protected Skjema skjema2;
private string functionToRun = string.Empty;
private string disabled = "";
protected override async Task OnInitAsync()
{
await ReadSkjemaLister();
}
private void AddSkjema()
{
skjema = new Skjema();
skjema.SkjemaId = Guid.NewGuid();
skjema.Status = StatusActive.Inactive;
skjema.UserId = "1";
skjema.Name = "test name";
skjema.Description = "test";
modalTitle = "Opprett nytt skjema";
showModal = true;
modalType = ModalType.Add;
//SetFunctionToRun();
}
private async Task ChooseSkjema(Guid id)
{
await skjemaRepository.Delete(id);
}
private async Task EditSkjema(Guid id)
{
skjema = await skjemaRepository.Get(id);
modalTitle = "Redigere skjema";
showModal = true;
modalType = ModalType.Edit;
}
private async Task Aktivate(Guid id)
{
skjema = await skjemaRepository.Get(id);
skjema.Status = StatusActive.Active;
await Edit();
}
private async Task Deaktivate(Guid id)
{
skjema = await skjemaRepository.Get(id);
skjema.Status = StatusActive.Inactive;
await Edit();
}
private async Task RemoveSkjema(Guid id)
{
modalTitle = "Slette skjema";
skjema = await skjemaRepository.Get(id);
showModal = true;
modalType = ModalType.Delete;
}
private async Task Save()
{
await skjemaRepository.Save();
await CloseModal();
}
private async Task Add()
{
await skjemaRepository.Add(skjema);
await CloseModal();
await ReadSkjemaLister();
//StateHasChanged();
}
private async Task Edit()
{
await skjemaRepository.Edit(skjema);
await CloseModal();
await ReadSkjemaLister();
//StateHasChanged();
}
private async Task Delete()
{
await skjemaRepository.Delete(skjema.SkjemaId);
await CloseModal();
await ReadSkjemaLister();
}
private async Task CancelInput()
{
//StateHasChanged();
await CloseModal();
}
private async Task CloseModal()
{
await ReadSkjemaLister();
showModal = false;
}
public async Task ReadSkjemaLister()
{
skjemaList = await skjemaRepository.GetAll("1");
}
}