0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

お題は不問!Qiita Engineer Festa 2023で記事投稿!

【ASP.NET C#】Enterキーでsubmitしたくない!!!あとConfirmダイアログも表示したい!!!

Posted at

問題

  • 1つのFormに複数の入力フィールド・サブミットボタンがある!
  • 特定のサブミットボタンはEnterキーでサブミットされないようにしたい!
  • Confirmで確認ダイアログも表示したい!
    (以下の画面とソースでは1つのFormに一つの入力フィールド・サブミットボタンにして簡略化してます)

画面

image.png

ソース

以下のソースコードではどんな挙動になるでしょうか?ぜひお考えください:writing_hand:

観点

Enter送信が無効である ConfirmOKで送信される Confirmキャンセルで送信されない
○ or ✖ ○ or ✖ ○ or ✖
答えは下のほうにあります。
WebForm1.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="demo04.WebForm1" %>
<!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><br />
		input text:<asp:Label ID="Label1" runat="server" Text=""></asp:Label><br />
		<asp:Button ID="Button1" runat="server" Text="submit" OnClick="Button1_Click" OnClientClick="return Confirm();" UseSubmitBehavior="false"/>
	</div>
	</form>
</body>
<script>
	function Confirm() {
		return confirm("Are you sure?")
	}
</script>
</html>

WebForm1.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

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

		protected void Button1_Click(object sender, EventArgs e)
		{
			Label1.Text = TextBox1.Text;

		}
	}
}

答え

答えはこちらをクリック
Enter入力が無効である ConfirmOKで送信される Confirmキャンセルで送信されない

なんで?

  1. まず、Enterキーを無効化できた理由はUseSubmitBehavior="false"を追加したからです。
    UseSubmitBehaviorプロパティにfalseを指定することでブラウザの送信機能を使用するのではなく、 ASP.NETのポストバック機能を使うことができます。(デフォルトはtrueでブラウザの送信機能を使うためEnterキーで送信することになります)
    参考:Button.UseSubmitBehavior Property

  2. 次にConfirmダイアログでOKを押しても送信処理されない理由です。理由はASP.NETのポストバック機能の実装のされ方にあります。これはGoogle開発者ツールでページを確認するとわかります。

Google開発者ツール
<input type="button" name="Button1" value="submit" onclick="return Confirm();__doPostBack('Button1','')" id="Button1">

見ての通り、クライアント側のページに自動で実装されています。また、OnClientClickプロパティでクリック時の処理を自分で追加した際にはポストバック処理の前に追加されます。
つまり、ポストバック処理をする前にreturnしているためサブミットされない(CS側のメソッドが呼ばれない)というわけです!

とほほのWWW入門 イベントハンドラ

対応策

もう想像はつくと思いますが念のため載せときます:raised_hand:

WebForm1.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="demo04.WebForm1" %>
<!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><br />
		input text:<asp:Label ID="Label1" runat="server" Text=""></asp:Label><br />
		<asp:Button ID="Button1" runat="server" Text="submit" OnClick="Button1_Click" OnClientClick="if (!Confirm()) return;" UseSubmitBehavior="false"/>
	</div>
	</form>
</body>
<script>
	function Confirm() {
		return confirm("Are you sure?")
	}
</script>
</html>

OnClientClick="if (!Confirm()) return;"を付与しました。
ifでラップしてあげて、Confirmダイアログでキャンセルがクリックされたときだけreturnするようにします:writing_hand:

参考:
Enterキーを無効にする方法
StackOverFlow: Confirmation popup window for two asp:button controls when usesubmitbehaviour set to false
StackOverFlow: Confirm postback OnClientClick button ASP.NET

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?