ASP.NET

@Html.CheckBoxForの値をRequest.Form.Get()で取得する

@Html.CheckBoxForの値をRequest.Form.Get()で取りたかったんですが

<td>
  @Html.CheckBoxFor(m => itm.blEnabled
</td>

こう書いて

サーバで

[HttpPost]
public ActionResult Save()
{
    string[] enabled = Request.Form.Get("itm.blEnabled").Split(',');

こうやると

 

9行しかないのに、なぜか12件・・・。

 

デベロッパーツールで確認

生成されたhtmlコードをみると

<td>
  <input checked="checked" data-val="true" id="itm_blEnabled" name="itm.blEnabled" type="checkbox" value="true">
  <input name="itm.blEnabled" type="hidden" value="false">
</td>

となっていた。

「itm.blEnabled」を検索すると18件ヒット。

checkboxとhiddenのname属性が重なって、値がごちゃ混ぜになっているようです。

 

checkboxとhiddenのname属性が重ならないようにする

Viewの属性を修正

<td id="tdChBox">
  @Html.CheckBoxFor(m => itm.blEnabled, new { id = "chEnabled", Name = "chEnabled" })
</td>

変更点

  1. <td>タグにid属性を追加（チェックoff/on用に使用）
    id="tdChBox"
  2. checkboxとhiddenの属性が競合しないように、checkboxのidとnameを別名前にする
    new { id = "chEnabled", Name = "chEnabled" }

 

変更後、生成されたView

<td id="tdChBox">
  <input name="chEnabled" checked="checked" data-val="true" id="chEnabled" type="checkbox" value="true">
  <input name="itm.blEnabled" type="hidden" value="true">
</td>

 

JavaScriptで調整

初期表示

$(function () {
  $.each($("#tbl tbody").children(), function () {
    // hiddenの値を上書きする
    if ($(this).find("#chEnabled").prop('checked')) {
      $(this).find("input[name='itm.blEnabled']").val('true');
    }
    else {
      $(this).find("input[name='itm.blEnabled']").prop('false');
    }
  });
});

対象チェックボックスにチェックが入っているか確認し、hiddenの値を上書きします。

 

チェックボックスOFF/ON操作時

初期表示のコードの下に以下を追加。

  $("#tdChBox > input").change(function () {
    if ($(this).prop('checked')) {
      $(this).next("input[name='itm.blEnabled']").val('true');
    }
    else {
      $(this).next("input[name='itm.blEnabled']").val('false');
    }
  });

 

結果

こんなやりかたでいいのか分かりませんが、無事に取得できました。

 

-ASP.NET