那些遇到过的问题

Blazor 呈现从 Web Api 返回的数据时出现问题

phi*_*hil 5 syncfusion blazor

我希望有人能建议我如何找出这个根本问题所在。我认为这是序列化/反序列化而不是网格。

我正在尝试使用 Syncfusion Blazor 网格组件渲染从 ASP.NET Web Api 返回的数据。JliffDocument 来自开源库。也许对象是由复合类型构成的事实是一个促成因素，但我可以在单元测试中成功序列化和反序列化对象图。例如，TextElement实现一个接口并Segment存储该接口的集合。

这有效（但是jlfDoc本地创建的数据）

<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")))));
    }
}
Run Code Online (Sandbox Code Playgroud)

这也部分有效（如果该行被注释掉并被删除rawContent，则 ,segments和oneTextString变量会渲染，这表明 Api 调用和 jd 的反序列化成功。jlfDoc = jd;DataSource="@jlfDoc.Segments"

<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;
    }
}
Run Code Online (Sandbox Code Playgroud)

这两行更改失败

====> 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
    }
}
Run Code Online (Sandbox Code Playgroud)

浏览器工具控制台的错误是：

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
Run Code Online (Sandbox Code Playgroud)

小智 1

我们怀疑您正在尝试使用未初始化的对象的引用（\xe2\x80\x9cjlfDoc\xe2\x80\x9d 可能为 null）。因此，我们建议您在访问对象的属性之前添加条件来检查对象是否为 null，以解决 @HenkHolterman 在评论部分中提到的此问题。

\n

归档时间：

查看次数：

13011 次

最近记录：

4 年，5 月 前
相关归档
Blazor WASM 项目中的未绑定断点 11
Set-Cookie 中的 Cookie 被浏览器忽略 9
我们可以在常规非 Blazor HTML 页面中将 Blazor 组件用作 Web 组件吗？ 7
如何创建模块化Blazor Web App 6
有没有办法让文件流下载到 Blazor 中的浏览器？ 5
Blazor WebAssembly - 用户帐户和身份服务器的最佳实践 5
使用 JSInterop 将对象传递给 JavaScript 会产生空对象 4
调整客户端 Blazor 页面大小时会触发什么事件处理程序？ 4
Asp.Net托管Blazor + Azure AD身份验证 3
JsonSerializer.Deserialize 不填充对象内的列表 2
难疑归档
在'for'循环中访问索引？ 3312
什么是三法则？ 2067
如何从Bash脚本检查程序是否存在？ 2032
获取屏幕大小,当前网页和浏览器窗口 1927
match_parent和fill_parent有什么区别？ 1371
在视图控制器之间传递数据 1340
什么是按位移位(位移)运算符以及它们如何工作？ 1340
如何在正则表达式中使用变量？ 1250
按属性排序自定义对象的ArrayList 1093
错误消息"未找到与约束合同名称匹配的导出" 1057