クライアント側で確認ダイアログのキャンセルを押下した際にサーバーサイド側の処理を止めたい

aspxファイル内でJavaScriptを動かしてみたいのですが、思っていた動きと違うので、
どなたか教えていただければ幸いです。

サーバーサイド側でLinkButtonのDemandLinkButton_Clickのイベントを発生した時のお話ですが、
confirmで確認ダイアログのキャンセルを押下した際に処理を止めたいのですが、
下記のような方法ですと、DemandLinkButton_Clickのイベントが最後まで走ってしまいます。
どなたか教えていただければ幸いです。

test.aspxファイル内のコード

<asp:LinkButton ID="DemandLinkButton" runat="server" Text ="申請" OnClick="DemandLinkButton_Click" />

<script type="text/javascript">
function TotalMoneyCheck() {
    return confirm("金額が違いますが、このまま申請してもよろしいですか？");
}
</script>

test.aspx.csファイル内のコード
///申請ボタンクリック時処理
protected void DemandLinkButton_Click(object sender, EventArgs e)
{
  if (MoneyTextBox.Text != RecalcMoney())
    {
       // Scriptを登録し、aspx側に記載しているTotalMoneyCheck()関数を呼ぶ
       ScriptManager.RegisterStartupScript(this, this.GetType(), "TotalMoney", "TotalMoneyCheck();", true);
    }
　// 画面遷移
　Response.Redirect("https://teratail.com/");
}

補足ですが、ここではMoneyTextBox.Textの値は100とします。
RecalcMoney()の戻り値は200とします。

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

Web Formsを利用し、開発をしています。

【開発環境】
開発環境　VisualStudio2019
言語　　　C#

hoshi-takanori

2022/01/18 16:50

何がしたいのかよく分かりません。サーバー側で確認ダイアログを出してどうしたいのでしょうか？

m.ts10806

2022/01/18 22:30

それってサーバーサイド側で動くJS（Node.jsなど）ではなく、コンパイルされて生成されたHTML上で動くクライアント側のJSの話では？どう操作したときにどうなったら今回の要件を満たせるのか具体的に記載してください。

Zuishin

2022/01/18 22:39

Web Forms でクリックをサーバーサイドで検知したいのであれば、とりあえずこれを一通り読んでみてください。 https://atmarkit.itmedia.co.jp/ait/articles/0209/12/news002.html

kentasuzuki_

2022/01/19 00:10

ご回答ありがとうございます。クライアント側でJSを書きたくない理由としては、先にサーバー側でチェック処理を行っており、そのチェック処理が終わってから、確認ダイアログを表示させたいと思っております。もしクライアント側でサーバー側のチェック処理を呼べるのであればそれが一番良さそうなのですが、良い方法が思い浮かびません。

Zuishin

2022/01/19 00:33

え？読んでないのかな？

kentasuzuki_

2022/01/19 00:34

申し訳ございませんが、内容を大幅に変更させていただきましたので、宜しくお願いします。現状の課題を具体的に書かせていただきました。

Zuishin

2022/01/19 00:36

情報を提示しても読まない人に情報を提示するのはちょっと厳しいです。自分でしようとせず、全部任せられる人を雇うのが良いかもしれません。

kentasuzuki_

2022/01/19 00:40

申し訳ございません、先に回答をいただいた順に対応しておりますが、現在@ITの記事を読んでいる途中です。

退会済みユーザー

2022/01/19 01:20

> <asp:LinkButton id="DemandLinkButton" runat="server" onclick="DemandLinkButton_Click;"/> それコンパイルエラーになりませんか？

kentasuzuki_

2022/01/19 01:30 編集

>それコンパイルエラーになりませんか？すみません、修正させていただきましたので、宜しくお願いします。

退会済みユーザー

2022/01/19 08:59

質問者さん、別の案を回答欄に追記しましたが読んでますか？　それに対するフィードバックを返してください。

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

回答1件

ベストアンサー

クライアント側で確認ダイアログのキャンセルを押下した際にサーバーサイド側の処理を止めたい

そういう場合の ASP.NET Web Froms アプリの定番のやり方は Button とか LinkButton に備わっている OnClientClick プロパティを使うことです。

LinkButton の場合の具体例は以下の通りで、OnClientClick プロパティに JavaScript のコード、今回の例では return confirm("xxx"); を設定します。

<asp:LinkButton ID="LinkButton1" runat="server" 
    OnClick="LinkButton1_Click" 
    OnClientClick="return confirm(&quot;金額が違いますが、このまま申請してもよろしいですか？&quot;);">
    LinkButton
</asp:LinkButton>

上のコードが ASP.NET によって html に変換されると以下のように a 要素になります。

<a onclick="return confirm(&quot;金額が違いますが、このまま申請してもよろしいですか？&quot;);" 
  id="LinkButton1" 
  href="javascript:__doPostBack(&#39;LinkButton1&#39;,&#39;&#39;)">
  LinkButton
</a>

サーバー側で OnClientClick プロパティに設定した JavaScript のコードは a 要素の onclick 属性に設定されています。これにより、LinkButton クリックでまず confirm ダイアログが表示されます。その［キャンセル］ボタンをクリックすると false が返ってくるのでそこでそれ以降の操作はキャンセルされます。

ダイアログの［OK］をクリックすると true が返ってくるので操作は続行され、href 属性に設定したスクリプトによりポストバックされます。結果、サーバー側で LinkButton1_Click メソッドが動きます。

追記

下の 2022/01/19 15:42 の私のコメントで、

「ユーザー入力の検証のやり方は決まっています。それ用に ASP.NET Web Forms アプリには数々の検証コントロールがあるので、それらを使うことを考えましょう」と書きましたが、後でそのやり方を回答欄に追記しておきます。

・・・と書いた件です。

質問者さんのやりたいことは、LinkButton クリックでポストバックされた後サーバー側で DemandLinkButton_Click が動き出してから、その途中で JavaScript の confirm を出して DemandLinkButton_Click 内のコードの処理を止めるということだったようですが、そういうことは不可能です。

ASP.NET の普通のユーザー入力の検証パターンは、入力画面のテキストボックスなどにユーザーが入力した値を検証して、検証結果が OK ならサーバー側で必要な処理をしてからリダイレクト、NG なら再度入力画面に戻ってエラーメッセージを表示しユーザーに再入力を促すというものです。

検証結果 NG の場合でもユーザーが OK すれば受け付けるなどというパターンは絶対にありません。検証結果 NG なら問答無用で受け付けないようにしないとセキュリティが保てませんので。

ASP.NET Web Forms アプリには数々の検証コントロールがありますが、それらの内 RequiredFieldValidator と CustomValidator を使ったサンプルを以下の紹介しておきます。

.aspx

TextBox1 へのユーザー入力を RequiredFieldValidator と CustomValidator で検証します。前者は未入力をチェック、後者は入力が 200 か否かをチェックします。

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

<!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>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" 
                runat="server" 
                Display="Dynamic" ForeColor="Red"
                ErrorMessage="必須入力です" 
                ControlToValidate="TextBox1">
            </asp:RequiredFieldValidator>

            <asp:CustomValidator ID="CustomValidator1" runat="server" 
                Display="Dynamic" ForeColor="Red"
                ErrorMessage="金額が違います" 
                ControlToValidate="TextBox1" 
                OnServerValidate="CustomValidator1_ServerValidate">
            </asp:CustomValidator>

            <br />

            <asp:LinkButton ID="LinkButton1" runat="server" 
                OnClick="LinkButton1_Click" >
                申請
            </asp:LinkButton>
        </div>
    </form>
</body>
</html>

.aspx.cs

using System;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebForms1
{
    public partial class WebForm2 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        // CustomeValidator によるサーバー側での検証
        protected void CustomValidator1_ServerValidate(object source, 
            ServerValidateEventArgs args)
        {
            // 「RecalcMoney()の戻り値は200とします」とのことなので
            // テキストボックスへのユーザー入力が 200 なら検証 OK
            if (args.Value == "200")
            {                
                args.IsValid = true;
            }
            else 
            { 
                args.IsValid = false;
            }
        }

        protected void LinkButton1_Click(object sender, EventArgs e)
        {
            if (Page.IsValid)
            {
                // Page.IsValid が true なら検証結果 OK

                // 要求を受け付けて必要なサーバー側での処理を行う

                // その後リダイレクト（Post-Redirect-Get パターン）
                Response.Redirect("Default.aspx");
            }

            // 検証結果 NG の場合は元の入力画面が再描画され、その際
            // 検証コントロールに設定したエラーメッセージが表示される
        }
    }
}

実行結果は、テキストボックス未入力なら RequiredFieldValidator が働いて、

200 以外の入力なら CustomValidator が働いて、

となります。200 なら検証結果 OK となって Deafult.aspx にリダイレクトされます。

投稿2022/01/19 01:42

編集2022/01/19 07:08

退会済みユーザー

総合スコア0

kentasuzuki_

2022/01/19 02:37 編集

＞これにより、LinkButton クリックでまず confirm ダイアログが表示されます。これに関してなのですが、まずサーバー側での入力チェック処理がtrueの場合にconfirm ダイアログ表示をしたいのです。上記のやり方で試してみたのですが、サーバー側の入力チェック処理より先にconfirm ダイアログ表示されてしまうため、想定している動きではありません。

退会済みユーザー

2022/01/19 02:42

> まずサーバー側での入力チェック処理がtrueの場合にconfirm ダイアログ表示をしたいのです。そういう話は上の質問内容からは全く見えませんよ。情報の後出し・小出しはここのような Q&A サイトでは最もやってはいけないことの一つです。最初から、きちんとやりたいことをすべて、ここに書かれていること以外は知り得ない第三者が読んで分かるように書きましょう。

kentasuzuki_

2022/01/19 02:50

具体的に書いたつもりだったのですが、分かりづらく申し訳ございません。以後、気を付けたいと思います。

退会済みユーザー

2022/01/19 03:09

> 具体的に書いたつもりだったのですが、分かりづらく申し訳ございません。いえ、書いてないです。たぶんテキストボックスなどにユーザーが入力し、その入力が正しいかを検証して結果 OK ならポストバックして処理をするという話ではないかと想像していますが、そういうことが書いてない。やりたいこと全体のシナリオ・ストーリーを書いてください。特に初心者は質問が XY 問題になりがちなので。 > 以後、気を付けたいと思います。以後ではなくて、今やりましょう。質問欄を編集してきちんとやりたいことをすべて、ここに書かれていること以外は知り得ない第三者が読んで分かるように書きましょう

kentasuzuki_

2022/01/19 03:20

＞以後ではなくて、今やりましょう。承知しました。後程まとめたいと思いますので、しばらくお待ちいただければ幸いです。

退会済みユーザー

2022/01/19 03:55

> 後程まとめたいと思いますので、しばらくお待ちいただければ幸いです。ポストバックされた後サーバー側で DemandLinkButton_Click が動き出してから、その途中で JavaScript の confirm を出して DemandLinkButton_Click 内のコードの処理を止めるなんてことは不可能なので、そこはよく考えてやりたいことをまとめてください。

kentasuzuki_

2022/01/19 05:00

>ポストバックされた後サーバー側で DemandLinkButton_Click が動き出してから、その途中で JavaScript の confirm を出して DemandLinkButton_Click 内のコードの処理を止めるなんてことは不可能やはり不可能なのですね。実際にやりたいこととしては、そういうことでしたので、未解決ではないのですが、ベストアンサーとして付けさせていただきます。ありがとうございました。

退会済みユーザー

2022/01/19 06:30 編集

入力画面のテキストボックスなどにユーザーが入力した値を検証して、検証結果が OK ならサーバー側で申請・登録など必要な処理をしてからリダイレクト、NG なら再度入力画面に戻ってエラーメッセージを表示しユーザーに再入力を促すというのが普通のやり方です。検証結果 NG の場合でもユーザーが OK すれば受け付けるなどというパターンは絶対にありません。検証結果 NG なら問答無用で受け付けないようにしないとセキュリティが保てませんので。ユーザー入力の検証のやり方は決まっています。それ用に ASP.NET Web Forms アプリには数々の検証コントロールがあるので、それらを使うことを考えましょう。

退会済みユーザー

2022/01/19 06:42

上のコメントに、「ユーザー入力の検証のやり方は決まっています。それ用に ASP.NET Web Forms アプリには数々の検証コントロールがあるので、それらを使うことを考えましょう」と書きましたが、後でそのやり方を回答欄に追記しておきます。

kentasuzuki_

2022/01/19 10:23

ご丁寧にありがとうございました。今後の参考にさせていただきます。

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