context.AddResponse の Method と引数
context.AddResponse の第 1 引数 method には、公式マニュアルに載っているもの以外にも多くの値が使えます。実体はブラウザ側 JavaScript の $p.setByJsonElement にある switch 文で、Href(画面遷移)、WindowScrollTop(スクロール)、Trigger(イベント発火)なども使えます。このページでは Method ごとの動作と引数の指定方法を一覧にします。
仕組み
引数は 4 つ
マニュアルでは context.AddResponse(method, target, value) となっていますが、実装では第 4 引数 options まであります。method 以外は既定値 null なので省略できます。
public void AddResponse(
string method,
string target = null,
object value = null,
string options = null)
{
ResponseCollection.Add(
method: method,
target: target,
value: value,
options: options);
}指定のパターンは次の 4 通りです。
context.AddResponse(method)context.AddResponse(method, target)context.AddResponse(method, target, value)(マニュアル記載)context.AddResponse(method, target, value, options)
ブラウザ側で処理される
AddResponse で渡した値は ResponseCollection に追加され、最終的に JSON にシリアライズされてブラウザへ送られます(value が null なら空文字列になります)。ブラウザ側で受け取るのは _dispatch.js の $p.setByJsonElement で、Method の値で switch しています。
図を読み込み中…
$p.setByJsonElement = function (jsonElement, data, $control) {
var method = jsonElement.Method;
var target = jsonElement.Target;
var value = jsonElement.Value;
var options = jsonElement.Options !== undefined
? JSON.parse(jsonElement.Options)
: {};
switch (method) {
case 'Html':
$(target).html(value);
break;
// ...(以下、Method ごとの case が続く)
}
}Method 早見表
[未使用] はその引数を使わないことを表します。options はどの Method でも未使用です(SetValue のみ内部で参照します)。
| method | target | value | 実装 | 備考 |
|---|---|---|---|---|
| Html | <セレクタ> | <任意の文字列> | $(target).html(value); | |
| ReplaceAll | <セレクタ> | <任意の文字列> | $(value).replaceAll(target); | マニュアル記載あり |
| Message | #Message | JSON.stringify({Css: <メッセージタイプ>, Text: <任意のメッセージ>}) | $p.setMessage(target, value); | $p.setMessage を参照 |
| Href | 空文字列 | <遷移先 URL> | $p.transition(value); | 内部で location.href = value |
| PushState | <任意のキー文字列> | <スタック先 URL> | history.pushState(target, '', value); | |
| Set | <項目物理名> または <セレクタ> | <任意の文字列> | $p.set($p.getControl(target), value); | マニュアル記載あり |
| SetData | <セレクタ> | [未使用] | $p.setData($(target)); | 通常は使わない |
| SetFormData | <キー> | <値> | data[target] = value; | 通常は使わない |
| SetMemory | <任意のキー文字列> | <任意の値> | $p[target] = value; | 関数は渡せない。下記を参照 |
| Append | <セレクタ> | <任意の文字列> | $(target).append(value); | |
| Prepend | <セレクタ> | <任意の文字列> | $(target).prepend(value); | |
| After | <セレクタ> | <任意の文字列> | $(target).after(value); | 下記の注意を参照 |
| Before | <セレクタ> | <任意の文字列> | $(target).before(value); | 下記の注意を参照 |
| InsertText | <セレクタ> | <任意の文字列> | $p.insertText($(target), value); | 説明項目を対象にする前提 |
| Remove | <セレクタ> | [未使用] | $(target).remove(); | |
| Attr | <セレクタ> | JSON.stringify({Name: <属性名>, Value: <属性値>}) | $(target).attr(json.Name, json.Value); | |
| RemoveAttr | <セレクタ> | <属性名> | $(target).removeAttr(value); | |
| Css | <セレクタ> | JSON.stringify({Name: <プロパティ>, Value: <値>}) | $(target).css(json.Name, json.Value); | |
| Focus | <セレクタ> または 空文字列 | [未使用] | $(target).focus(); | 空文字列なら操作したコントロールにフォーカス |
| SetValue | <セレクタ> | <任意の文字列> | $p.setValue($(target), value); | 送信データには反映しない |
| ClearFormData | <セレクタ> | <種別> | $p.clearData(target, data, value); | 通常は使わない |
| CloseDialog | <モーダルのセレクタ> | [未使用] | $(target).dialog('close'); | target 省略時は全ダイアログ |
| Paging | <セレクタ> | [未使用] | $p.paging(target); | 通常は使わない |
| Toggle | <セレクタ> | 1 または 0 | $(target).toggle(value === '1'); | true/false は不可 |
| Trigger | <セレクタ> | <イベント名> | $(target).trigger(value); | |
| Invoke | <関数名($p のキー)> | <引数> | $p[target](value); | 関数はスクリプト側で定義しておく |
| Events | <イベント名> | [未使用] | $p.execEvents(target, ''); | $p.events の関数を実行 |
| WindowScrollTop | 空文字列 | <スクロール量> | $(window).scrollTop(value); | |
| ScrollTop | <セレクタ> | <スクロール量> | $(target).scrollTop(value); | |
| LoadScroll | 空文字列 | [未使用] | $p.loadScroll(); | |
| FocusMainForm | 空文字列 | [未使用] | $p.focusMainForm(); | |
| Disabled | <セレクタ> | true または false | $(target).prop('disabled', value); | |
| Log | 空文字列 | <任意の文字列> | console.log(value); | context.Log と同じ働き |
Method ごとの詳細
DOM を書き換える(jQuery そのまま)
Html / ReplaceAll / Append / Prepend / After / Before / Remove / RemoveAttr / Focus / ScrollTop は、同名の jQuery メソッドをそのまま呼んでいます。
Html:targetの中身をvalueで書き換えます。ReplaceAll:targetの要素ごとvalueで置き換えます。Append/Prepend:targetの末尾 / 先頭にvalueを追加します。After/Before:targetの直後 / 直前に要素を追加します。Remove:targetを丸ごと削除します。
After / Before のセレクタ
$(target) が見つからないときは、$p.setByJson に渡されたコントロール($control)の前後に追加します(_dispatch.js)。$control が何になるかは呼び出し経路で決まり、ボタンなどの操作によるリクエストでは操作したコントロール、初回の画面表示(「画面表示の前」などで積んだレスポンス)では #MainForm です(HtmlScripts.cs)。一方、$control を渡さずに $p.ajax を呼ぶ経路もあり(一覧から編集画面をダイアログで開く処理など。gridevents.js)、そのレスポンスで存在しないセレクタを指定すると undefined に対して after / before を呼ぶことになり、例外が発生します。存在しないセレクタを指定したときに例外になるという報告はこの経路によるものです。意図しない位置への追加も避けるため、target には存在するセレクタを指定してください。
Attr と Css は value に JSON 文字列を渡す
Attr と Css は value を JSON.parse してから Name と Value を使います。オブジェクトではなく、シリアライズした文字列を渡します。
context.AddResponse('Css', '#SectionFields1', '{"Name":"display","Value":"none"}');Message
スクリプトの $p.setMessage を呼びます。
Href と PushState
Href は $control.addClass('no-send') で現在の画面内容をサーバーに送らないようにしたうえで、$p.transition(value) を呼びます。$p.transition の中身は location.href = url です(navigation.js)。サーバースクリプトから画面遷移させたいときに使えます。
PushState は history.pushState(target, '', value) を呼びます。
Set と SetValue の違い
Set:$p.getControl(target)で項目を探し、見つからなければ$(target)をそのまま使って$p.setで値をセットします。項目物理名でもセレクタでも指定できます。SetValue:$p.setValue($(target), value)のあと$p.hideField(target, options)を実行します。$p.setValueは要素の種類(checkbox / radio / textarea / select / span / time など)に応じて値を書き換えるだけで、$p.setDataを呼びません。つまりサーバーに送るデータには反映されません。表示名など、データ以外の表示を書き換えたいときに使います。$p.hideFieldは、$p.setValueで外れることがある項目の表示・非表示をoptions.Hideに従って戻す処理です。
SetData / SetFormData / ClearFormData
いずれもブラウザからサーバーへ送るデータ(data という連想配列)を操作するもので、通常は使いません。
SetData:$p.setData($(target))を呼び、要素の値をdataに詰めます(要素がnot-sendクラスを持つ場合は何もしません)。UI 操作や$p.setの裏で動いている関数です。SetFormData:data[target] = valueで、コントロールを介さず直接dataにセットします。ClearFormData:$p.clearDataを呼び、dataから該当データを削除(= 送信しないように)します。valueにstartsWithを指定すると前方一致、ignoreViewを指定するとViewで始まるキーを除外します。
SetMemory と Invoke
SetMemory は $p[target] = value で $p に値を保存します(_dispatch.js)。値はサーバーで JSON にシリアライズされて届くため、保存できるのは文字列・数値・真偽値やそれらを組み合わせたデータで、関数は渡せません。
Invoke は $p[target](value) で、$p にある関数を value を引数にして呼び出します(_dispatch.js)。呼び出す関数は、プリザンター本体の $p の関数か、テーブルのスクリプトなどで $p.myFunc = function (value) { ... }; のように定義しておいたものです。SetMemory で保存した値は、この関数の中から $p.キー名 で参照できます。
InsertText
$p.insertText を呼び、対象要素のカーソル位置に文字列を挿入して送信データにも反映します(markdown.js#L146-L158)。説明項目に文字列を追記するときに使います。
Toggle
$(target).toggle(value === '1') なので、表示するなら '1'、隠すならそれ以外('0' など)を渡します。true / false は直接指定できません。
context.AddResponse('Toggle', '#SectionFields1', '0'); // 隠す
context.AddResponse('Toggle', '#SectionFields1', '1'); // 表示するTrigger
$(target).trigger(value) で、任意の要素にイベントを発火させます。サーバースクリプトから選択肢一覧のモーダルを開いたり、一覧メニューを表示したりといった UI 操作ができます。
Events
$p.execEvents(target, '') を呼び、$p.events に登録されている関数を実行します(_event.js#L13-L29)。実行できるのは $p.events に入っている関数に限られます。
スクロール関連
WindowScrollTop: ウィンドウをvalueの位置までスクロールします。ScrollTop:targetの要素をvalueの位置までスクロールします。LoadScroll:$p.saveScrollで保存された位置($p.scrollX/$p.scrollY)へwindow.scrollします。画面の再ロード後に元の位置へ戻すためのもので、通常は使いません。Paging: 一覧などで下端までスクロールしたときに次のデータを読み込む処理($p.paging)です。通常は使いません。
その他
CloseDialog:$p.clearMessage()のあと、targetが指定されていてダイアログならそれを、未指定なら開いているダイアログをすべて閉じます。FocusMainForm: 編集画面の先頭の入力項目にフォーカスします。Disabled:$(target).prop('disabled', value)でdisabledを付けたり外したりします。Log:valueがあればブラウザのコンソールに出力します。