ホーム > ASP.NET, プログラミング, モバイル > ASP.NET WebFormでjQueryMobileを利用すると、jQuery.Validationと相性が悪すぎる。

ASP.NET WebFormでjQueryMobileを利用すると、jQuery.Validationと相性が悪すぎる。


ASP.NET WebFormでjQuery Mobileのページを作っていて、ハマったのでメモを残しておきます。

runat=”server”なFormを作らない=コードビハインド作れない=Postback使えない

いきなりWebFormを否定しています。jQuery Validationはformに対して設定するわけだけれど、MasterPageなんかでContentPlaceHolderをrunat=”server”なFormで囲われていると、ページごとにValidationが設定できなくて困っちゃうんですよね。

まずMasterPaceからformを消してしまいます。この時点で、コードビハインドが使えなくなるので、サーバーコントロールはもとより、PostBackやViewStateといったWebFormのプログラミングモデルはほとんど使えなくなります。実際スクリプトやCSSの参照にMasterPageを使いたいだけで、それがなかったらクライアント側はASPXでなくHTMLでもいいんですよね。サーバー側コードを動かす場合はすべてJavascript経由でWebサービスに頼ることになります。

<body>
<!-- <form runat="server" id="form1"> –>
<div>
<asp:ContentPlaceHolder ID="Contents" runat="server">
</asp:ContentPlaceHolder>
</div>
<!-- </form> –>
</body>
 
 

Formはdata-role=”page”の下に、データバインドはuniqueNameを追加する。

jQUeryValidationを動作させるにはform要素が必要になるんだけれど、jQueryMobileのページ遷移の特性上、data-role=”page”以下に配置された要素でないと、2ページ目以降は無視されてしまいます。なので、コンテンツページ側では、data-role=”page”以下に何もしないValidationのためのダミーFormを追加します。input要素にはclassにjQuery Validationの検証属性を設定します。

ここで注意したい点として、knockoutを併用する場合はデータバインド時にuniqueNameバインディングを追加してあげる事です。jQuery Validationは対象要素のidを必要とするので、このバインディングがないとエラーの表示時に混乱してしまうようです。

(あっ、、、あれ???uniqueNameバインディングは、複数ページに渡ってユニークな名前にしてくれるのかな???すべての検証が必要なコントロールに名前を付けなきゃいけないんだとしたら嫌だな。)

<asp:Content ID="Content1" ContentPlaceHolderID="Contents" runat="server">
<div data-role="page" id="FindCustomerView">
<form action="" id="FindCustomerViewForm">
<header data-role="header" data-position="fixed">
<h1>検証のテスト</h1>
</header>
<div data-role="content">
<div><label>名前</label>
<input type="text" class="required"
data-bind="text: name, uniqueName: true"/></div>
<div><label>メールアドレス</label>
<input type="email" class="required email"
data-bind="text: email, uniqueName: true"/></div>
<div><label>年齢</label>
<input type="number" class="number"
data-bind="text: age, uniqueName: true"/></div>
<input type="button" value="確定"/>
</div>
</form>
</div>
</asp:Content>

Javascript側では、viewModelを適応させるついでに、pageinitのタイミングで先程追加したFormに対してValidationを追加してあげます。
(function ($) {
karua.viewModel.topViewModel = function () {
this.name = ko.observable("");
this.email = ko.observable("");
this.age = ko.observable(0);
this.find = function () {
};
};
var viewModel;
$(document).on("pageinit", "#FindCustomerView", function (e) {
viewModel = new karua.viewModel.topViewModel();
ko.applyBindings(viewModel, document.getElementById("FindCustomerView"));
$("#FindCustomerViewForm").validate({ onsubmit: false });
});
})($);

そもそも

まぁモバイルでの値検証を、単純にデスクトップを想定した場合と同じUXでやっていいのか?という議論はまずあるだろうけれどね。

広告
  1. まだコメントはありません。
  1. No trackbacks yet.

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。