(入門者)BlazorとC#のListでオブジェクトの色々なソート機能を実現したい。

C#のBlazorでforeachを使用すると、
An unhandled exception occurred while processing the request.
NullReferenceException: Object reference not set to an instance of an object.
BlazorApp1.Pages.Article001.BuildRenderTree(RenderTreeBuilder __builder) in Article001.razor, line 20
この様なエラーメッセージが表示されてしまいます。

目的としましては、インスタンスに記入したオブジェクトを<ul><li>に自動で押込んでくれる様に（ここまでは出来ました）、
かつそれらを降順やランダムなどの並び替えもできるようになりたいです。（今回はこちらで困っております・・・）

以下エラー文の詳細になります。

NullReferenceException: Object reference not set to an instance of an object.
BlazorApp1.Pages.Article001.BuildRenderTree(RenderTreeBuilder __builder) in Article001.razor
-
        </li>
    }
</ul>*@
<ul>
    @foreach (var sorts in sorts)
    {
        <li class="builds">
            <a href="@sorts.HtmlUrl">
                <img src="/Images/Builds/@sorts.Name" style="width:100px; height:auto;
             border:5px #ff0000 solid; margin:10px;" />
                <span>@sorts.Number @sorts.Description</span>
Microsoft.AspNetCore.Components.ComponentBase.<.ctor>b__6_0(RenderTreeBuilder builder)
Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment)
Microsoft.AspNetCore.Components.RenderTree.Renderer.RenderInExistingBatch(RenderQueueEntry renderQueueEntry)
Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()
Microsoft.AspNetCore.Components.Rendering.HtmlRenderer.HandleException(Exception exception)
Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()
Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessPendingRender()
Microsoft.AspNetCore.Components.RenderTree.Renderer.AddToRenderQueue(int componentId, RenderFragment renderFragment)
Microsoft.AspNetCore.Components.ComponentBase.StateHasChanged()
Microsoft.AspNetCore.Components.ComponentBase.CallOnParametersSetAsync()
Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()
Microsoft.AspNetCore.Components.Rendering.HtmlRenderer.HandleException(Exception exception)
Microsoft.AspNetCore.Components.RenderTree.Renderer.AddToPendingTasks(Task task)
Microsoft.AspNetCore.Components.Rendering.ComponentState.SetDirectParameters(ParameterView parameters)
Microsoft.AspNetCore.Components.RenderTree.Renderer.RenderRootComponentAsync(int componentId, ParameterView initialParameters)
Microsoft.AspNetCore.Components.Rendering.HtmlRenderer.CreateInitialRenderAsync(Type componentType, ParameterView initialParameters)
Microsoft.AspNetCore.Components.Rendering.HtmlRenderer.RenderComponentAsync(Type componentType, ParameterView initialParameters)
Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext+<>c__11<TResult>+<<InvokeAsync>b__11_0>d.MoveNext()
Microsoft.AspNetCore.Mvc.ViewFeatures.StaticComponentRenderer.PrerenderComponentAsync(ParameterView parameters, HttpContext httpContext, Type componentType)
Microsoft.AspNetCore.Mvc.ViewFeatures.ComponentRenderer.PrerenderedServerComponentAsync(HttpContext context, ServerComponentInvocationSequence invocationId, Type type, ParameterView parametersCollection)
Microsoft.AspNetCore.Mvc.ViewFeatures.ComponentRenderer.RenderComponentAsync(ViewContext viewContext, Type componentType, RenderMode renderMode, object parameters)
Microsoft.AspNetCore.Mvc.TagHelpers.ComponentTagHelper.ProcessAsync(TagHelperContext context, TagHelperOutput output)
Microsoft.AspNetCore.Razor.Runtime.TagHelpers.TagHelperRunner.<RunAsync>g__Awaited|0_0(Task task, TagHelperExecutionContext executionContext, int i, int count)
BlazorApp1.Pages.Pages__Host.<ExecuteAsync>b__14_1() in _Host.cshtml
-
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />
</head>
<body>
    <app>
        <component type="typeof(App)" render-mode="ServerPrerendered" />
    </app>
    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
Microsoft.AspNetCore.Razor.Runtime.TagHelpers.TagHelperExecutionContext.SetOutputContentAsync()
BlazorApp1.Pages.Pages__Host.ExecuteAsync() in _Host.cshtml
-
@page "/"
@namespace BlazorApp1.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
Microsoft.AspNetCore.Mvc.Razor.RazorView.RenderPageCoreAsync(IRazorPage page, ViewContext context)
Microsoft.AspNetCore.Mvc.Razor.RazorView.RenderPageAsync(IRazorPage page, ViewContext context, bool invokeViewStarts)
Microsoft.AspNetCore.Mvc.Razor.RazorView.RenderAsync(ViewContext context)
Microsoft.AspNetCore.Mvc.ViewFeatures.ViewExecutor.ExecuteAsync(ViewContext viewContext, string contentType, Nullable<int> statusCode)
Microsoft.AspNetCore.Mvc.ViewFeatures.ViewExecutor.ExecuteAsync(ViewContext viewContext, string contentType, Nullable<int> statusCode)
Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeNextResultFilterAsync>g__Awaited|29_0<TFilter, TFilterAsync>(ResourceInvoker invoker, Task lastTask, State next, Scope scope, object state, bool isCompleted)
Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Rethrow(ResultExecutedContextSealed context)
Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.ResultNext<TFilter, TFilterAsync>(ref State next, ref Scope scope, ref object state, ref bool isCompleted)
Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.InvokeResultFilters()
Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeNextResourceFilter>g__Awaited|24_0(ResourceInvoker invoker, Task lastTask, State next, Scope scope, object state, bool isCompleted)
Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Rethrow(ResourceExecutedContextSealed context)
Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Next(ref State next, ref Scope scope, ref object state, ref bool isCompleted)
Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.InvokeFilterPipelineAsync()
Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeAsync>g__Awaited|17_0(ResourceInvoker invoker, Task task, IDisposable scope)
Microsoft.AspNetCore.Routing.EndpointMiddleware.<Invoke>g__AwaitRequestTask|6_0(Endpoint endpoint, Task requestTask, ILogger logger)
Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware.Invoke(HttpContext context)

以下がコードになります。

Blazor
1
2@page "/article001"
3
4<h3>Article001</h3>
5
6//foreachで自動で列挙する（ここまでは苦戦しながらもできました。）
7<ul>
8    @foreach (var build in builds)
9    {
10        <li class="builds">
11            <a href="@build.HtmlUrl">
12                <img src="/Images/Builds/@build.Name" style="width:100px; height:auto;
13             border:5px #ff0000 solid; margin:10px;" />
14                <span>@build.Number @build.Description</span>
15            </a>
16        </li>
17    }
18</ul>
19
20//foreachでsortしたのを並べる(これを導入した途端エラーが出る様になってしまいました。）
21<ul>
22    @foreach (var sorts in sorts)
23    {
24        <li class="builds">
25            <a href="@sorts.HtmlUrl">
26                <img src="/Images/Builds/@sorts.Name" style="width:100px; height:auto;
27             border:5px #ff0000 solid; margin:10px;" />
28                <span>@sorts.Number @sorts.Description</span>
29            </a>
30        </li>
31    }
32</ul>
33
34<button class="btn btn-primary" @onclick="SortItems">Sort me</button>
35
36@code {
37
38    public class ArticleItem
39    {
40        public int Number { get; set; }
41        public string Name { get; set; }
42        public string Description { get; set; }
43
44        public string HtmlUrl { get; set; }
45
46        public ArticleItem(int number, string name, string description, string htmlurl)
47        {
48            this.Number = number;
49            this.Name = name;
50            this.Description = description;
51            this.HtmlUrl = htmlurl;
52        }
53    }
54
55    List<ArticleItem> sorts;
56    List<ArticleItem> builds = new List<ArticleItem>
57    {
58        new ArticleItem(1, "vermeer.jpg", "フェルメールの真珠の耳飾りの少女", "none"),
59        new ArticleItem(2, "mona_lisa.jpg",  "ダ・ヴィンチのモナ・リザ", "https://localhost:44391/mona_lisa"),
60        new ArticleItem(3, "unnamed.jpg",  "作者不明のタイトル不明", "none"),
61        new ArticleItem(4, "the_last_supper.jpg",  "ダ・ヴィンチの最後の晩餐", "none")
62    };
63
64    void SortItems()
65    {
66        sorts = builds;
67        sorts.Sort((a, b) => string.Compare(a.Description, b.Name));
68    }
69}
70

Listとインスタンスを使ってオブジェクトを作り
それを@foreachによって一気に列挙するというコードです。
ソート機能も付けたいと思いsorts.Sortを使ったりもしております。

@foreachの部分を削除すると問題なくページは表示されるので、この部分が原因かと思うのですが、
調べてみるとnullにすると良いとのことで、手探りで、
List<ArticleItem> results; を List<ArticleItem> results = null; にしてみたりも変化起きず。

投げっぱなしな質問になっており大変恐縮なのですが、
入門書を読み直したりしても解決できず日にちが過ぎてしまいまして・・・。
どなたか、心当たりある方いらしたら部分的にでもご教授願いますでしょうか。
どうぞ宜しくお願い申し上げます。

Zuishin

2020/06/08 01:18

sorts in sorts を item in sorts にするとどうなりますか？

Zuishin

2020/06/08 01:20

また、クリックされるまで sorts は null です。これを builds で初期化するとどうなりますか？

teilmari

2020/06/09 01:29 編集

すみません、sortsではなくsortでした。記入ミスをしておりました；しかし修正しても同じでした。 Listのnull状態がよく理解できていなかったのですが、クリックされるまでがnullだったのですね。初期化してみたところ無事に作動するようになったみたいです。ありがとうございました！

行動規範の内容に同意します

回答2件

ベストアンサー

Blazorのテンプレートにある「FetchData.razor」を見てください。
@foreach (var forecast in forecasts)はelseの中に記述されていますよね。
ではそのifの条件はどうなっていますか？

後、Zuishinさんの指摘がありますが、@foreach (var sorts in sorts)のリスト全体を示す変数名と繰り返しで参照するリストの1要素の変数名が同じというのは試してみたらビルドエラーにもならないし実行時エラーにもなりませんでしたが、通常のC#ソースの中だとコンパイルエラーになります。なので別の変数名を付けるようにしましょう。

投稿2020/06/08 05:06

len_souko

総合スコア1363

teilmari

2020/06/09 02:04 編集

変数名は記入ミスをしておりました；失礼いたしました・・・。 FetchDataを参考にやってみたところ、無事にソートできるようになりました！しかし今度は、ソートをすると画像のリンクが切れてしまう問題が起きてしまいました；デベロッパ画面で確認したところソートしてもimgタグに画像URLは入っていおりズレてはいないので、別の問題でしょうか。試しにソートボタンを押したらブラウザを更新してくれる NavigationManager NavigationManager; private void HandleClick() { NavigationManager.NavigateTo("article001", true); } なる関数を使用してみたところ、ブラウザ自体をリロードしてしまうのでソートも初期に戻ってしまい駄目でした。こちらは今回と別の質問になると思うので悩んでみて難しそうでしたらまた質問させて頂きます・・・。教えて頂きどうもありがとうございました！ m(_ _)m と思っていたら解決しました。ソート版の方のhtmlタグのimgのurlが間違えていました；文字を一括で置換する際に、同じ文字で書いてあった置換してはいけない場所(imgタグのurl部分)も一緒に置換してしまい、それが原因でソート時のみリンク切れが起きているだけでした。命名規則を雑にしていたしっぺ返しがきてしまったので以降気を付けます。大変失礼いたしました。

行動規範の内容に同意します

投稿主です。お2人方の助言のもと、無事にソートできるようになりました。
しかしソートをすると、今度はimgタグと画像URLのズレが起きてしまうのか、
画像がリンク切れ表示になってしまうようになりました；
今回の質問とは関係ないトラブルなので、また解決できないようでしたら別途質問させて頂きます・・・。

と思っていたら解決しました。
ソート版の方のhtmlタグのimgのurlが間違えていました；
文字を一括で置換するさいに、同じ文字で置換してはいけない場所(imgタグのurl部分)も一緒に置換してしまい、
それが原因でソート時のみリンク切れが起きているだけでした。
大変失礼いたしました。

Blazor
1
2@page "/article001"
3
4<h3>Article001</h3>
5
6<button class="btn btn-primary" @onclick="SortItems">Sort-番号昇順</button>
7<button class="btn btn-primary" @onclick="SortItems2">Sort-西暦降順</button>
8<button class="btn btn-primary" @onclick="SortItems3">Sort-適当</button>
9
10@if (sorts == null)
11{
12    <ul>
13        @foreach (var build in builds)
14        {
15            <li class="builds">
16                <a href="@build.HtmlUrl">
17                    <img src="/Images/Builds/@build.ArtImageUrl" style="width:100px; height:auto;
18                    border:5px #ff0000 solid; margin:10px;" />
19                    <span>@build.Number - @build.RegistrationDate</span>
20                    <span>@build.Artist - @build.Title</span>
21                    <span> @build.Description</span>
22                </a>
23            </li>
24        }
25    </ul>
26}
27else
28{
29    <ul>
30        @foreach (var sort in sorts)
31        {
32            {
33                <li class="builds">
34                    <a href="@sort.HtmlUrl">
35                        <img src="/Images/Builds/@sort.ArtImageUrl" style="width:100px; height:auto;
36                        border:5px #ff0000 solid; margin:10px;" />
37                        <span>@sort.Number - @sort.RegistrationDate</span>
38                        <span>@sort.Artist - @sort.Title</span>
39                        <span> @sort.Description</span>
40                    </a>
41                </li>
42            }
43        }
44    </ul>
45}
46
47@code {
48
49    public class ArticleItem
50    {
51        public int Number { get; set; }
52        public int RegistrationDate { get; set; }
53        public string Artist { get; set; }
54        public string Title { get; set; }
55        public string Description { get; set; }
56        public string ArtImageUrl { get; set; }
57        public string HtmlUrl { get; set; }
58
59        public ArticleItem(int number, int registrationdate, string artist, string title, string description, string artimageurl, string htmlurl)
60        {
61            this.Number = number;
62            this.RegistrationDate = registrationdate;
63            this.Artist = artist;
64            this.Title = title;
65            this.Description = description;
66            this.ArtImageUrl = artimageurl;
67            this.HtmlUrl = htmlurl;
68        }
69    }
70
71    List<ArticleItem> sorts;
72
73    List<ArticleItem> builds = new List<ArticleItem>
74    {
75        new ArticleItem(1, 800, "フェルメール", "真珠の耳飾りの少女", "綺麗系", "vermeer.jpg", "none"),
76        new ArticleItem(2, 1300,  "ダ・ヴィンチ", "モナ・リザ", "凄み系", "mona_lisa.jpg", "https://localhost:44391/mona_lisa"),
77        new ArticleItem(3, 1900, "作者不明", "タイトル不明", "謎", "unnamed.jpg", "none"),
78        new ArticleItem(4, 2100,  "ダ・ヴィンチ", "最後の晩餐", "やたら大きい絵", "the_last_supper.jpg", "none")
79    };
80
81    void SortItems()
82    {
83        sorts = builds;
84        sorts.Sort((a, b) => (a.Number - b.Number));
85    }
86
87    void SortItems2()
88    {
89        sorts = builds;
90        sorts.Sort((a, b) => (b.RegistrationDate - a.RegistrationDate));
91    }
92
93    void SortItems3()
94    {
95        sorts = builds;
96        sorts.Sort((a, b) => string.Compare(a.Artist, b.Title));
97    }
98
99    // F5リロード関数 使用せず。
100    NavigationManager NavigationManager;
101
102    private void HandleClick()
103    {
104        NavigationManager.NavigateTo("article001", true);
105    }
106}
107