jQueryのwhile文の中でC#のイベントを呼びたい

前提

ASP.NETのWebFormアプリを作成しています。

画面ソース上(asp.net)に書いているjQueryのwhile(true)の中で、C#のイベントを呼んでいます。
指定の上限に達したらbreakしたいのですが、クライアント側に戻ってきてくれないので無限ループになってしまいます。無限ループにならない方法がありますでしょうか。

実現したいこと

指定の上限に達したらbreakしてC#のイベント呼び出しを終了したい。

該当のソースコード

※大文字小文字違いはご了承ください。

ASP.NET
1<asp:Button id="btnUpdate" OnClick="btnUpdateClick" runat="server"/>
2<input type="Button" id="btnLoopUpd" value="更新" onclick="btnLoopUpdClick()"></input>
3
4<!--下記のフラグは、イベント処理「btnUpdateClick」の中で、指定の条件で"1"に更新します。-->
5<asp:HiddenField id="hdnUpdateFlag" runat="server"/>
6

jQuery
1function btnLoopUpdClick() {
2    while(true) {
3        $('#<%=this.btnUpdate.ClientID %>').click();
4        if ($('#<%=this.hdnUpdateFlag.ClientID %>').val() =＝= "1") {
5            // ここに来ない！
6            break;
7        }
8    }
9}
10

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

Windows 10
Visual Studio 2015
.NET Framework4.8

退会済みユーザー

2022/11/08 21:10

ASP.NET のタグもつけてください。何を何で作っているか書いてください。(例: Windows OS の Visual Studio 2015 を使って ASP.NET Web Forms アプリを .NET Framework 4.8 で作っています・・・とか)

yuyu__

2022/11/08 23:38

ご教授ありがとうございます！更新させていただきました。

退会済みユーザー

2022/11/09 22:10

質問者さん、その後無言ですが、回答したのでそれに対するフィードバックを返してください。役に立った/立たなかったぐらいはすぐに返せるのでは？役に立たなかったならどこがダメかを書くとより期待に近い回答が出てくるかも。とにかく無言は NG です。

yuyu__

2022/11/10 01:34

ご報告が遅れました。非同期ポストバックできそうと思い試してみたのですが、whileの中でイベントの終了を待つ、というのがやり方が分からず困っている感じです。

yuyu__

2022/11/10 01:37

やりたいことはまさにおっしゃっている内容で合っています。

退会済みユーザー

2022/11/10 01:43

回答に関することは回答欄下のコメント欄にお願いします。

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

回答2件

誤解でしたので取り消し

~~そもそもの考え方がおかしいです。~~

JavaScriptを実行する段階では、ASP.netの実行は終わっていて、その結果だけがブラウザに送られています。なので、「ASP.netの実行結果をJavaScriptから検出する」という構成そのものが成立しません。

投稿2022/11/08 22:29

編集2022/11/08 23:06

maisumakun

総合スコア145184

退会済みユーザー

2022/11/08 23:05

> 「ASP.netの実行結果をJavaScriptから検出する」という構成そのものが成立しません。間違ってます。ポストバックがかかります。

退会済みユーザー

2022/11/10 12:16

何でこの回答に「応援する」マークがつくの？　

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

ベストアンサー

たぶん、

(1) ［更新］ボタンクリックで JavaScript の btnLoopUpdClick メソッドを起動、
(2) $('#<%=this.btnUpdate.ClientID %>').click(); でポストバックがかかる、
(3) サーバー側で隠しフィールドが 1 に書き換えられて応答が返ってくる、
(4) クライアント側で隠しフィールドの値が 1 だったらループから break する

・・・ということを考えていると思いますが、(2) の後でもループは周り続けるので、応答が返ってくる前に何回も (2) でポストバックがかかるというのが問題の原因だと思います。

ScriptManager と UpdatePanel を使って、非同期ポストバックを行うようにし、非同期要求が出てから応答が返ってきて処理が終わるまでは (2) はスキップするようにしてはいかがですか？

「非同期要求が出てから応答が返ってきて処理が終わる」というのは、PageRequestManager のイベントを使って判定できます。詳しくは以下の記事を見てください。

ASP.NET PageRequestManager クラスの概要
https://learn.microsoft.com/ja-jp/previous-versions/visualstudio/visual-studio-2008/bb386571(v=vs.90)

PageRequestManager のイベントの処理
https://learn.microsoft.com/ja-jp/previous-versions/visualstudio/visual-studio-2008/bb398976(v=vs.90)

不明点があれば下のコメント欄で質問してください。

【追記】

PageRequestManager のイベントの使用例を紹介しておきます。

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

【追記２】

下のコメント欄の 2022/11/10 14:54 の私のコメントで「後で、検証に使ったサンプルコードを回答欄に追記しておきます」と書いた件です。

そもそも while(true) ループで $('#<%=this.btnUpdate.ClientID %>').click(); を繰り返すというのがダメで、下のコメントに書いたフラグ案では対処できなかったです。

以下のコードでは、［更新］ボタンクリックでは一回だけ $('#<%=this.btnUpdate.ClientID %>').click(); を行い、その応答が返ってきて OnEndRequest が呼ばれたらその中で隠しフィールドが 1 でないときは再度 $('#<%=this.btnUpdate.ClientID %>').click(); することで対応しています。

サーバー側で隠しフィールドが 1 に書き換えられる条件は、サーバー側のボタンクリックのイベントハンドラ（下のコードでは Button1_Click）が 3 回呼ばれたらとしています。カウントには ViewState を使います。

.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm11.aspx.cs" 
    Inherits="WebForms1.WebForm11" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="Scripts/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        //<![CDATA[
        var manager;

        function pageLoad(sender, args) {
            if (args.get_isPartialLoad() === false) {
                manager = Sys.WebForms.PageRequestManager.getInstance();
                manager.add_initializeRequest(OnInitializeRequest);
                manager.add_endRequest(OnEndRequest);
            }
        }

        function OnInitializeRequest(sender, args) {            
            
        }

        function OnEndRequest(sender, args) {
            if ($('#<%=HiddenField1.ClientID %>').val() != "1") {
                $('#<%=Button1.ClientID %>').click();
            }
        }

        function btnLoopUpdClick() {
            $('#<%=Button1.ClientID %>').click();
        }
        //]]>
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

        <input type="button" id="btnLoopUpd" value="更新" onclick="btnLoopUpdClick()"/>

        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Button ID="Button1" runat="server" Text="Button" 
                    OnClick="Button1_Click" />
                <asp:HiddenField ID="HiddenField1" runat="server" />
                <asp:Label ID="Label1" runat="server"></asp:Label>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>

.aspx.cs

C#
1using System;
2
3namespace WebForms1
4{
5    public partial class WebForm11 : System.Web.UI.Page
6    {
7        int count;
8
9        protected void Page_Load(object sender, EventArgs e)
10        {
11            if (!IsPostBack)
12            {
13                ViewState["Count"] = 0;
14                Label1.Text = "初期画面";
15            }
16            else
17            {
18                count = (int)ViewState["Count"];
19            }
20        }
21
22        protected void Button1_Click(object sender, EventArgs e)
23        {
24            // ラベルの変化の途中経過が分かるように 1 秒待機
25            System.Threading.Thread.Sleep(1000);
26
27            count++;
28            if (count > 2)
29            {
30                HiddenField1.Value = "1";                
31            }
32            Label1.Text = $"count: {count}, hidden: {HiddenField1.Value}";
33            ViewState["Count"] = count;
34        }
35    }
36}

投稿2022/11/09 00:56

編集2022/11/10 06:15

退会済みユーザー

総合スコア0

yuyu__

2022/11/10 01:47

非同期ポストバックできそうと思い試してみたのですが、whileの中でイベントの終了を待つ、というのがやり方が分からず困っている感じです。

退会済みユーザー

2022/11/10 03:15 編集

例えば、非同期ポストバック中というフラグを設けて、紹介した記事「二度押し防止」を参考に OnInitializeRequest でフラグを立てて OnEndRequest でフラグを降ろす、フラグが立っている間は (2) はスキップするというようにしたらいかがですか？

退会済みユーザー

2022/11/10 03:16

上の案はダメでした。もっとよく考えてみます。

退会済みユーザー

2022/11/10 04:11 編集

サーバー側で隠しフィールドが 1 に書き換えられる条件は何ですか？　btnUpdateClick がある回数（例えば 3 回とか）呼ばれたらでいいのですか？検証するに当たってその辺りの条件も含めたいので、簡単にでいいので書いてください。

yuyu__

2022/11/10 04:41

＞btnUpdateClick がある回数（例えば 3 回とか）呼ばれたらでいいのですか？その条件です。

退会済みユーザー

2022/11/10 05:54

そもそも while(true) ループで $('#<%=this.btnUpdate.ClientID %>').click(); を繰り返すというのがダメで、上のコメントに書いた、 > フラグが立っている間は (2) はスキップするというようにしたらいかがですか？は NG でした。［更新］ボタンクリックでは一回だけ $('#<%=this.btnUpdate.ClientID %>').click(); を行い、その応答が返ってきて OnEndRequest が呼ばれたらその中で隠しフィールドが 1 でないときは再度 $('#<%=this.btnUpdate.ClientID %>').click(); することで対応してみてください。後で、検証に使ったサンプルコードを回答欄に追記しておきます。

yuyu__

2022/11/10 06:56

サンプルコードまでありがとうございます😭 試してまた報告させていただきます。

yuyu__

2022/11/10 11:33

このやり方で解決しました。ありがとうございました。

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

あなたの回答