ASP.NET ダイアログを表示したい

実現したいこと

・クライアント側はASP.net、サーバー側はC#で実装しています。

やりたいことは、
１．画面に登録ボタンを作成する。
２．ボタンを押下すると、「処理を続行しますか？」のダイアログが表示する。
３．ダイアログには、「はい」「いいえ」のボタンを付ける。
４．「はい」を押すと処理を継続し、「いいえ」を押すと処理を終了する。

処理のイメージは以下のような感じです。

該当のソースコード

実際に書いてみたソースコードです。

asp.net
1<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
2
3<!DOCTYPE html>
4
5<html xmlns="http://www.w3.org/1999/xhtml">
6<head runat="server">
7<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
8    <title></title>
9</head>
10<body>
11    <form id="form1" runat="server">        
12        <div id="div1" runat="server">
13            <asp:TextBox  ID="tbInputData" runat="server" onchange="toggleButton();" />
14            <br />
15            <asp:Button ID="btnRegister" runat="server" Text="登録" OnClientClick="return showDialog();" OnClick="btnRegister_Click" />
16        </div>
17
18        <div id="div2" runat="server">
19            <asp:Label ID="lblMsg" runat="server" Text="" />
20        </div>
21    </form>
22
23    <script>
24        function toggleButton() {
25            var tbInputData = document.getElementById('tbInputData');
26            var btnRegister = document.getElementById('btnRegister');
27
28            if (tbInputData.value !== '') {
29                btnRegister.disabled = false;
30            }
31            else {
32                btnRegister.disabled = true;
33            }
34        }
35
36        function showDialog() {
37            var result = confirm("処理を続行しますか？");
38            if (result) {
39                // 「はい」が押された場合はポストバックを許可する
40                return true;
41            } else {
42                // 「いいえ」が押された場合はポストバックをキャンセルする
43                return false;
44            }
45        }
46    </script>
47
48</body>
49</html>

c#
1using System;
2using System.Diagnostics;
3
4namespace WebApplication1
5{
6    public partial class WebForm1 : System.Web.UI.Page
7    {
8        protected void Page_Load(object sender, EventArgs e)
9        {
10            btnRegister.Enabled = !string.IsNullOrEmpty(tbInputData.Text);
11        }
12
13        protected void btnRegister_Click(object sender, EventArgs e)
14        {
15            Debug.WriteLine("★ 登録ボタンが押された！");
16
17            if (string.IsNullOrEmpty(tbInputData.Text))
18            {
19                return;
20            }
21            else
22            {
23                lblMsg.Text = "★★ 入力済！";
24                return;
25            }
26        }
27    }
28}

※実際に動かすと、こうなっています。（登録ボタンを２回押さないと、ダイアログが表示されない）

IEのキャッシュをクリアしても結果は同じでした。どこが間違っているのか教えていただけませんか？

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

・Visual Stadio 2019 (ASP.NET Webアプリケーション　.NET Framework)
・.NET Framework 4.7
・Windows10
・Microsoft edge (Internet Explorer モード (IE モード) で表示)

f_tonakai

2023/06/11 04:08

<asp:Button>タグで「Enabled="false"」を指定して入力有無で活性/非活性をjavaScriptで実装するように変更。ただ、ダイアログが表示されなくなってしまいました。 ASP.NETでダイアログを表示する方法は、通常ではどうやるのがベストなんでしょうか？

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

回答2件

自己解決

ダイアログ表示についてクライアント側で実装するのをやめて
サーバ側で（Page_Load時）に、
「Button1.Attributes["onclick"] = "ｘｘｘｘｘ";」で属性を追加することで
意図した動きにになりました。

投稿2023/06/11 12:01

f_tonakai

総合スコア15

実際に動かすと、こうなっています。（登録ボタンを２回押さないと、ダイアログが表示されない）

以下のコードで初期画面では Button の Enabled プロパティが false に設定されるので、

C#
1protected void Page_Load(object sender, EventArgs e)
2{
3    btnRegister.Enabled = !string.IsNullOrEmpty(tbInputData.Text);
4}

ASP.NET が Button を html にレンダリングする際、Button の OnClientClick プロパティの設定が無視されて以下のようになります。

html
1<input type="submit" 
2  name="btnRegister" 
3  value="登録" 
4  id="btnRegister" 
5  disabled="disabled" 
6  class="aspNetDisabled" />

なので、hello と入力して Button をクリックしても JavaScript の showDialog() メソッドは起動されず、即ポストバックがかかります。

ちなみに、Button の Enabled プロパティが true であれば (2 回目はそうなる)、Button の html コードは以下のようになって、クリックで showDialog() メソッドは起動されます。

html
1<input type="submit" 
2  name="btnRegister" 
3  value="登録" 
4  onclick="return showDialog();" 
5  id="btnRegister" />

「登録ボタンを２回押さないと、ダイアログが表示されない」と言うのはそういう理由です。

解決策は、

(1) Button を disable するような小細工は止めて、ASP.NET Web Forms に備わっているユーザー入力の検証機能を利用する、または

(2) Button の OnClientClick プロパティは使わないで、JavaScript で onclick 属性に return showDialog(); を設定する。

お勧めはもちろん (1) です。

【追記】

上の案 (1), (2) のサンプルを書いておきます。

.aspx.cs

C#
1using System;
2using System.Diagnostics;
3
4namespace WebForms1
5{
6    public partial class WebForm25 : System.Web.UI.Page
7    {        
8        protected void Page_Load(object sender, EventArgs e)
9        {
10            btnRegister.Enabled = !string.IsNullOrEmpty(tbInputData.Text);
11        }
12
13        protected void btnRegister_Click(object sender, EventArgs e)
14        {
15            Debug.WriteLine("★ 登録ボタンが押された！");
16
17            if (string.IsNullOrEmpty(tbInputData.Text))
18            {
19                return;
20            }
21            else
22            {
23                lblMsg.Text = "★★ 入力済！";
24                return;
25            }
26        }
27
28        protected void Button1_Click(object sender, EventArgs e)
29        {
30            if (Page.IsValid)
31            {
32                Label1.Text = $"入力 {TextBox1.Text} を受け付けました";
33            }
34        }
35    }
36}

.aspx

html
1<%@ Page Language="C#" AutoEventWireup="true"
2    CodeBehind="WebForm25.aspx.cs" Inherits="WebForms1.WebForm25" %>
3
4<!DOCTYPE html>
5
6<html xmlns="http://www.w3.org/1999/xhtml">
7<head runat="server">
8    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
9    <title></title>
10</head>
11<body>
12    <form id="form1" runat="server">
13        <h3>案 (2)</h3>
14        <p>Button の OnClientClick プロパティは使わないで、
15            JavaScript で onclick 属性にスクリプトを設定</p>
16
17        <div id="div1" runat="server">
18            <asp:TextBox  ID="tbInputData" runat="server" onchange="toggleButton();" />
19            <br />
20            <asp:Button ID="btnRegister" runat="server" Text="登録" 
21                OnClick="btnRegister_Click" />
22        </div>
23
24        <div id="div2" runat="server">
25            <asp:Label ID="lblMsg" runat="server" Text="" />
26        </div>
27
28        <hr />
29        <h3>案 (1)</h3>
30        <p>ASP.NET Web Forms に備わっているユーザー入力の検証機能を利用</p>
31
32        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
33        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" 
34            runat="server" 
35            ErrorMessage="入力は必須です" 
36            ForeColor="Red"
37            Display="Dynamic" 
38            ControlToValidate="TextBox1">
39        </asp:RequiredFieldValidator>
40        <br />
41        <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
42        <br />
43        <asp:Label ID="Label1" runat="server" ></asp:Label>
44
45    </form>
46
47    <script>
48        function toggleButton() {
49            var tbInputData = document.getElementById('tbInputData');
50            var btnRegister = document.getElementById('btnRegister');
51
52            if (tbInputData.value !== '') {
53                btnRegister.disabled = false;
54            }
55            else {
56                btnRegister.disabled = true;
57            }
58        }
59
60        function showDialog() {
61            var result = confirm("処理を続行しますか？");
62            if (result) {
63                // 「はい」が押された場合はポストバックを許可する
64                return true;
65            } else {
66                // 「いいえ」が押された場合はポストバックをキャンセルする
67                return false;
68            }
69        }
70
71        // Button の OnClientClick プロパティは使わないで、
72        // JavaScript で onclick 属性にスクリプトを設定
73        window.addEventListener('DOMContentLoaded', () => {
74            var btnRegister = document.getElementById('btnRegister');
75            btnRegister.addEventListener('click', (event) => {
76                let result = showDialog();
77                if (result == false) { event.preventDefault(); }
78            });
79        });
80    </script>
81</body>
82</html>

投稿2023/06/11 02:29

編集2023/06/11 06:32

退会済みユーザー

総合スコア0

f_tonakai

2023/06/11 02:44 編集

ありがとうございます。申し訳ありませんが、「ASP.NET Web Forms に備わっているユーザー入力の検証機能」というのはどういった機能でしょうか？調べてみてもよくわかりませんでした。サンプルコードがあれば提供して頂けるとありがたいです。あと、登録ボタンイベント（btnRegister_Click）で、本来はDBから値取得したり他にも処理があり、どうしてもC#側で処理をさせたいため、登録ボタンイベント（btnRegister_Click）を発生させたいです。

退会済みユーザー

2023/06/11 02:53

検証コントロールを使用した入力データのチェック https://atmarkit.itmedia.co.jp/fdotnet/aspandvs/aspandvs02/aspandvs02_04.html

退会済みユーザー

2023/06/11 04:16 編集

> どうしてもC#側で処理をさせたいため、登録ボタンイベント（btnRegister_Click）を発生させたいです。そのことと今回の問題/解決策とは関係ないです。

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

あなたの回答