問題
- １つのFormに複数の入力フィールド・サブミットボタンがある！
- 特定のサブミットボタンはEnterキーでサブミットされないようにしたい！
- Confirmで確認ダイアログも表示したい！
（以下の画面とソースでは１つのFormに一つの入力フィールド・サブミットボタンにして簡略化してます）
画面
ソース
以下のソースコードではどんな挙動になるでしょうか？ぜひお考えください
観点
| Enter送信が無効である | ConfirmOKで送信される | Confirmキャンセルで送信されない |
|---|---|---|
| ○ or ✖ | ○ or ✖ | ○ or ✖ |
<%@ 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>
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キャンセルで送信されない |
|---|---|---|
| ○ | ✖ | ○ |
なんで？
-
まず、Enterキーを無効化できた理由は
UseSubmitBehavior="false"を追加したからです。
UseSubmitBehaviorプロパティにfalseを指定することでブラウザの送信機能を使用するのではなく、 ASP.NETのポストバック機能を使うことができます。（デフォルトはtrueでブラウザの送信機能を使うためEnterキーで送信することになります）
参考：Button.UseSubmitBehavior Property -
次にConfirmダイアログでOKを押しても送信処理されない理由です。理由はASP.NETのポストバック機能の実装のされ方にあります。これはGoogle開発者ツールでページを確認するとわかります。
<input type="button" name="Button1" value="submit" onclick="return Confirm();__doPostBack('Button1','')" id="Button1">
見ての通り、クライアント側のページに自動で実装されています。また、OnClientClickプロパティでクリック時の処理を自分で追加した際にはポストバック処理の前に追加されます。
つまり、ポストバック処理をする前にreturnしているためサブミットされない（CS側のメソッドが呼ばれない）というわけです！
対応策
もう想像はつくと思いますが念のため載せときます
<%@ 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するようにします
参考：
Enterキーを無効にする方法
StackOverFlow: Confirmation popup window for two asp:button controls when usesubmitbehaviour set to false
StackOverFlow: Confirm postback OnClientClick button ASP.NET