Blazor problem rendering data returned from Web Api

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

Provided you're using Blazor client side, why do you instantiate HttpClient in using block ? HttpClient is provided by the framework as a service, and you should inject it to your components. It is configured for use on SPA apps, including setting the base address. Why do you use url such as this: "https://localhost:44381/api/document". Try relative url. — enet, May 24 '19 at 10:17
On Blazor Server side, `using (httpClient = ...)` is just as [wrong](https://aspnetmonsters.com/2016/08/2016-08-27-httpclientwrong/). — H H, May 24 '19 at 12:28
You should probably look at the FetchData demo page and use the same approach: `@if(jlfDoc != null) { ... }` — H H, May 24 '19 at 12:31
@Issac, yes I'm aware of `IHttpClientFactory` but it wasn't central to my problem. I use typed http clients in most of my code these days. — phil, May 25 '19 at 11:11
@HenkHolterman, brilliant! I knew I was being blind-sided by something simple and obvious. I should have taken a step back from the code sooner. Please submit your null check comment as the answer and I'll mark it as such. — phil, May 25 '19 at 11:14

score 1 · Answer 1 · answered May 28 '19 at 14:56

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.

score 0 · Answer 2 · answered Nov 25 '20 at 08:43

0

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.

answered Nov 25 '20 at 08:43

nAviD

2,784
1
33
54

Blazor problem rendering data returned from Web Api

2 Answers2

Linked

Related