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

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

## 画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3340518/e6db826a-aad8-63da-e13e-b163e8fe6a25.png)

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

### 観点
<table>
  <thead>
    <tr>
      <th>Enter送信が無効である</th> <th>ConfirmOKで送信される</th> <th>Confirmキャンセルで送信されない</th>
    </tr>
  </thead>
  <tr>
    <td>○ or ✖</td> <td>○ or ✖</td> <td>○ or ✖</td>
  </tr>
</table>
答えは下のほうにあります。

```html: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>

```

```C#: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;

		}
	}
}
```
### 答え
<details><summary>答えはこちらをクリック</summary>

<table>
  <thead>
    <tr>
      <th>Enter入力が無効である</th> <th>ConfirmOKで送信される</th> <th>Confirmキャンセルで送信されない</th>
    </tr>
  </thead>
  <tr>
    <td>○</td> <td>✖</td> <td>○</td>
  </tr>
</table>
</details>

### なんで？
1. まず、Enterキーを無効化できた理由は`UseSubmitBehavior="false"`を追加したからです。
`UseSubmitBehavior`プロパティに`false`を指定することでブラウザの送信機能を使用するのではなく、 ASP.NETのポストバック機能を使うことができます。（デフォルトは`true`でブラウザの送信機能を使うためEnterキーで送信することになります）
参考：[Button.UseSubmitBehavior Property](https://learn.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.button.usesubmitbehavior?view=netframework-4.8.1)

1. 次にConfirmダイアログでOKを押しても送信処理されない理由です。理由はASP.NETのポストバック機能の実装のされ方にあります。これはGoogle開発者ツールでページを確認するとわかります。
```HTML:Google開発者ツール
<input type="button" name="Button1" value="submit" onclick="return Confirm();__doPostBack('Button1','')" id="Button1">
```
見ての通り、クライアント側のページに自動で実装されています。また、`OnClientClick`プロパティでクリック時の処理を自分で追加した際にはポストバック処理の前に追加されます。
**つまり、ポストバック処理をする前に`return`しているためサブミットされない（CS側のメソッドが呼ばれない）というわけです！**

[とほほのWWW入門 イベントハンドラ](https://www.tohoho-web.com/js/onevent.htm#:~:text=JavaScript%20%E3%81%AE%E6%96%87%E6%B3%95%E3%81%AB%E5%BE%93%E3%81%84%E3%80%81%E3%82%BB%E3%83%9F%E3%82%B3%E3%83%AD%E3%83%B3(%3B)%E3%81%A7%E5%8C%BA%E5%88%87%E3%82%8B%E3%81%93%E3%81%A8%E3%81%AB%E3%82%88%E3%82%8A%E3%80%81%E8%A4%87%E6%95%B0%E3%81%AE%E6%96%87%E3%82%92%E5%91%BC%E3%81%B3%E5%87%BA%E3%81%99%E3%81%93%E3%81%A8%E3%82%82%E5%8F%AF%E8%83%BD%E3%81%A7%E3%81%99%E3%80%82)
# 対応策
もう想像はつくと思いますが念のため載せときます:raised_hand:
```html: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キーを無効にする方法](https://qiita.com/yu_a4/items/94307837cc020bec3a14)
[StackOverFlow: Confirmation popup window for two asp:button controls when usesubmitbehaviour set to false](https://stackoverflow.com/questions/2140083/confirmation-popup-window-for-two-aspbutton-controls-when-usesubmitbehaviour-se)
[StackOverFlow: Confirm postback OnClientClick button ASP.NET](https://stackoverflow.com/questions/14058116/confirm-postback-onclientclick-button-asp-net)