How to cancel bind-data in a Modalform

Jul 13 2019 11:13 AM
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
  1. @page "/forms"  
  2. @using WebZenter.DynamicForms.Data  
  3. @using WebZenter.DynamicForms.Repository  
  4. @using WebZenter.DynamicForms.Models  
  5. @using WebZenter.DynamicForms.ViewModel  
  6. @using System.Threading;  
  7. @inject WeatherForecastService ForecastService  
  8. @inject ISkjemaRepository skjemaRepository  
  9. <h1>Skjemaoversikt</h1>  
  10. <div class="container">  
  11. <div class="row">  
  12. <div class="col-xs-3">  
  13. <button type="button"  
  14. class="btn btn-primary"  
  15. data-toggle="modal"  
  16. data-target="#AddEditSkjemaModal"  
  17. @onclick="@AddSkjema">  
  18. <i class="oi oi-plus"></i>  
  19. Add Skjema  
  20. </button>  
  21. </div>  
  22. </div>  
  23. </div>  
  24. <br />  
  25. @if (skjemaList == null)  
  26. {  
  27. <p><em>Loading...</em></p>  
  28. }  
  29. else if (!skjemaList.Any())  
  30. {  
  31. <p><em>Det eksister ingen skjemadefinisjoner - Legg til en....</em></p>  
  32. }  
  33. else  
  34. {  
  35. <table class="table">  
  36. <thead>  
  37. <tr>  
  38. <th>Navn</th>  
  39. <th>Beskrivelse</th>  
  40. <th>Status</th>  
  41. <th>Gyldig til dato</th>  
  42. <th>Max ant deltagere</th>  
  43. <th>Velg skjema</th>  
  44. <th>Aktiver/DeAktiver</th>  
  45. <th>Rediger</th>  
  46. <th>Slette</th>  
  47. </tr>  
  48. </thead>  
  49. <tbody>  
  50. @foreach (var form in skjemaList)  
  51. {  
  52. <tr>  
  53. <td>@form.Name</td>  
  54. <td>@form.Description</td>  
  55. <td>@form.Status</td>  
  56. <td>@form.ValidToDate.ToShortDateString()</td>  
  57. <td>@form.MaxNoOfParticipants.ToString()</td>  
  58. <td><button type="button"  
  59. @onclick="@(async (e) => await ChooseSkjema(form.SkjemaId))">  
  60. <i class="oi oi-pin close"></i></button>  
  61. </td>  
  62. @if (form.Status == StatusActive.Inactive)  
  63. {  
  64. <td><button type="button"  
  65. @onclick="@(async (e) => await Aktivate(form.SkjemaId))">  
  66. <i class="oi oi-signal"></i>  
  67. </button>  
  68. </td>  
  69. }  
  70. else  
  71. {  
  72. <td><button type="button"  
  73. @onclick="@(async (e) => await Deaktivate(form.SkjemaId))">  
  74. <i class="oi oi-signal"></i></button>  
  75. </td>  
  76. }  
  77. <td>  
  78. <button type="button"  
  79. data-toggle="modal"  
  80. data-target="#AddEditSkjemaModal"  
  81. @onclick="@(async (e) => await EditSkjema(form.SkjemaId))">  
  82. <i class="oi oi-pencil"></i>  
  83. </button>  
  84. </td>  
  85. <td><button type="button"  
  86. @onclick="@(async (e) => await RemoveSkjema(form.SkjemaId))">  
  87. <i class="oi oi-trash"></i></button>  
  88. </td>  
  89. </tr>  
  90. }  
  91. </tbody>  
  92. </table>  
  93. }  
  94. @if (showModal)  
  95. {  
  96. <div class="modal" style="display:block" role="dialog" id="AddEditSkjemaModal">  
  97. <div class="modal-dialog">  
  98. <div class="modal-content">  
  99. <div class="modal-header">  
  100. <h3 class="modal-title">@modalTitle</h3>  
  101. <button type="button"  
  102. class="close"  
  103. data-dismiss="modal"  
  104. @onclick="@CancelInput">  
  105. <span aria-hidden="true">X</span>  
  106. </button>  
  107. </div>  
  108. <div class="modal-body">  
  109. <Form>  
  110. <div class="form-group">  
  111. <label class="control-label">Name</label>  
  112. <input class="form-control"  
  113. type="text"  
  114. @bind="@skjema.Name" />  
  115. </div>  
  116. <div class="form-group">  
  117. <label class="control-label">Description</label>  
  118. <input class="form-control"  
  119. type="text"  
  120. @bind="@skjema.Description" />  
  121. </div>  
  122. <div class="form-group">  
  123. <label class="control-label">Gyldig til dato</label>  
  124. <input class="form-control"  
  125. type="date"  
  126. @bind="@skjema.ValidToDate"  
  127. @bind:format="yyyy-MM-dd" />  
  128. </div>  
  129. <div class="form-group">  
  130. <label class="control-label">Max ant deltagere</label>  
  131. <input class="form-control"  
  132. type="number"  
  133. @bind="@skjema.MaxNoOfParticipants" />  
  134. </div>  
  135. </Form>  
  136. </div>  
  137. <div class="modal-footer">  
  138. @if (@modalType == ModalType.Add)  
  139. {  
  140. <button type="submit"  
  141. class="btn btn-success"  
  142. @onclick="@(async () => await Add())"  
  143. data-dismiss="modal">  
  144. Add  
  145. </button>  
  146. }  
  147. @if (@modalType == ModalType.Edit)  
  148. {  
  149. <button type="submit"  
  150. class="btn btn-success"  
  151. @onclick="@(async () => await Edit())"  
  152. data-dismiss="modal">  
  153. Save  
  154. </button>  
  155. }  
  156. @if (@modalType == ModalType.Delete)  
  157. {  
  158. <button type="submit"  
  159. class="btn btn-success"  
  160. @onclick="@(async () => await Delete())"  
  161. data-dismiss="modal">  
  162. Delete  
  163. </button>  
  164. }  
  165. <button type="submit"  
  166. class="btn btn-warning"  
  167. @onclick="@CancelInput"  
  168. data-dismiss="modal">  
  169. Cancel  
  170. </button>  
  171. </div>  
  172. </div>  
  173. </div>  
  174. </div>  
  175. }  
  176. @code {  
  177. private string modalTitle { getset; } = "";  
  178. private bool showModal { getset; } = false;  
  179. private ModalType modalType { getset; }  
  180. protected List<Skjema> skjemaList;  
  181. protected Skjema skjema = new Skjema();  
  182. protected Skjema skjema2;  
  183. private string functionToRun = string.Empty;  
  184. private string disabled = "";  
  185. protected override async Task OnInitAsync()  
  186. {  
  187. await ReadSkjemaLister();  
  188. }  
  189. private void AddSkjema()  
  190. {  
  191. skjema = new Skjema();  
  192. skjema.SkjemaId = Guid.NewGuid();  
  193. skjema.Status = StatusActive.Inactive;  
  194. skjema.UserId = "1";  
  195. skjema.Name = "test name";  
  196. skjema.Description = "test";  
  197. modalTitle = "Opprett nytt skjema";  
  198. showModal = true;  
  199. modalType = ModalType.Add;  
  200. //SetFunctionToRun();  
  201. }  
  202. private async Task ChooseSkjema(Guid id)  
  203. {  
  204. await skjemaRepository.Delete(id);  
  205. }  
  206. private async Task EditSkjema(Guid id)  
  207. {  
  208. skjema = await skjemaRepository.Get(id);  
  209. modalTitle = "Redigere skjema";  
  210. showModal = true;  
  211. modalType = ModalType.Edit;  
  212. }  
  213. private async Task Aktivate(Guid id)  
  214. {  
  215. skjema = await skjemaRepository.Get(id);  
  216. skjema.Status = StatusActive.Active;  
  217. await Edit();  
  218. }  
  219. private async Task Deaktivate(Guid id)  
  220. {  
  221. skjema = await skjemaRepository.Get(id);  
  222. skjema.Status = StatusActive.Inactive;  
  223. await Edit();  
  224. }  
  225. private async Task RemoveSkjema(Guid id)  
  226. {  
  227. modalTitle = "Slette skjema";  
  228. skjema = await skjemaRepository.Get(id);  
  229. showModal = true;  
  230. modalType = ModalType.Delete;  
  231. }  
  232. private async Task Save()  
  233. {  
  234. await skjemaRepository.Save();  
  235. await CloseModal();  
  236. }  
  237. private async Task Add()  
  238. {  
  239. await skjemaRepository.Add(skjema);  
  240. await CloseModal();  
  241. await ReadSkjemaLister();  
  242. //StateHasChanged();  
  243. }  
  244. private async Task Edit()  
  245. {  
  246. await skjemaRepository.Edit(skjema);  
  247. await CloseModal();  
  248. await ReadSkjemaLister();  
  249. //StateHasChanged();  
  250. }  
  251. private async Task Delete()  
  252. {  
  253. await skjemaRepository.Delete(skjema.SkjemaId);  
  254. await CloseModal();  
  255. await ReadSkjemaLister();  
  256. }  
  257. private async Task CancelInput()  
  258. {  
  259. //StateHasChanged();  
  260. await CloseModal();  
  261. }  
  262. private async Task CloseModal()  
  263. {  
  264. await ReadSkjemaLister();  
  265. showModal = false;  
  266. }  
  267. public async Task ReadSkjemaLister()  
  268. {  
  269. skjemaList = await skjemaRepository.GetAll("1");  
  270. }  


Brought to you by:

Answers (1)