フォームの保存
次に、saveContact という名前のクライアント側 JavaScript 関数を HomePage.cls に追加します。フォームの [Save] ボタンをクリックすると、この関数が呼び出されます。
以下の関数を、ページの XDATA Contents ブロックの後の任意の位置に配置します。
/// save contact model to database
ClientMethod saveContact() [ Language = javascript ]
{
// validate and save form
var form = zenPage.getComponentById('contactForm');
form.save();
var table=zenPage.getComponentById('contactTable');
//refresh data in contact table
table.executeQuery();
}
この関数は、以下の 2 つのタスクを実行します。
-
form コンポーネントの save メソッドを呼び出します。このメソッドは、dataController コンポーネントの save メソッドを呼び出します。このメソッドは、ContactModel の %OnSaveSource メソッドと %OnStoreModel メソッドを使用してフォーム・データをデータベースに保存します。
-
データベース・データを更新すると、メソッドは tablePane コンポーネントの executeQuery メソッドを呼び出して tablePane データを更新します。
フォーム・データをデータベースに保存するには、他に 2 つの方法があります。
-
saveContact 関数は、dataController の save メソッドを直接呼び出すことができます。この方法の欠点は、form コンポーネントの検証ロジックが省略されることです。この後のページでは、この検証ロジックを使用してフォームの検証を行います。
-
標準のフォーム送信メソッドをコード化し、フォームに送信ボタンを配置します。この方法では、HTTP POST を使用してページからサーバにフォーム・データが返送されます。Zen は、フォーム・コントロールの値を渡して、%OnSubmit を呼び出します。フォーム処理ロジックは、%OnSubmit に配置します。他の 2 つの方法とは異なり、この方法の場合、[Submit] ボタンをクリックするたびにページが更新されます。
form や dataController の save メソッドを使用してフォーム・データを保存する方法の詳細は、"Zen コンポーネントの使用法" の "モデル・ビュー・コントローラ" を参照してください。
標準のフォームの Submit を使用してフォーム・データを保存する方法の詳細は、"Zen コンポーネントの使用法" の "Zen のフォーム" を参照してください。