0

モデルを使用していくつかのフィールドに入力するフォームがあります。

チェックボックスのリストがあり、すべてのチェックボックスをページが読み込まれたときの状態にリセットするリセット ボタンが必要です。現在のモデルでそのフォームを更新し、加えられた変更を効果的に消去するにはどうすればよいですか?

たとえば、チェックボックスが 3 つあり、ボックス 1 がオンで、ボックス 2 と 3 がオンになっていないとします。ユーザーは 2 と 3 にチェックを入れましたが、何を変更したか思い出せず、何も変更したくないので、フォームに残ったままチェックマークをデフォルトに戻すリセット ボタンを押したいと考えています。

いくつかの ajax が関与していると確信していますが、現在のモデルを使用してページをリロードする方法がわかりません。

これは可能ですか？

4

2 に答える 2

2

元の値をデータ属性に格納できます。例を参照してください。この方法では、変更前の元の値のコピーがあるため、サーバーに戻る必要はありません (読み込みインジケーターを表示したり、エラー ケースを処理したりする必要はありません)。

HTML

<input type="checkbox" checked data-was-checked="checked">Option 1</input>
<input type="checkbox">Option 2</input>
<input type="checkbox" checked data-was-checked="checked">Option 3</input>
<input type="checkbox">Option 4</input>
<button id="reset">Reset</button>

ジャバスクリプト

$("#reset").click(function () {
    $("[type=checkbox]").each(function (index, cb) {
        cb.checked = !!cb.getAttribute("data-was-checked");
    });
});
于 2013-01-28T23:23:48.400 に答える
1

1 つの方法は、Action Partial を使用してチェックボックスをレンダリングすることです。Action Partial は、(オプションの) Model または Viewbag を Partial View に返す ActionResult メソッドの呼び出しです。部分ビューは、渡されたロジックを使用して、チェックボックスを設定およびレンダリングする方法を決定できます。

<div id='divchkbox'>
    @Html.Action("/Tools/checkboxes/{id}")
</div>

リンクとイベント ハンドラ

     $(document).ready(function () {

          $('#resetbtn').click(function(){
               $('divchkbox').load("/Tools/checkboxes/{id}");
          }
   });
于 2013-01-28T23:26:02.340 に答える