Asp.net webformでListview内の行ごとに非同期レンダリングさせるには

実現したいこと

[ ]web formでlistviewコントロールを一度ページでbindさせたあとに、取得に時間のかかる情報を取得出来次第アイテム（行）別にloadingから表示に切り替えていく

前提

asp.netのwebformでwebアプリケーションを作成しています。
基本情報｜付加情報
会員A｜Loading..
会員B｜Loading..
会員C｜Loading..
このようなテーブル構造でまずはページを表示させます。
ページ自体の読み込みが完了した後、Aの情報が取得でき次第、Loadingから付加情報Aを表示させます。このときBCの付加情報がまだ取得できていなければLoadingのままにします。

上のような仕様で作成したいのですが、うまくいかない状態にあります。
updatepanelとupdateprogressを使用するのかなとおもいますが、行全体の付加情報を更新するならともかく別々に取得出来次第表示というのがどのように実装すればよいか思いつきません。

よろしくお願いいたします。

やったこと

以下コードでやってみました。
ページの初期表示は問題なくできました。取得のボタンを押した際にloadingからhello worldの文字も表示されますが、実際にやりたいこととしてはこれを全行に対して並列的に行いたいです（ページ読込後に全行のボタンをおすようにjsでクリックさせるつもりでした）。
ただupdatepanelでは部分的に変わっているのは表示上のみで、実際にはpostbackが毎回走っているはずなので、ボタンイベントが完了しないまま連続的に１，２，３行目とおしても最後におしたボタンの行のみの更新となってしまいます。

WebForm1.aspx

html
1<html xmlns="http://www.w3.org/1999/xhtml">
2<head runat="server">
3<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
4    <title></title>
5    
6</head>
7<body>
8    <form id="form1" runat="server">
9        <div>
10            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
11            <asp:ListView ID="ListView1" runat="server">
12                <LayoutTemplate>
13                    <table>
14                        <tr>
15                            <th>ID</th>
16                            <th></th>
17                        </tr>
18                        <tr id="itemPlaceHolder" runat="server"></tr>
19                    </table>
20                </LayoutTemplate>
21                <ItemTemplate>
22                    <tr>
23                        <td><%# Eval("ID") %></td>
24                        <td>
25                            <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
26                                <ProgressTemplate>
27                                    Loading..
28                                </ProgressTemplate>
29                            </asp:UpdateProgress>
30                            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
31                                <ContentTemplate>
32                                    <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
33                                    <asp:Button ID="Button1" runat="server" Text="取得" OnClick="Button1_Click" />
34                                </ContentTemplate>
35                            </asp:UpdatePanel>
36                        </td>
37                    </tr>
38                </ItemTemplate>
39            </asp:ListView>
40        </div>
41    </form>
42</body>
43</html>

WebForm1.aspx.vb

vb
1Public Class WebForm1
2    Inherits System.Web.UI.Page
3
4    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
5        If Not IsPostBack Then
6            ListView1.DataSource = GetDataSource()
7            ListView1.DataBind()
8        End If
9    End Sub
10
11    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs)
12        'ここで付加情報をDBから取得する想定
13        System.Threading.Thread.Sleep(5000)
14        Dim str As String = "Hello World"
15        Dim i As Integer = CType(sender, Button).CommandArgument
16        CType(ListView1.Items(i).FindControl("Label1"), Label).Text = str
17    End Sub
18
19    Private Sub ListView1_DataBound(sender As Object, e As EventArgs) Handles ListView1.DataBound
20        For i As Integer = 0 To ListView1.Items.Count - 1
21            CType(ListView1.Items(i).FindControl("Button1"), Button).CommandArgument = i
22        Next
23    End Sub
24
25    Function GetDataSource() As DataTable
26       '基本情報の取得
27    End Function
28End Class

補足情報（FW/ツールのバージョンなど）

.net framework 4.8

退会済みユーザー

2023/02/18 09:28

情報不足です。やりたいことを実現するために自分ではどこまで実装できていて、どこで躓いていて、何が分かれば解決できるかを、自分が書いたコードを質問欄に貼るなどして説明してください。丸投げは歓迎されません。読んでください。 https://teratail.com/help/avoid-asking https://teratail.com/help/question-tips

penta0205

2023/02/18 11:13

すみません。情報を追記しました。他に不明点等ございましたらおっしゃっていただければと思います。

退会済みユーザー

2023/02/18 12:15

> ページ自体の読み込みが完了した後、Aの情報が取得でき次第、Loadingから付加情報Aを表示させます。このときBCの付加情報がまだ取得できていなければLoadingのままにします。会員 A, B, C の情報を同時に瞬時に取得できないのですか？　だとすると（それぞれ時間がかかるとすると）何故でしょう？

退会済みユーザー

2023/02/18 23:03

質問に答えませんか？会員 A, B, C の情報をそれぞれ別の Web API から取得してくるというような話でなければやってることに意味がない、意味がないことに回答しても意味がないから聞いてます。

退会済みユーザー

2023/02/20 00:23

質問者さん、回答したのでそれに対するフィードバック (役に立った/立たなかった。役に立たなかったならどこがダメだったかなど) を返してください。

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

回答1件

質問のコメントに対する返事がないのでいろいろ不明ですが・・・

web formでlistviewコントロールを一度ページでbindさせたあとに、取得に時間のかかる情報を取得出来次第アイテム（行）別にloadingから表示に切り替えていく

ページ自体の読み込みが完了した後、Aの情報が取得でき次第、Loadingから付加情報Aを表示させます。このときBCの付加情報がまだ取得できていなければLoadingのままにします。

そういう目的に UpdatePanel は使えません。

UpdatePanel を使って非同期ポストバックを行う場合、要求を受けたサーバー側では PreRender イベントの前までは同期ポストバックと全く同じ動きをして、UpdatePanel の中身のみ応答として返します。そういう仕組みなので質問に書いてあるようなコードで「取得に時間のかかる情報を取得出来次第アイテム（行）別にloadingから表示に切り替えていく」なんてことはできません。

ボタンイベントが完了しないまま連続的に１，２，３行目とおしても最後におしたボタンの行のみの更新となってしまいます。

それは最後に戻ってきた応答（UpdatePanel の中身）のみがブラウザに表示されるからです。１，２，３行目の要求に対しすべてサーバで処理されてブラウザに戻ってきますが、１，２行目は破棄されて、３行目のみ表示されるという仕組みになってます。

１行目の要求を出したら、その応答が返ってくるまで２，３行目の要求は出ないようにしないとダメです。そういう仕組みは以下の記事のようにして実装できますが、それでは全部の情報を得るのにかえって時間がかかって本末転倒です。

二度押し防止
http://surferonwww.info/BlogEngine/post/2010/12/12/Cancel-request-using-PageRequestManager.aspx

【追記】その本末転倒的な事はちょっと置いといて、１行目の要求を出して応答が返ってきたら２行目の要求を出す、２行目の要求を出して応答が返ってきたら３行目の要求を出す・・・というようにしたとしても、UpdatePanel の中は応答が返ってくるたび順次書き換えられるので、結局は望むような結果にはなりません。

質問のコメントに書きましたが、会員 A, B, C の情報をそれぞれ別の Web API から取得してくる、応答が返ってくるまで時間がかかる、その時間は各 Web API によってバラバラなので、ある Web API から応答が返ってきたらその情報だけでも先に即表示したい・・・というような話でなければそういうことには意味がない、意味がないことに回答しても意味がなさそうですので、以上それなりに答えました。

投稿2023/02/19 01:32

編集2023/02/19 06:28

退会済みユーザー

総合スコア0

penta0205

2023/02/20 01:42

昨日は所用で確認できず返信が遅れてしまい申し訳ありません。 >会員 A, B, C の情報を同時に瞬時に取得できないのですか？　だとすると（それぞれ時間がかかるとすると）何故でしょう？こちらですが、情報というのは付加情報の方ですかね？今回便宜上その会員の付加情報とだけ記載していますが、実際にはその会員に紹介する別の会員を複数人表示させており、その会員の表示にもさまざまな条件から表示非表示をだしわけたりをしているので、ABCまとめてというのは厳しく時間もかかっているという状況です。なので、まずはページあたり10人のlistviewだとすればまずは10人の情報のみを表示させて、その10人に対するそれぞれの紹介相手は各自で取得し出来次第表示ということがやりたかったこととなります。 updatepanelでその仕様を満たすのは無理そうですので、webserviceなどを使用してajaxでやるしかなさそうですかね。。ありがとうございます。

退会済みユーザー

2023/02/20 03:44

> まずはページあたり10人のlistviewだとすればまずは10人の情報のみを表示させて、その10人に対するそれぞれの紹介相手は各自で取得し出来次第表示ということがやりたかったこととなります。ということは、質問のコードを見る限り、一つの ListView すなわち一つの Table に「10人の情報」とその「紹介相手」の情報を一緒に表示したいように見えますが、そうなんですか？　　「10人の情報」とその「紹介相手」の情報がゴッチャになって訳が分からなくなると思うのですが、そこは一体どうするのですか？「10人の情報」を ListView に表示する初期画面から、ListView の各行に表示された「10人の情報」の行をクリックすると「紹介相手」の情報が別のリストに表示されるというようにしてはいかが？

penta0205

2023/02/20 05:53

https://www.figma.com/file/Gj1mxPKSAiPuxhxCNRfKNQ/%E7%84%A1%E9%A1%8C?node-id=0%3A1&t=xcsVcUTDvdX0IBqa-1 イメージとしてはこのような感じです。初期では相手の部分がloadingになっているイメージですね。現在のシステムがこのようになっているので、ここから1アクションユーザーに増やさせるというのは難しいと思います。（最初のサンプルであったボタンはボタンは非表示にしてjsで読み込み時におしていったら出来るかな、という想定の元作成しました）

退会済みユーザー

2023/02/20 05:57

> イメージとしてはこのような感じです。そういうのを一つの ListView で表示するというのは自分的には想像もつきませんけど？　質問者さん、ASP.NET Web Forms アプリに詳しくないのでは？

penta0205

2023/02/20 06:13

ABC・・の表示部分はlistviewで表示できますよ実際にはrepeaterでやってますが行部分のitemtemplateを更にテーブルなどにして、相手の情報部分をrepeaterなりで表示させればいけるとおもいます・・というかそのように現在はうごいてますが。。 <asp:Repeater> //headertemplateにtableとth //footerにtable閉じタグ <ItemTemplate> <tr>Aの情報、入れ子でrepeater（相手情報部分）</tr> </ItemTemplate> </repeater>

退会済みユーザー

2023/02/20 06:15

じゃあそれでやったらいいのでは？　自分は撤退します。悪しからず。

penta0205

2023/02/20 06:23

教えて頂けるのは非常にありがたいと思っているので、丁寧に返しているつもりなのですがなにか気に障りましたか？詳しくないとまで言われたのでやり方を返したら「じゃあそれでやれば」って、それでやって多少問題があって改善したいとおもっているからこの質問なのにそこが理解できていない感じでしょうか？恐らくupdatepanelでは難しいのかなと思うので、他の方法を模索してみます。ありがとうございました。

退会済みユーザー

2023/02/20 06:30

情報の後出し小出しには付き合いきれないのです。

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