【ASP.net】検証コントロールとAJAXコントロールの相性 |
JavaScript上から「Page_ClientValidate()」で呼び出している画面で
AJAXコントロールを併用していると
操作手順によってはAJAXが動作しないトラブルが発生したので
その対応方法について書いてみます。
【プログラム】
【Default.aspx】
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script type="text/javascript">
<!--
function check() {
var chk = Page_ClientValidate();
var result;
if (chk == true) {
result = confirm("コミットしますか?");
if (result == true) {
return true;
}
}
return false;
}
-->
</script>
</head>
<body >
<form id="form1" runat="server">
<div>
</div>
<br />
必須入力エラー用:<asp:TextBox ID="DP" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ControlToValidate="DP" ErrorMessage="必須です"
Display="None"></asp:RequiredFieldValidator>
<br />
<asp:ValidationSummary ID="ValidationSummary1" runat="server"
DisplayMode="List" ShowMessageBox="True" ShowSummary="False" />
<asp:Button ID="Button1" runat="server" on click="Button1_Click" Text="コミットボタン" />
<br />
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
AJAX用入力値:<asp:TextBox ID="TextBoxSample" runat="server" AutoPostBack="True"
ontextchanged="TextBoxSample_TextChanged" ></asp:TextBox>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
入力を再表示:<asp:Label ID="LabelResult" runat="server"></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="TextBoxSample" EventName="TextChanged" />
</Triggers>
</asp:UpdatePanel>
</form>
</body>
</html>
【Default.aspx.cs】
using System;
namespace WebApplication1 {
public partial class _Default : System.Web.UI.Page {
protected void Page_Load(object sender, EventArgs e) {
Button1.Attributes.Add("onclick", "return check();");
}
protected void Button1_Click(object sender, EventArgs e) {
}
protected void TextBoxSample_TextChanged(object sender, EventArgs e) {
LabelResult.Text = TextBoxSample.Text;
}
}
}
【操作手順】
1.必須入力エラー用テキストボックスをカラのままにして
コミットボタンをクリック。
わざと検証コントロールでエラーにする。
2.AJAX用入力値テキストボックスに文字を入力したあと、
必須入力エラー用テキストボックスをクリックし
フォーカスを移動させる。
3.通常ならAJAX用入力値テキストボックスのチェンジイベントによって
部分的にポストバックされるはずがポストバックされず
入力を再表示ラベルにAJAX用入力値テキストボックスの値が表示されない。
原因は手順1で検証エラーとさせている処理で
JavaScriptの変数「Page_BlockSubmit」がtrueに更新されているためです。
手順2で呼んでいる__doPostBackメソッドで
「Page_BlockSubmit」がtrueの場合は実際にサーバにポストバックしない仕様に
なっているため、上記のようなトラブルが発生していました。
今回は「Page_BlockSubmit」をコミットボタンクリック時に呼んでいる
JavaScriptの最後にfalseに更新することによって
検証エラーとなった場合でもAJAXが正しく動作するように対応しました。
【修正したDefault.aspx】
<script type="text/javascript">
<!--
function check() {
var chk = Page_ClientValidate();
var result;
if (chk == true) {
result = confirm("コミットしますか?");
if (result == true) {
return true;
}
}
Page_BlockSubmit = false;
return false;
}
-->
</script>