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 の最新バージョンをダウンロードしていることを確認してください。
コマンドを使用してください。次の名前空間を引用します:

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

Namespace="zoyobar.shared.panzer.ui.jqueryui"
TagPrefix="je" %>
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=""
>
/* ... */

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:パラメータ名=""

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





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
[, ]
[, 文字列 _order ] )
{
}
[WebMethod ( )]
public static object Fill ( int pageindex, int pagesize
, string realname, int age
, string id_order )
{
}
サーバーは、埋め込みデータとして次の形式の json データも返す必要があります。__success のデフォルトは true で、itemcount は省略できますが、pagecount ページ番号は計算されません。

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

{

"__success": 、
"rows": 、
"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

Update
削除
作成
スペースの理由により、上記の 3 つの項目は実行できません必要に応じて、http://code.google.com/p/zsharedcode/wiki/JQueryElementRepeaterDoc を参照してください。
行ステータスの説明
クライアントの JavaScript スクリプトには、4 つの行ステータスがあります。つまり、未変更 (変更されていない)、更新済み (更新済み)、挿入済み (新しく作成された行)、削除済み (行が削除されました)。並べ替えまたはデフォルトの並べ替え、asc 昇順、desc 降順。
テンプレートの設定
Repeater のさまざまなテンプレートで、Repeater で最終的に表示される HTML コードを設定できます。これらの HTML コードは完全かつ合法である必要があります。一重引用符を直接使用しないでください。エスケープすると、最終的な表示が異常になる可能性があります。
ItemTemplate は行テンプレートの 1 つであり、UpdatedItemTemplate またはInsertedItemTemplate が設定されていない場合、更新または挿入されたステータスの行も ItemTemplate に表示されます。 例:




コード

コードは次のとおりです: #{本名}

#{年齢}
>/* 編集および削除ボタン*/


UpdatedItemTemplate/InsertedItemTemplate
ItemTemplate とは異なり、UpdatedItemTemplate と InsertedItemTemplate は、それぞれステータスが更新された行と挿入された行を表示するために使用されます。主に、異なるスタイルを使用して異なるステータスの行を表示するために使用されますが、より単純な je を使用することもできます。 -class を使用して同じ効果を実現します。例:

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

#{id}
td>
#{本名}

#{年齢}



#{id}


#{本名}

#{年齢}
tr>



RemovedItemTemplate
FilterTemplate/NewItemTemplate
HeaderTemplate/FooterTemplate/EmptyTemplate
いっぱいスペースの都合上、必要に応じて、http://code.google.com/p/zsharedcode/wiki/JQueryElementRepeaterDoc を参照してください。
特別なバインディング
je-id
Use je-id="< ;フィールド名> " は、FilterTemplate および NewItemTemplate の行テンプレートまたは入力要素で使用できる特別な ID にバインドできます。EditItemTemplate では、je-id で指定された入力にこのフィールドの新しい値が含まれます。FilterTemplate では、指定された je-id 入力には、検索に使用されるフィールドの値が含まれます。これらのフィールドは、NewItemTemplate の FilterField プロパティに含まれる必要があります。指定された je-id の入力には、新たに追加された je-id の値が含まれます。 je-
je-="" を使用して、さまざまなテンプレートで使用できます。一般的に使用される動作は、beginedit で編集を開始、endit で編集をキャンセル、update で更新を保存、remove 削除、toggleelect で選択状態を切り替え、insert で新規作成、filter 検索、togglesort で並べ替えを切り替えます。このうち、最初の 5 つは行テンプレートでのみ使用できます。 、insert は NewItemTemplate で使用でき、filter は FilterTemplate で使用でき、togglesort は HeaderTemplate で使用できます。例:




コードをコピー


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

#{id} #{本名} #{年齢}

;
編集
削除
🎜>

#{id}
;



🎜>
キャンセル
保存


< ;/EditItemTemplate>


ソートを切り替えるフィールドを示すパラメーターも指定する必要があることに注意してください。このフィールドは SortField に設定されています。たとえば、 je-onclick="togglesort,realname" です。
je-class
特別なスタイルをイベントにバインドします。各テンプレートで je-class を使用できます。一般的に使用されるスタイルには、{header} 表現 ui-widget-header、{active} は ui-state-active を意味します、{highlight} は ui-state-highlight を意味します、{disabled} は ui- を意味します。 state-disabled、{error} は ui-state-error を意味します、{default} は ui-state-default を意味します、{state} は行の状態を表します、{sort} は並べ替えの状態を表します。例:




コードをコピー


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

;
🎜>
シリアル番号
/* ... */


>


ここで {state} と {sort} の構文を説明する必要があります。{state[,[,[,]]]},{並べ替え,[, Style>]]]}。{state} の場合、特定の州のスタイルが指定されていない場合は、スタイル名の代わりに行の州名が使用されます (例: {state,,new-item })。未変更の行のスタイルが指定されていないため、行のステータスが変更されていない場合は、未変更が返されます。並べ替えスタイルが指定されていない場合は、スタイル名の代わりにソートされたステータスが使用されます。
je-checked/selected/readonly
EditItemTemplate select で je-selected を使用できるかどうかを示すには、ItemTemplate で je-checked="selected" を使用します。要素、例:

コードをコピーします


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

🎜> je-checked="selected" je-onclick="toggleselect" /> #{ id}

je-value= を使用しますFilterTemplate " を使用して、初期化された検索条件をバインドします。
je-
任意のテンプレートで je-="=;" を使用して jQueryUI プラグインを生成しますが、現在は je-button と je-datepicker のみをサポートしています。例:




コードをコピーします

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

> je-datepicker="dateFormat='yy-mm-dd';"

value="#{誕生日}" /> ;

je-button="label='編集';icons={ プライマリ: 'ui-icon-pencil' };" "beginedit">

je-button="label='delete';icons={primary: 'ui-icon-trash' };" >je-onclick ="削除">

>属性設定 jQueryUI プラグインのプロパティと一致しており、http://jqueryui.com を参照できます。リピーターが配置される要素。e イベント関連のデータが含まれます。
PreUpdate、Updated は更新前後のイベント、PreRemove、Removed は削除前後のイベント、PreInsert、Insert は新規作成前後のイベントです。これらのイベントの e パラメータには、関連する操作が現在含まれている行を示す row 属性が含まれており、Updated、Removed、および Inserted の e には、実行が成功したかどうかを示す isSuccess も含まれています。例:




コードをコピー


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

/* ... */
PreUpdate="
function(tag, e){
if(e.row.realname == '' || e.row.age == '' || e.row.birthday == ''){
$('#message').text('お願いします情報を完全に入力してください');
return false;
}
}
" PreInsert="
function(tag, e){
if(e.row.realname = = '' || e.row.age == '' || e.row.birthday == ''){
$('#message').text('情報をすべて入力してください');
return false;
}
}
" PreRemove="
function(tag, e){
if(!confirm('削除するかどうか' e.row.realname) ){
return false;
}
}
" Updated="
function(tag, e){
$('#message').text('Update' e .row.realname (e.isSuccess ? '成功' : '失敗'));
}
" Inserted="
function(tag, e){
$('#message') .text( 'New' e.row.realname (e.isSuccess ? 'Success' : 'Failure'));
}
" Removed="
function(tag, e){
$(' #message').text('Delete' e.row.realname (e.isSuccess ? 'Success' : 'Failure'));
}
">
/* .. . */

PreFill、充填前後の充填イベント、PreExecute、操作の実行前後の実行イベント、PreCustom、実行前後のカスタム イベントカスタム操作、パラメーター e カスタム操作の名前を表す command 属性が含まれます。 PreSubStep および SubStepped は、配布操作の実行前後のイベントです。パラメーター e には、項目の合計数を表す count 属性と completed 属性が含まれます。
Navigable ナビゲーションの可用性が変化すると、パラメータ e には前のページがあるかどうかを示す prev 属性と、次のページがあるかどうかを示す next 属性が含まれます。操作がブロックされたときのイベント。
。

クライアントメソッド

スペースの都合上、この項目をすべてリストすることはできません。必要に応じて、http://code.google.com/p/zsharedcode/wiki/ を参照してください。 JQueryElementRepeaterDoc.

サンプル コードのダウンロード: http://zsharedcode.googlecode.com/files/JQueryElementTest.rar.

実際のプロセスのデモ: http://www.tudou.com/programs/view/GQeh0ZIJ0RY/、全画面で見ることをお勧めします。

panzer オープン ソース プロジェクト http://zsharedcode.googlecode.com/ へようこそ。このプロジェクトには、さまざまな js および jQuery スクリプトを実行する WebBrowser を制御する IEBrowser と、記録関数および jQueryUI の Asp.net コントロール JQueryElement が含まれています。