Loading

How to cancel bind-data in a Modalform

How to cancel bind-data in a Modalform

Bjorn Even Olafsen

7y808.NET

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
Skjemaoversikt
class="container">
class="row">
class="col-xs-3">
"button"
class="btn btn-primary"
data-toggle="modal"
data-target="#AddEditSkjemaModal"
@onclick="@AddSkjema">
class="oi oi-plus">
Add Skjema

@if (skjemaList == null)

{

Loading...

}

else if (!skjemaList.Any())

{

Det eksister ingen skjemadefinisjoner - Legg til en....

}

else

{

class="table">

Navn

Beskrivelse

Status

Gyldig til dato

Max ant deltagere

Velg skjema

Aktiver/DeAktiver

Rediger

Slette

@foreach (var form in skjemaList)

{

@form.Name

@form.Description

@form.Status

@form.ValidToDate.ToShortDateString()

@form.MaxNoOfParticipants.ToString()

"button"

@onclick="@(async (e) => await ChooseSkjema(form.SkjemaId))">

class="oi oi-pin close">

@if (form.Status == StatusActive.Inactive)

{

"button"

@onclick="@(async (e) => await Aktivate(form.SkjemaId))">

class="oi oi-signal">

}

else

{

"button"

@onclick="@(async (e) => await Deaktivate(form.SkjemaId))">

class="oi oi-signal">

}

"button"

data-toggle="modal"

data-target="#AddEditSkjemaModal"

@onclick="@(async (e) => await EditSkjema(form.SkjemaId))">

class="oi oi-pencil">

"button"

@onclick="@(async (e) => await RemoveSkjema(form.SkjemaId))">

class="oi oi-trash">

}

}

@if (showModal)

{

class="modal" style="display:block" role="dialog" id="AddEditSkjemaModal">

class="modal-dialog">

class="modal-content">

class="modal-header">

class="modal-title">@modalTitle

"button"

class="close"

data-dismiss="modal"

@onclick="@CancelInput">

"true"

>X

class="modal-body">

class="form-group">

class="control-label">Name

class="form-control"

type="text"

@bind="@skjema.Name" />

class="form-group">

class="control-label">Description

class="form-control"

type="text"

@bind="@skjema.Description" />

class="form-group">

class="control-label">Gyldig til dato

class="form-control"

type="date"

@bind="@skjema.ValidToDate"

@bind:format="yyyy-MM-dd" />

class="form-group">

class="control-label">Max ant deltagere

class="form-control"

type="number"

@bind="@skjema.MaxNoOfParticipants" />

class="modal-footer">

@if (@modalType == ModalType.Add)

{

"submit"

class="btn btn-success"

@onclick="@(async () => await Add())"

data-dismiss="modal">

Add

}

@if (@modalType == ModalType.Edit)

{

"submit"

class="btn btn-success"

@onclick="@(async () => await Edit())"

data-dismiss="modal">

Save

}

@if (@modalType == ModalType.Delete)

{

"submit"

class="btn btn-success"

@onclick="@(async () => await Delete())"

data-dismiss="modal">

Delete

}

"submit"

class="btn btn-warning"

@onclick="@CancelInput"

data-dismiss="modal">

Cancel

}

@code {

private string modalTitle { get; set; } = "";

private bool showModal { get; set; } = false;

private ModalType modalType { get; set; }

protected List 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");

}

}

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Bjorn Even Olafsen7y ago
I forgot to say that this is programmed in Blazor