Blazor problem rendering data returned from Web Api - syncfusion

Question

I'm hoping someone can suggest how I might figure out where this underlying problem is. I think it's serialization/deserialization not the grid.
I am trying to render data returned from an ASP.NET Web Api using a Syncfusion Blazor Grid Component. The JliffDocument is from an open source library. Perhaps the fact that the object is made from composite types is a contributory factor but I can successfully serialize and deserialize the object graph within a unit test. E.g. TextElement implements an interface and Segment stores collections of that interface.
This Works (but the jlfDoc is locally created data)
<EjsGrid id="Grid" DataSource="#jlfDoc.Segments" Toolbar="#(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" AllowPaging="true">
<GridPageSettings PageSize="5"></GridPageSettings>
<GridEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true"></GridEditSettings>
<GridColumns>
<GridColumn Field="SourceText" HeaderText="Source" IsPrimaryKey="true" TextAlign="#Syncfusion.EJ2.RazorComponents.Grids.TextAlign.Right" Width="120"></GridColumn>
<GridColumn Field="TargetText" HeaderText="Target" Width="150"></GridColumn>
</GridColumns>
</EjsGrid>
<hr/>
<p>#rawContent</p>
<h1>There are #segments Segments</h1>
<i>#oneTextString</i>
#functions {
public object gridData { get; set; }
public JliffDocument jlfDoc { get; set; }
public string rawContent { get; set; }
public int segments { get; set; }
public string oneTextString { get; set; }
protected override async Task OnInitAsync()
{
jlfDoc = new JliffDocument("en-US",
"it-IT",
new File("f1",
new Unit("u1",
new Segment(
new TextElement("Hello"),
new TextElement("Ciao")),
new Segment(
new TextElement("Goodnight"),
new TextElement("Buonanotte")))));
}
}
This also partially-works (The rawContent, segments and oneTextString variables DO render if the line jlfDoc = jd; is commented out and DataSource="#jlfDoc.Segments" is removed which suggests that the Api call and de-serialization of jd is successful.
<EjsGrid id="Grid" DataSource="#gridData" Toolbar="#(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" AllowPaging="true">
<GridPageSettings PageSize="5"></GridPageSettings>
<GridEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true"></GridEditSettings>
<GridColumns>
<GridColumn Field="SourceText" HeaderText="Source" IsPrimaryKey="true" TextAlign="#Syncfusion.EJ2.RazorComponents.Grids.TextAlign.Right" Width="120"></GridColumn>
<GridColumn Field="TargetText" HeaderText="Target" Width="150"></GridColumn>
</GridColumns>
</EjsGrid>
<hr/>
<p>#rawContent</p>
<h1>There are #segments Segments</h1>
<i>#oneTextString</i>
#functions {
public object gridData { get; set; }
public JliffDocument jlfDoc { get; set; }
public string rawContent { get; set; }
public int segments { get; set; }
public string oneTextString { get; set; }
protected override async Task OnInitAsync()
{
string serverDoc = String.Empty;
using (HttpClient client = new HttpClient())
{
serverDoc = await client.GetStringAsync("https://localhost:44381/api/document");
}
rawContent = serverDoc;
JliffDocument jd;
JSON.MakeInto(JSON.Load(serverDoc), out jd);
segments = jd.Segments.Count;
oneTextString = jd.Segments[0].TargetText;
//jlfDoc = jd;
}
}
This two line change fails
====> DataSource reinstated |
|
<EjsGrid id="Grid" DataSource="#jlfDoc.Segments" Toolbar="#(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" AllowPaging="true">
<GridPageSettings PageSize="5"></GridPageSettings>
<GridEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true"></GridEditSettings>
<GridColumns>
<GridColumn Field="SourceText" HeaderText="Source" IsPrimaryKey="true" TextAlign="#Syncfusion.EJ2.RazorComponents.Grids.TextAlign.Right" Width="120"></GridColumn>
<GridColumn Field="TargetText" HeaderText="Target" Width="150"></GridColumn>
</GridColumns>
</EjsGrid>
<hr/>
<p>#rawContent</p>
<h1>There are #segments Segments</h1>
<i>#oneTextString</i>
#functions {
public object gridData { get; set; }
public JliffDocument jlfDoc { get; set; }
public string rawContent { get; set; }
public int segments { get; set; }
public string oneTextString { get; set; }
protected override async Task OnInitAsync()
{
string serverDoc = String.Empty;
using (HttpClient client = new HttpClient())
{
serverDoc = await client.GetStringAsync("https://localhost:44381/api/document");
}
rawContent = serverDoc;
JliffDocument jd;
JSON.MakeInto(JSON.Load(serverDoc), out jd);
segments = jd.Segments.Count;
oneTextString = jd.Segments[0].TargetText;
jlfDoc = jd; <==== UNCOMMENTED
}
}
The error in browser tools console is:
WASM: Unhandled exception rendering component:
d.printErr # blazor.webassembly.js:1
blazor.webassembly.js:1 WASM: System.NullReferenceException: Object reference not set to an instance of an object.
d.printErr # blazor.webassembly.js:1
blazor.webassembly.js:1 WASM: at Blazorgrid.Pages.Index.BuildRenderTree (Microsoft.AspNetCore.Components.RenderTree.RenderTreeBuilder builder) [0x00035] in <1cc78bbb60324b879905902bf1175ac2>:0
d.printErr # blazor.webassembly.js:1
blazor.webassembly.js:1 WASM: at Microsoft.AspNetCore.Components.ComponentBase.<.ctor>b__5_0 (Microsoft.AspNetCore.Components.RenderTree.RenderTreeBuilder builder) <0x20a7d38 + 0x00020> in <13ab8f8dacb6489b93c9655168c56037>:0
d.printErr # blazor.webassembly.js:1
blazor.webassembly.js:1 WASM: at (wrapper delegate-invoke) <Module>.invoke_void_RenderTreeBuilder(Microsoft.AspNetCore.Components.RenderTree.RenderTreeBuilder)
d.printErr # blazor.webassembly.js:1
blazor.webassembly.js:1 WASM: at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch (Microsoft.AspNetCore.Components.Rendering.RenderBatchBuilder batchBuilder, Microsoft.AspNetCore.Components.RenderFragment renderFragment) <0x20a7190 + 0x00092> in <13ab8f8dacb6489b93c9655168c56037>:0
d.printErr # blazor.webassembly.js:1
blazor.webassembly.js:1 WASM: at Microsoft.AspNetCore.Components.Rendering.Renderer.RenderInExistingBatch (Microsoft.AspNetCore.Components.Rendering.RenderQueueEntry renderQueueEntry) <0x20a6e48 + 0x00036> in <13ab8f8dacb6489b93c9655168c56037>:0
d.printErr # blazor.webassembly.js:1
blazor.webassembly.js:1 WASM: at Microsoft.AspNetCore.Components.Rendering.Renderer.ProcessRenderQueue () <0x20a3eb8 + 0x00056> in <13ab8f8dacb6489b93c9655168c56037>:0
d.printErr # blazor.webassembly.js:1
blazor.webassembly.js:1 WASM: Unhandled exception rendering component:
d.printErr # blazor.webassembly.js:1
blazor.webassembly.js:1 WASM: Microsoft.JSInterop.JSException: No element is currently associated with component 6
d.printErr # blazor.webassembly.js:1
blazor.webassembly.js:1 WASM: Error: No element is currently associated with component 6
d.printErr # blazor.webassembly.js:1
blazor.webassembly.js:1 WASM: at e.updateComponent (http://localhost:53239/_framework/blazor.webassembly.js:1:13495)
d.printErr # blazor.webassembly.js:1
blazor.webassembly.js:1 WASM: at Object.t.renderBatch (http://localhost:53239/_framework/blazor.webassembly.js:1:1686)
d.printErr # blazor.webassembly.js:1
blazor.webassembly.js:1 WASM: at window.Blazor._internal.renderBatch (http://localhost:53239/_framework/blazor.webassembly.js:1:30422)
d.printErr # blazor.webassembly.js:1
blazor.webassembly.js:1 WASM: at _mono_wasm_invoke_js_unmarshalled (http://localhost:53239/_framework/wasm/mono.js:1:170240)
d.printErr # blazor.webassembly.js:1
blazor.webassembly.js:1 WASM: at wasm-function[3762]:35
d.printErr # blazor.webassembly.js:1
blazor.webassembly.js:1 WASM: at wasm-function[3770]:572
d.printErr # blazor.webassembly.js:1
blazor.webassembly.js:1 WASM: at wasm-function[3771]:211
d.printErr # blazor.webassembly.js:1
blazor.webassembly.js:1 WASM: at wasm-function[2977]:241
d.printErr # blazor.webassembly.js:1
blazor.webassembly.js:1 WASM: at wasm-function[601]:22615
d.printErr # blazor.webassembly.js:1
blazor.webassembly.js:1 WASM: at wasm-function[601]:21413
d.printErr # blazor.webassembly.js:1
blazor.webassembly.js:1 WASM: at Mono.WebAssembly.Interop.MonoWebAssemblyJSRuntime.InvokeUnmarshalled[T0,T1,T2,TRes] (System.String identifier, T0 arg0, T1 arg1, T2 arg2) <0x236bc00 + 0x00044> in <0544639430f948ad82c54a3effb7ea00>:0
d.printErr # blazor.webassembly.js:1
blazor.webassembly.js:1 WASM: at Mono.WebAssembly.Interop.MonoWebAssemblyJSRuntime.InvokeUnmarshalled[T0,T1,TRes] (System.String identifier, T0 arg0, T1 arg1) <0x236bb28 + 0x00016> in <0544639430f948ad82c54a3effb7ea00>:0
d.printErr # blazor.webassembly.js:1
blazor.webassembly.js:1 WASM: at Microsoft.AspNetCore.Blazor.Rendering.WebAssemblyRenderer.UpdateDisplayAsync (Microsoft.AspNetCore.Components.Rendering.RenderBatch& batch) <0x236ba30 + 0x0001e> in <91b564433c704544acd7894656c3aff9>:0
d.printErr # blazor.webassembly.js:1
blazor.webassembly.js:1 WASM: at Microsoft.AspNetCore.Components.Rendering.Renderer.ProcessRenderQueue () <0x20a3eb8 + 0x000be> in <13ab8f8dacb6489b93c9655168c56037>:0
d.printErr # blazor.webassembly.js:1
blazor.webassembly.js:1 WASM: Unhandled exception rendering component:
d.printErr # blazor.webassembly.js:1
blazor.webassembly.js:1 WASM: System.NullReferenceException: Object reference not set to an instance of an object.
d.printErr # blazor.webassembly.js:1
blazor.webassembly.js:1 WASM: at Microsoft.AspNetCore.Components.RenderTree.RenderTreeFrame..ctor (System.Int32 sequence, System.Type componentType, System.Int32 subtreeLength, Microsoft.AspNetCore.Components.Rendering.ComponentState componentState) <0x21001d8 + 0x0001c> in <13ab8f8dacb6489b93c9655168c56037>:0
d.printErr # blazor.webassembly.js:1
blazor.webassembly.js:1 WASM: at Microsoft.AspNetCore.Components.RenderTree.RenderTreeFrame.WithComponent (Microsoft.AspNetCore.Components.Rendering.ComponentState componentState) <0x2100178 + 0x0001c> in <13ab8f8dacb6489b93c9655168c56037>:0
d.printErr # blazor.webassembly.js:1
blazor.webassembly.js:1 WASM: at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.UpdateRetainedChildComponent (Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder+DiffContext& diffContext, System.Int32 oldComponentIndex, System.Int32 newComponentIndex) <0x24c9160 + 0x0004c> in <13ab8f8dacb6489b93c9655168c56037>:0
d.printErr # blazor.webassembly.js:1
blazor.webassembly.js:1 WASM: at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForFramesWithSameSequence (Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder+DiffContext& diffContext, System.Int32 oldFrameIndex, System.Int32 newFrameIndex) <0x24b9610 + 0x00368> in <13ab8f8dacb6489b93c9655168c56037>:0
d.printErr # blazor.webassembly.js:1
blazor.webassembly.js:1 WASM: at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForRange (Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder+DiffContext& diffContext, System.Int32 oldStartIndex, System.Int32 oldEndIndexExcl, System.Int32 newStartIndex, System.Int32 newEndIndexExcl) <0x20a9950 + 0x000ae> in <13ab8f8dacb6489b93c9655168c56037>:0
d.printErr # blazor.webassembly.js:1
blazor.webassembly.js:1 WASM: at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.ComputeDiff (Microsoft.AspNetCore.Components.Rendering.Renderer renderer, Microsoft.AspNetCore.Components.Rendering.RenderBatchBuilder batchBuilder, System.Int32 componentId, Microsoft.AspNetCore.Components.RenderTree.ArrayRange`1[T] oldTree, Microsoft.AspNetCore.Components.RenderTree.ArrayRange`1[T] newTree) <0x20a9558 + 0x0009e> in <13ab8f8dacb6489b93c9655168c56037>:0
d.printErr # blazor.webassembly.js:1
blazor.webassembly.js:1 WASM: at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch (Microsoft.AspNetCore.Components.Rendering.RenderBatchBuilder batchBuilder, Microsoft.AspNetCore.Components.RenderFragment renderFragment) <0x20a7190 + 0x0013a> in <13ab8f8dacb6489b93c9655168c56037>:0
d.printErr # blazor.webassembly.js:1
blazor.webassembly.js:1 WASM: at Microsoft.AspNetCore.Components.Rendering.Renderer.RenderInExistingBatch (Microsoft.AspNetCore.Components.Rendering.RenderQueueEntry renderQueueEntry) <0x20a6e48 + 0x00036> in <13ab8f8dacb6489b93c9655168c56037>:0
d.printErr # blazor.webassembly.js:1
blazor.webassembly.js:1 WASM: at Microsoft.AspNetCore.Components.Rendering.Renderer.ProcessRenderQueue () <0x20a3eb8 + 0x00056> in <13ab8f8dacb6489b93c9655168c56037>:0
d.printErr # blazor.webassembly.js:1

Answer 1

We suspect that you are trying to use a reference of an object that is not initialized (“jlfDoc” might be null). So we suggest you to add condition to check whether the object is null before accessing its property to resolve this issue as mentioned by #HenkHolterman in comment section.

Answer 2

Also if you forget to use [Parameter] attribute on a component property that you want to be accessed from outside of the component you may get the "No element is currently associated with component" error.