DevExpress社のASP.NETを利用して、入力チェック処理を実装する場合、クライアント側、サーバー側の双方で実装が可能です。
個人的には、クライアント側(javascript)が苦手なので、全てサーバー側(c#)でチェックをしたいところですが、全てサーバー側(c#)で実装する場合は、無駄にサーバーへのリクエストが多くなるので、双方でチェックを実装しようとしたのですが…
いつも使用しているWinFormsと違い、ASP.NETは、結構難しく、色々試してやっとこさ実装方法が分かったので、備忘録として残しておきます。
注意点は以下の通りです。
- クライアント側は、ValidationSettingsを利用し、必須チェックや文字チェックを行う
- ValidationSettingsでは、ValidationGroupを設定しておく
- クライアント側のイベントが無視されるので、ボタンのイベントであるOnClickは使用しない。
- コールバック用のパネル（ASPxCallbackPanel）を用意する
- サーバー側の処理を実行するため、PerformCallbackメソッドを使用した関数を用意する。
- ボタンがクリックされたら、クライアントで上記関数を呼び出す。
以下、設定例です。必要な個所のみに抜粋しています。
LoginPage.aspx
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
<head runat="server"> <script type="text/javascript" language="javascript"> function onValidate(s, e) { if (ASPxClientEdit.ValidateGroup('loginGroup')) { callbackPanel.PerformCallback(''); } } </script> </head> <body oncontextmenu="return false;"> <form id="form1" runat="server"> <dx:ASPxCallbackPanel ID="ASPxCallbackPanel" runat="server" HideContentOnCallback="False" ClientInstanceName="callbackPanel" OnCallback="OnClickButtonLogin"> <PanelCollection> <dx:PanelContent ID="PanelContent3" runat="server"> <dx:ASPxFormLayout ID="ASPxFormLayout1" runat="server" EnableTheming="True" Theme="iOS" CssClass="bodyContent" ClientInstanceName="clientCallbackPanel"> <Items> <dx:LayoutGroup Caption="ログイン" GroupBoxDecoration="HeadingLine" UseDefaultPaddings="false" Name="RootGroup"> <Items> <dx:LayoutItem Caption="ユーザーID" ColSpan="1"> <LayoutItemNestedControlCollection> <dx:LayoutItemNestedControlContainer runat="server"> <dx:ASPxTextBox ID="TextUserId" runat="server" Theme="iOS" Width="100%" OnValidation="OnValidationUserId" AutoPostBack="false"> <ValidationSettings ErrorTextPosition="Bottom" ErrorText="" ValidationGroup="loginGroup"> <RequiredField IsRequired="True" ErrorText="ユーザーIDは必須です" /> <RegularExpression ValidationExpression="[0-9a-zA-Z]+" ErrorText="ユーザーIDは半角英数字で入力してください"/> </ValidationSettings> </dx:ASPxTextBox> </dx:LayoutItemNestedControlContainer> </LayoutItemNestedControlCollection> <HelpTextSettings Position="Top" /> </dx:LayoutItem> <dx:LayoutItem Caption="パスワード" ColSpan="1"> <LayoutItemNestedControlCollection> <dx:LayoutItemNestedControlContainer runat="server"> <dx:ASPxTextBox ID="TextUserPass" runat="server" ClientInstanceName="textUserPass" Password="True" Theme="iOS" Width="100%"> <ValidationSettings ErrorTextPosition="Bottom" ErrorText="" ValidationGroup="loginGroup"> <RequiredField IsRequired="True" ErrorText="パスワードは必須です" /> <RegularExpression ValidationExpression="[0-9a-zA-Z]{8}" ErrorText="パスワードは半角英数字8文字以上で入力してください"/> </ValidationSettings> </dx:ASPxTextBox> </dx:LayoutItemNestedControlContainer> </LayoutItemNestedControlCollection> </dx:LayoutItem> <dx:LayoutItem Caption="" ColSpan="1" ShowCaption="False"> <LayoutItemNestedControlCollection> <dx:LayoutItemNestedControlContainer runat="server"> <dx:ASPxCheckBox ID="CheckPassDisp" runat="server" CheckState="Unchecked" Text="パスワードの表示" Theme="iOS"> <ClientSideEvents CheckedChanged="onCheckedChanged" /> </dx:ASPxCheckBox> </dx:LayoutItemNestedControlContainer> </LayoutItemNestedControlCollection> <CaptionSettings Location="Left" /> </dx:LayoutItem> <dx:LayoutItem Caption="" ColSpan="1" Name="ErrorMessage" ShowCaption="False" > <LayoutItemNestedControlCollection> <dx:LayoutItemNestedControlContainer runat="server"> <dx:ASPxLabel ID="LabelErrorMessage" runat="server" Theme="iOS"> </dx:ASPxLabel> </dx:LayoutItemNestedControlContainer> </LayoutItemNestedControlCollection> <CaptionStyle CssClass="noCaption"> </CaptionStyle> </dx:LayoutItem> <dx:LayoutItem Caption="" ColSpan="1" HorizontalAlign="Center"> <LayoutItemNestedControlCollection> <dx:LayoutItemNestedControlContainer runat="server"> <dx:ASPxButton ID="ButtonLogin" runat="server" AutoPostBack="False" Text="ログイン" Theme="iOS"> <ClientSideEvents Click="onValidate" /> </dx:ASPxButton> </dx:LayoutItemNestedControlContainer> </LayoutItemNestedControlCollection> </dx:LayoutItem> </Items> <SettingsItemCaptions Location="Top" /> </dx:LayoutGroup> </Items> </dx:ASPxFormLayout> </dx:PanelContent> </PanelCollection> </dx:ASPxCallbackPanel> </form> </body> </html> |
LoginPage.aspx.cs
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
public partial class LoginPage : System.Web.UI.Page { protected void OnClickButtonLogin(object sender, CallbackEventArgsBase e) { var userId = this.TextUserId.Value + ""; var userPass = this.TextUserPass.Value + ""; if (userPass == "aaaa123456") { //Response.Redirect()は例外が発生します。 //ASPxWebControl.RedirectOnCallback()を使用してください。 //this.Response.Redirect("ReportPage1.aspx"); ASPxWebControl.RedirectOnCallback("ReportPage1.aspx"); } else { this.LabelErrorMessage.EncodeHtml = false; this.LabelErrorMessage.Text = this.CreateErrorMessage("ユーザーID又はパスワードが違います"); } } } |
以下、クライアント側のチェック結果の画面イメージです。クライアントのエラーがなくなるまで、サーバーへのリクエストが発生しません。
以下、サーバー側のチェック結果の画面イメージです。
