teratail
回答率
85.47%
質問するログイン新規登録
トップblazorに関する質問(入門者)BlazorとC#のListでオブジェクトの色々なソート機能を実現したい。

編集履歴

回答編集履歴

6

最終コード修正。htmlタグのimgのurlを修正。

2020/06/09 02:02

投稿

teilmari
teilmari

スコア14

test CHANGED
@@ -8,6 +8,18 @@
8
8
 
9
9
 
10
10
 
11
+ と思っていたら解決しました。
12
+
13
+ ソート版の方のhtmlタグのimgのurlが間違えていました；
14
+
15
+ 文字を一括で置換するさいに、同じ文字で置換してはいけない場所(imgタグのurl部分)も一緒に置換してしまい、
16
+
17
+ それが原因でソート時のみリンク切れが起きているだけでした。
18
+
19
+ 大変失礼いたしました。
20
+
21
+
22
+
11
23
  ```Blazor
12
24
 
13
25
 
@@ -42,9 +54,9 @@
42
54
 
43
55
  <a href="@build.HtmlUrl">
44
56
 
45
- <img src="/Images/Builds/@build.ArtImage" style="width:100px; height:auto;
57
+ <img src="/Images/Builds/@build.ArtImageUrl" style="width:100px; height:auto;
46
-
58
+
47
- border:5px #ff0000 solid; margin:10px;" />
59
+ border:5px #ff0000 solid; margin:10px;" />
48
60
 
49
61
  <span>@build.Number - @build.RegistrationDate</span>
50
62
 
@@ -74,11 +86,11 @@
74
86
 
75
87
  {
76
88
 
77
- <li class="sorts">
89
+ <li class="builds">
78
90
 
79
91
  <a href="@sort.HtmlUrl">
80
92
 
81
- <img src="/Images/sorts/@sort.ArtImage" style="width:100px; height:auto;
93
+ <img src="/Images/Builds/@sort.ArtImageUrl" style="width:100px; height:auto;
82
94
 
83
95
  border:5px #ff0000 solid; margin:10px;" />
84
96
 
@@ -106,7 +118,7 @@
106
118
 
107
119
 
108
120
 
109
- public class ArticleItem
121
+ public class ArticleItem
110
122
 
111
123
  {
112
124
 
@@ -120,15 +132,13 @@
120
132
 
121
133
  public string Description { get; set; }
122
134
 
123
-
124
-
125
- public string ArtImage { get; set; }
135
+ public string ArtImageUrl { get; set; }
126
136
 
127
137
  public string HtmlUrl { get; set; }
128
138
 
129
139
 
130
140
 
131
- public ArticleItem(int number, int registrationdate, string artist, string title, string description, string artimage, string htmlurl)
141
+ public ArticleItem(int number, int registrationdate, string artist, string title, string description, string artimageurl, string htmlurl)
132
142
 
133
143
  {
134
144
 
@@ -142,7 +152,7 @@
142
152
 
143
153
  this.Description = description;
144
154
 
145
- this.ArtImage = artimage;
155
+ this.ArtImageUrl = artimageurl;
146
156
 
147
157
  this.HtmlUrl = htmlurl;
148
158
 
@@ -158,7 +168,7 @@
158
168
 
159
169
  List<ArticleItem> builds = new List<ArticleItem>
160
170
 
161
- {
171
+ {
162
172
 
163
173
  new ArticleItem(1, 800, "フェルメール", "真珠の耳飾りの少女", "綺麗系", "vermeer.jpg", "none"),
164
174
 
@@ -208,7 +218,7 @@
208
218
 
209
219
 
210
220
 
211
- // F5リロード関数 使わず。
221
+ // F5リロード関数 使用せず。
212
222
 
213
223
  NavigationManager NavigationManager;
214
224
 
@@ -226,8 +236,4 @@
226
236
 
227
237
 
228
238
 
229
-
230
-
231
-
232
-
233
239
  ```

5

一部些細な箇所を訂正。

2020/06/09 02:02

投稿

teilmari
teilmari

スコア14

test CHANGED
@@ -20,7 +20,7 @@
20
20
 
21
21
 
22
22
 
23
- <button class="btn btn-primary" @onclick="SortItems">Sort-名前昇順</button>
23
+ <button class="btn btn-primary" @onclick="SortItems">Sort-番号昇順</button>
24
24
 
25
25
  <button class="btn btn-primary" @onclick="SortItems2">Sort-西暦降順</button>
26
26
 

4

コードを見やすく修正。

2020/06/09 01:47

投稿

teilmari
teilmari

スコア14

test CHANGED
@@ -20,10 +20,6 @@
20
20
 
21
21
 
22
22
 
23
-
24
-
25
-
26
-
27
23
  <button class="btn btn-primary" @onclick="SortItems">Sort-名前昇順</button>
28
24
 
29
25
  <button class="btn btn-primary" @onclick="SortItems2">Sort-西暦降順</button>
@@ -84,7 +80,7 @@
84
80
 
85
81
  <img src="/Images/sorts/@sort.ArtImage" style="width:100px; height:auto;
86
82
 
87
- border:5px #ff0000 solid; margin:10px;" />
83
+ border:5px #ff0000 solid; margin:10px;" />
88
84
 
89
85
  <span>@sort.Number - @sort.RegistrationDate</span>
90
86
 
@@ -110,6 +106,52 @@
110
106
 
111
107
 
112
108
 
109
+ public class ArticleItem
110
+
111
+ {
112
+
113
+ public int Number { get; set; }
114
+
115
+ public int RegistrationDate { get; set; }
116
+
117
+ public string Artist { get; set; }
118
+
119
+ public string Title { get; set; }
120
+
121
+ public string Description { get; set; }
122
+
123
+
124
+
125
+ public string ArtImage { get; set; }
126
+
127
+ public string HtmlUrl { get; set; }
128
+
129
+
130
+
131
+ public ArticleItem(int number, int registrationdate, string artist, string title, string description, string artimage, string htmlurl)
132
+
133
+ {
134
+
135
+ this.Number = number;
136
+
137
+ this.RegistrationDate = registrationdate;
138
+
139
+ this.Artist = artist;
140
+
141
+ this.Title = title;
142
+
143
+ this.Description = description;
144
+
145
+ this.ArtImage = artimage;
146
+
147
+ this.HtmlUrl = htmlurl;
148
+
149
+ }
150
+
151
+ }
152
+
153
+
154
+
113
155
  List<ArticleItem> sorts;
114
156
 
115
157
 
@@ -186,4 +228,6 @@
186
228
 
187
229
 
188
230
 
231
+
232
+
189
233
  ```

3

全体的にわかりやすく修正。

2020/06/09 01:39

投稿

teilmari
teilmari

スコア14

test CHANGED
@@ -1,4 +1,4 @@
1
- 主です。お2人方の助言のもと、無事にソートできるようになりました。
1
+ 投稿主です。お2人方の助言のもと、無事にソートできるようになりました。
2
2
 
3
3
  しかしソートをすると、今度はimgタグと画像URLのズレが起きてしまうのか、
4
4
 
@@ -24,9 +24,11 @@
24
24
 
25
25
 
26
26
 
27
- <button class="btn btn-primary" @onclick="SortItems">Sort 名前-昇順</button>
27
+ <button class="btn btn-primary" @onclick="SortItems">Sort-名前昇順</button>
28
28
 
29
- <button class="btn btn-primary" @onclick="SortItems2">Sort 時代-降順</button>
29
+ <button class="btn btn-primary" @onclick="SortItems2">Sort-西暦降順</button>
30
+
31
+ <button class="btn btn-primary" @onclick="SortItems3">Sort-適当</button>
30
32
 
31
33
 
32
34
 
@@ -54,9 +56,9 @@
54
56
 
55
57
  <span> @build.Description</span>
56
58
 
57
- 　　　　　　　　　</a>
59
+ </a>
58
60
 
59
- </li>
61
+ </li>
60
62
 
61
63
  }
62
64
 
@@ -68,37 +70,37 @@
68
70
 
69
71
  {
70
72
 
71
- <ul>
73
+ <ul>
72
74
 
73
- @foreach (var sort in sorts)
75
+ @foreach (var sort in sorts)
74
-
75
- {
76
76
 
77
77
  {
78
78
 
79
- <li class="sorts">
79
+ {
80
80
 
81
- <a href="@sort.HtmlUrl">
81
+ <li class="sorts">
82
82
 
83
- <img src="/Images/sorts/@sort.ArtImage" style="width:100px; 　　　　　　　　　　　height:auto;
83
+ <a href="@sort.HtmlUrl">
84
84
 
85
- 　　　　border:5px #ff0000 solid; margin:10px;" />
85
+ <img src="/Images/sorts/@sort.ArtImage" style="width:100px; height:auto;
86
86
 
87
- <span>@sort.Number - @sort.RegistrationDate</span>
87
+ border:5px #ff0000 solid; margin:10px;" />
88
88
 
89
- <span>@sort.Artist - @sort.Title</span>
89
+ <span>@sort.Number - @sort.RegistrationDate</span>
90
90
 
91
- <span> @sort.Description</span>
91
+ <span>@sort.Artist - @sort.Title</span>
92
92
 
93
- </a>
93
+ <span> @sort.Description</span>
94
94
 
95
+ </a>
96
+
95
- </li>
97
+ </li>
98
+
99
+ }
96
100
 
97
101
  }
98
102
 
99
- }
100
-
101
- </ul>
103
+ </ul>
102
104
 
103
105
  }
104
106
 
@@ -114,15 +116,15 @@
114
116
 
115
117
  List<ArticleItem> builds = new List<ArticleItem>
116
118
 
117
- {
119
+ {
118
120
 
119
- new ArticleItem(1, 800, "フェルメール", "真珠の耳飾りの少女", "綺麗系", "vermeer.jpg", 　　　　"none"),
121
+ new ArticleItem(1, 800, "フェルメール", "真珠の耳飾りの少女", "綺麗系", "vermeer.jpg", "none"),
120
122
 
121
- new ArticleItem(2, 1300, "ダ・ヴィンチ", "モナ・リザ", "凄み系", "mona_lisa.jpg", 　　　　"https://localhost:44391/mona_lisa"),
123
+ new ArticleItem(2, 1300, "ダ・ヴィンチ", "モナ・リザ", "凄み系", "mona_lisa.jpg", "https://localhost:44391/mona_lisa"),
122
124
 
123
125
  new ArticleItem(3, 1900, "作者不明", "タイトル不明", "謎", "unnamed.jpg", "none"),
124
126
 
125
- new ArticleItem(4, 2100, "ダ・ヴィンチ", "最後の晩餐", "やたら大きい絵", 　　　　"the_last_supper.jpg", "none")
127
+ new ArticleItem(4, 2100, "ダ・ヴィンチ", "最後の晩餐", "やたら大きい絵", "the_last_supper.jpg", "none")
126
128
 
127
129
  };
128
130
 
@@ -152,4 +154,36 @@
152
154
 
153
155
 
154
156
 
157
+ void SortItems3()
158
+
159
+ {
160
+
161
+ sorts = builds;
162
+
163
+ sorts.Sort((a, b) => string.Compare(a.Artist, b.Title));
164
+
165
+ }
166
+
167
+
168
+
169
+ // F5リロード関数 使わず。
170
+
171
+ NavigationManager NavigationManager;
172
+
173
+
174
+
175
+ private void HandleClick()
176
+
177
+ {
178
+
179
+ NavigationManager.NavigateTo("article001", true);
180
+
181
+ }
182
+
183
+ }
184
+
185
+
186
+
187
+
188
+
155
189
  ```

2

改行ズレの修正。

2020/06/09 01:34

投稿

teilmari
teilmari

スコア14

test CHANGED
@@ -54,9 +54,9 @@
54
54
 
55
55
  <span> @build.Description</span>
56
56
 
57
- </a>
57
+ 　　　　　　　　　</a>
58
58
 
59
- </li>
59
+ </li>
60
60
 
61
61
  }
62
62
 
@@ -80,9 +80,9 @@
80
80
 
81
81
  <a href="@sort.HtmlUrl">
82
82
 
83
- <img src="/Images/sorts/@sort.ArtImage" style="width:100px; height:auto;
83
+ <img src="/Images/sorts/@sort.ArtImage" style="width:100px; 　　　　　　　　　　　height:auto;
84
84
 
85
- border:5px #ff0000 solid; margin:10px;" />
85
+ 　　　　border:5px #ff0000 solid; margin:10px;" />
86
86
 
87
87
  <span>@sort.Number - @sort.RegistrationDate</span>
88
88
 
@@ -116,13 +116,13 @@
116
116
 
117
117
  {
118
118
 
119
- new ArticleItem(1, 800, "フェルメール", "真珠の耳飾りの少女", "綺麗系", "vermeer.jpg", "none"),
119
+ new ArticleItem(1, 800, "フェルメール", "真珠の耳飾りの少女", "綺麗系", "vermeer.jpg", 　　　　"none"),
120
120
 
121
- new ArticleItem(2, 1300, "ダ・ヴィンチ", "モナ・リザ", "凄み系", "mona_lisa.jpg", "https://localhost:44391/mona_lisa"),
121
+ new ArticleItem(2, 1300, "ダ・ヴィンチ", "モナ・リザ", "凄み系", "mona_lisa.jpg", 　　　　"https://localhost:44391/mona_lisa"),
122
122
 
123
123
  new ArticleItem(3, 1900, "作者不明", "タイトル不明", "謎", "unnamed.jpg", "none"),
124
124
 
125
- new ArticleItem(4, 2100, "ダ・ヴィンチ", "最後の晩餐", "やたら大きい絵", "the_last_supper.jpg", "none")
125
+ new ArticleItem(4, 2100, "ダ・ヴィンチ", "最後の晩餐", "やたら大きい絵", 　　　　"the_last_supper.jpg", "none")
126
126
 
127
127
  };
128
128
 

1

if文の追加。

2020/06/09 01:23

投稿

teilmari
teilmari

スコア14

test CHANGED
@@ -1,3 +1,13 @@
1
+ 主です。お2人方の助言のもと、無事にソートできるようになりました。
2
+
3
+ しかしソートをすると、今度はimgタグと画像URLのズレが起きてしまうのか、
4
+
5
+ 画像がリンク切れ表示になってしまうようになりました；
6
+
7
+ 今回の質問とは関係ないトラブルなので、また解決できないようでしたら別途質問させて頂きます・・・。
8
+
9
+
10
+
1
11
  ```Blazor
2
12
 
3
13