asp.net マスターするには 30 分、更新なし

サンプルコードのダウンロード: /201109/yuanma/JQueryElementTest.rar
この記事の内容は次のとおりです:
* 準備
* 主な機能
* バインディングフィールド
* バインド属性
* 基本設定
* ページングの設定
* フィールドの設定
* 呼び出されるサーバー メソッドの設定
* 要求/返信データ形式
* 入力/検索
* 更新
* 削除
* 新規
* 行ステータスの説明
* ステータスの説明の並べ替え
* テンプレートの設定
* itemTemplate
* UpdatedItemTemplate/InsertedItemTemplate
* RemovedItemTemplate
* EditItemTemplate
* FilterTemplate/NewItemTemplate
* HeaderTemplate/FooterTemplate/EmptyTemplate
* 特殊バインディング
* je-id
* je-
* je-class
* je-checked/selected/readonly
* je-value
* je-
* イベント
* クライアントメソッド
リピーターのイメージ例:

準備
http://code.google.com/p/zsharedcode/wiki/Download から JQueryElement の最新バージョンをダウンロードしていることを確認してください。
コマンドを使用してください。次の名前空間を引用します:

コードをコピー コードは次のとおりです:

<% @ Register Assembly="zoyobar .shared.panzer.JQueryElement"
Namespace="zoyobar.shared.panzer.ui.jqueryui"
TagPrefix="je" %>
<%@ Register Assembly= "zoyobar.shared.panzer .JQueryElement"
Namespace="zoyobar.shared.panzer.web.jqueryui"
TagPrefix="je" %>

名前空間に加えてまた、jQueryUI スクリプトを参照する必要があります。スタイルは http://jqueryui.com からダウンロードできます。例:

コードをコピー コードは次のとおりです:

主な関数
フィールドのバインド
行テンプレートでは、 #{<フィールド名>} の形式を使用できます。フィールドをバインドします。例:

コードをコピー コードは次のとおりです。

#{id}
#{realname}


フィールドは、

コードをコピーします コードは次のとおりです:

#{id} ;

#{realname}
#{age}


属性のバインド属性
はすべてのテンプレートにバインドでき、構文は @{} です。例:
@{pageindex}/@{pagecount}, @{itemcount} 記事

基本設定
Repeater の Selector 属性は、セレクターとして使用されます。記述方法については、http://jquery.com を参照してください。セレクターに対応する要素は、ページ上の最後のリピーターとして表示されます。例:




をコピーします。コード

コードは次のとおりです。 Selector="'#list'">

/ * ... */

IsVariable 属性を True に設定すると、ClientID と同じ名前の JavaScript 変数がクライアント上で生成されます。例:

コードをコピー

コードは次のとおりです:

IsVariable="true">
text/javascript">
$(function () {
studentRepeater.__repeater('fill');
});

このページでは ClientID と ID が同じであるため、studentRepeater を通じてリピーターにアクセスできます。さらに、JQueryScript コントロールを使用し、インライン構文 [%id:studentRepeater%] を使用して、ページが異なる ClientID と ID を持つようにすることもできます。 ID はリピーターにアクセスすることもできます。
ページングを設定します。
Repeater の PageSize プロパティを使用して、PageIndex の初期ページ番号を設定します。
フィールドを設定します
Repeater の Field プロパティは、JavaScript 文字列配列の形式で特定のフィールドを示します。['id'、'realname'、'age'] の場合、Field 属性は次のとおりです。設定されていない場合は、最初に入力されたデータによって決まりますが、データがないと作成できません。
FilterField は、検索に使用されるフィールドを表し、FilterFieldDefault がデフォルト値である場合のデフォルト値です。検索フィールドの値は null または '' です。例: ['', ' ', 0]。
SortField は、['id'] などの並べ替えに関連するフィールドを表します。呼び出されるサイドメソッド
サーバーサイドメソッドの呼び出し方法はAsyncを使用して設定できます。 WebService を呼び出す場合は、MethodNameを設定する必要があります。通常のashxなどの汎用ハンドラーの場合、MethodNameは次のようになります。例:

コードをコピー コードは次のようになります:

FillAsync-Url=""
UpdateAsync-Url="<メソッドのアドレスを更新>"
UpdateAsync- MethodName="<メソッド名を更新>"
InsertAsync-Url="<新しいメソッドのアドレス>"
InsertAsync-MethodName="<新しいメソッド名>"メソッド アドレスの削除>"
RemoveAsync-MethodName="<メソッド名削除>"
>
/* ... */

< je:Repeater ID="studentRepeater" runat="server"
FillAsync-Url="Student.aspx"
FillAsync-MethodName="Fill"
UpdateAsync-Url="Student.aspx"
UpdateAsync-MethodName="Update"
InsertAsync-Url="Student .aspx"
InsertAsync-MethodName="Insert"
RemoveAsync-Url="Student.aspx"
RemoveAsync-MethodName="削除"
>
/* ... */



メソッドにさらにパラメータを渡す必要がある場合は、次の形式:

コードをコピー

コードは次のとおりです: " MethodName="

;je:パラメータ名="<パラメータ名1>"

タイプ="式"
値="<値1>"
デフォルト="<デフォルト値1>"
"
タイプ="セレクタ"
値="<セレクタ2>"
デフォルト="<デフォルト値2>" >
/* ... */



< FillAsync Url="Student.aspx" MethodName="Fill">

Type="Expression"
Value="website "
Default="'-'" />
Type="Selector" <🎜; >Value="'#year'"
デフォルト ="2011" />
/* ... */
;/je:リピーター>


パラメータを追加すると、より多くのパラメータを渡すことができます。 Name がパラメータ名で Type が Expression の場合、この例では Value="website" という JavaScript 変数の値を取得することを意味します。もちろん、Value="'www.google.com'" や Value="100" などの定数として設定することもできます。Type が Selector の場合、Value の JavaScript 式が How として使用されます。セレクターの記述方法は http://jquery.com を参照してください。 Default の場合は、セレクターに対応する要素の値がデフォルト値として使用されます。パラメータが null または '' の場合、デフォルトの値が使用されます。
リクエスト/リターン データの形式
入力/検索
WebService を例に挙げると、サーバーは受信します。以下のパラメータ、pageindex ページ番号、pagesize 各ページに含まれるデータの数、フィールドと同名のパラメータ、または Parameter で追加したパラメータを検索条件として受け取ることも、フィールドパラメータを < の形式で受け取ることもできます。ソート用のフィールド名>_order ソートパラメータには 3 つの値があります。「」はソートなし、「asc」は昇順、「desc」は降順:
[WebMethod ( )]
public static object <メソッド名> ; ( int pageindex, int pagesize
[, <文字列などの n を入力>< n の検索に使用されるフィールドまたは条件名>]
[, 文字列 _order ] )
{
}
[WebMethod ( )]
public static object Fill ( int pageindex, int pagesize
, string realname, int age
, string id_order )
{
}
サーバーは、埋め込みデータとして次の形式の json データも返す必要があります。__success のデフォルトは true で、itemcount は省略できますが、pagecount ページ番号は計算されません。

コードをコピー コードは次のとおりです:

{

"__success": <成功を示すブール値、 true または false>、
"rows": <現在のページの行データを含む Javascript 配列>、
"itemcount": <合計行数>
}
{
"__success": true,
"rows":
[
{ "id": 1, " realname": "jack", "age": 20 },
{ "id": 2, "realname": "tom", "age": 21 }
],
"itemcount": 120
}


.NET 4.0 では、匿名を使用できます。

コードをコピー コードは次のとおりです:

[ WebMethod ( )]
public static object Fill ( /* パラメータ */ )
{
// ...
List