I created a component for a dual list box. Everything is fine but when I submit I get an error.
<EditForm Model="Model.Report" class="kt-form" OnValidSubmit="Model.OnSearch"><div class="modal-header"><h5 class="modal-title" id="exampleModalLabel">Edit Columns</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"></button></div><div class="modal-body"><div class="row"><div class="col-md-12"><Project.Components.DualListbox ReportColumns="Model.Report.ReportColumns" Id="ReportColumns" @bind-Value="@Model.Report.ReportColumns"></Project.Components.DualListbox></div></div></div><div class="modal-footer"><button type="button" class="btn btn-secondary btn-sm" @onclick="Model.OnCloseModal"><i class="la la-close"></i> Close</button><button type="submit" class="btn btn-primary btn-sm"><i class="la la-exchange"></i> Change</button></div></EditForm>DualListbox Razor code:
@typeparam TValue@inherits InputBase<TValue>@if (ReportColumns != null){<select id="@Id" class="kt-dual-listbox" multiple> @foreach (var column in ReportColumns.OrderBy(c => c.Sort)) { if (column.IsChecked == 1) {<option value="@column.Id" selected>@column.Title</option> } else {<option value="@column.Id">@column.Title</option> } }</select>}*DualListbox code-behind *:
using Project.Models;using Microsoft.AspNetCore.Components;using Microsoft.AspNetCore.Components.Forms;using Microsoft.JSInterop;using System;using System.Collections.Generic;using System.Globalization;using System.Linq;using System.Threading.Tasks;namespace Project.Components{ public partial class DualListbox<TValue> : InputBase<TValue> { [Parameter] public string Id { get; set; } [Inject] IJSRuntime JSRuntime { get; set; } [Parameter] public ICollection<ReportColumn> ReportColumns { get; set; } public DotNetObjectReference<DualListbox<TValue>> DotNetRef; [Parameter] public EventCallback<object> OnChanged { get; set; } protected override bool TryParseValueFromString(string value, out TValue result, out string validationErrorMessage) { try { if (value == "null") { value = null; } if (typeof(TValue) == typeof(string)) { result = (TValue)(object)value; validationErrorMessage = null; return true; } else if (typeof(TValue) == typeof(int) || typeof(TValue) == typeof(int?)) { int.TryParse(value, NumberStyles.Integer, CultureInfo.InvariantCulture, out var parsedValue); result = (TValue)(object)parsedValue; validationErrorMessage = null; return true; } throw new InvalidOperationException($"{GetType()} does not support the type '{typeof(TValue)}'."); } catch (Exception ex) { throw ex; } } protected override void OnInitialized() { base.OnInitialized(); DotNetRef = DotNetObjectReference.Create(this); } protected override async Task OnAfterRenderAsync(bool firstRender) { await base.OnAfterRenderAsync(firstRender); if (firstRender) { await JSRuntime.InvokeVoidAsync("dualListboxComponent.init", Id, DotNetRef, "Change_SelectWithFilterBase"); } } [JSInvokable("Change_SelectWithFilterBase")] public void Change(string value) { try { if (value == "null") { value = null; } var array = value.Split("#"); if (array[0] == "add") { int _value = int.Parse(array[1]); var report = ReportColumns.Where(c => c.Id == _value).FirstOrDefault(); report.IsChecked = 1; } else { int _value = int.Parse(array[1]); var report = ReportColumns.Where(c => c.Id == _value).FirstOrDefault(); report.IsChecked = 0; } } catch (Exception ex) { throw ex; } if (OnChanged.HasDelegate) OnChanged.InvokeAsync(value); } }}[2020-02-12T07:42:28.867Z] Error: There was an error applying batch 7.e.log @ blazor.server.js:15 blazor.server.js:8 Uncaught (in promise)
TypeError: Cannot read property 'insertBefore' of nullat Object.s [as insertLogicalChild] (blazor.server.js:8)at e.insertText (blazor.server.js:8)at e.insertFrame (blazor.server.js:8)at e.applyEdits (blazor.server.js:8)at e.updateComponent (blazor.server.js:8)at Object.t.renderBatch (blazor.server.js:1)at e. (blazor.server.js:15)at blazor.server.js:15at Object.next (blazor.server.js:15)at blazor.server.js:15 blazor.server.js:15 [2020-02-12T07:42:28.926Z] Error: System.AggregateException: One ormore errors occurred. (TypeError: Cannot read property 'insertBefore'of null) ---> System.InvalidOperationException: TypeError: Cannotread property 'insertBefore' of null atMicrosoft.AspNetCore.Components.RenderTree.Renderer.InvokeRenderCompletedCallsAfterUpdateDisplayTask(TaskupdateDisplayTask, Int32[] updatedComponents) --- End of innerexception stack trace ---