Blazor проблема рендеринга данных, возвращаемых из Web Api - PullRequest
Новая
       26

Blazor проблема рендеринга данных, возвращаемых из Web Api

2 голосов
/ 24 мая 2019

Я надеюсь, что кто-то может подсказать, как я могу выяснить, где находится эта основная проблема. Я думаю это сериализация / десериализация не сетка.

Я пытаюсь отобразить данные, возвращенные из ASP.NET Web Api, с помощью компонента Syncfusion Blazor Grid. 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")))));
    }
}

Это также частично работает (переменные rawContent, segments и oneTextString DO визуализируются, если строка jlfDoc = jd; закомментирована и DataSource="@jlfDoc.Segments" удалено, что говорит об успешном вызове Api и десериализации jd. 

<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;
    }
}

Сбой при изменении двух строк 

====> 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
    }
}

Ошибка в консоли инструментов браузера: 

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

1 Ответ

0 голосов
/ 28 мая 2019

Мы подозреваем, что вы пытаетесь использовать ссылку на объект, который не инициализирован («jlfDoc» может быть нулевым). Поэтому мы предлагаем вам добавить условие, чтобы проверить, является ли объект нулевым, прежде чем обращаться к его свойству, чтобы решить эту проблему, как упомянуто @HenkHolterman в разделе комментариев.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...