WebSurfer's Home

トップ > Blog 1   |   ログイン
APMLフィルター

複数の CheckBox の状態を取得

by WebSurfer 2017年7月2日 17:02

ASP.NET MVC アプリで、複数(数は不定)の CheckBox をレンダリングし、ユーザーがチェックを入れて POST したとき、どのチェックボックスがチェックされているかの状態を取得する方法を備忘録として書いておきます。

CheckBoxList

ユーザーがチェックを入れた CkeckBox からは true を、チェックしてない CheckBox からは false を取得できるようにするのが条件です。

ASP.NET Web Forms アプリですと CheckBoxList というサーバーコントロールがあって、それを使えば複数の CheckBox を実装するのは容易ですが、サーバーコントロールのない ASP.NET MVC アプリでは少々工夫が必要なようです。

html の input type="checkbox" ではチェックされた項目の name=value しか送ってこないのでかえって使いにくいです。Html.EditorFor を使うのがお勧めです。

List<bool> 型のオブジェクトをメンバーとして持つ Model を View に型付け、それから Html.EditorFor を使って CheckBox をレンダリングできます。

その CheckBox は html では input type="checkbox" だけでなく、それとペアで同じ name 属性を持つ隠しフィールド input type="hidden" value="false" も生成されます。

ユーザーがチェックを入れて POST すると、例えば name 属性が Item[0] だった場合、Items[0]=true&Items[0]=false というデータがフォームに含まれて送信されます。(チェックを入れない場合は隠しフィールドの Items[0]=false のみ)

ASP.NET は、モデルバインディングの際、それを見て List<bool> 型のオブジェクトの各要素を true / false に設定しているようです。

以下に、上の画像を表示したサンプルのコードとその説明を書いておきます。

Model と Controller

以下のサンプルではチェックされた項目は ture が、チェックされて無い項目は false がアクションメソッドの引数にバインドされるようにしています。(注:Model と Controller が一緒になっているのは単に分けるのが面倒だったからです)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Mvc4App.Models;

namespace Mvc4App.Controllers
{
  // Model
  public class CheckboxListModel
  {
    public CheckboxListModel()
    {
      Items = new List<bool>();
    }

    public IList<bool> Items { get; set; }
  }
    
  // Controller
  public class ComplexController : Controller
  {        
    [HttpGet]
    public ActionResult Checkboxes()
    {
      // この例では CheckBox を 5 つ作成。初期値は false とし
      // CheckBox はチェックされてない状態とする。
      bool[] defaultItems = 
          new bool[] { false, false, false, false, false };
      CheckboxListModel model = 
          new CheckboxListModel() { Items = defaultItems };
      return View(model);
    }

    [HttpPost]
    // POST されてきたデータは引数の m, items のいずれにもモデル
    // バインドされる。items の方は Model のプロパティ名と一致さ
    // せる必要がある。モデルバインディングの際は大文字・小文字
    // が区別されないので引数名には小文字を使ってプロパティ 
    // Items に以下のように代入できる。
    public ActionResult Checkboxes(CheckboxListModel m, 
                                        IList<bool> items)
    {
      CheckboxListModel model = 
          new CheckboxListModel() { Items = items };
      return View(model);
    }
  }
}

View

EditorFor の引数で m => m.Items[i] としているところがキモです。そうするとレンダリングされる html 要素の name 属性が連番のインデックスを含むようになり、モデルバインディングがうまくいきます。

@model Mvc4App.Controllers.CheckboxListModel

@{
    ViewBag.Title = "Checkboxes";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Checkboxes</h2>

@using (Html.BeginForm()) {
    for (int i = 0; i < Model.Items.Count; i++)
    {
        @Html.EditorFor(m => m.Items[i])
        <br />
    }
    <p>
        <input type="submit" value="Send" />
    </p> 
}

Tags:

MVC

for...in ループと hasOwnProperty

by WebSurfer 2017年6月30日 15:38

JavaScript の for...in ループ内で hasOwnProperty を使っているコード例を見かけますが、hasOwnProperty を使うことにどういう意味があるかを書きます。(詳細は後述しますが、下の画像で赤枠が hasOwnProperty を使わない場合、青枠が使った場合の結果です)

hasOwnProperty 有無の違い

MDN (Mozilla Developer Network) の記事「Object.prototype.hasOwnProperty()」に "in 演算子と違って、このメソッドはオブジェクトのプロトタイプチェーンをたどってチェックしません" と書いてあって、for...in ループの中で hasOwnProperty プロパティを使うコード例もありましたが、自分的にはどうもピンときません。

なので、自分的に納得できる具体例を以下に書いておきます。

マイクロソフト公式解説書「プログラミング Microsoft ASP.NET MVC」の 10.1.2 章に書いてあったことですが、JavaScript でオブジェクト指向を実装するのにプロトタイプを利用できるそうです。だからプロトタイプを使用したコーディングが主流になっているということなのでしょうか?

プロトタイプを使用したコード例として、本に書いてあったように、Person クラスを以下のように定義したとします。

// Person クラスの疑似コンストラクター
var Person = function (name, lastname, birthdate) {
    this.initialize(name, lastname, birthdate);
}

// メンバー
Person.prototype.initialize = 
                 function (name, lastname, birthdate) {
    this.Name = name;
    this.LastName = lastname;
    this.BirthDate = birthdate;
}
        
// メンバー
Person.prototype.getAge = function () {
    return 18;
}

Person クラスの Own プロパティは Name, LastName, BirthDate のみです。しかしながら、以下のコードのように for...in で Person クラスの各要素をコンソールに出力すると、Name, LastName, BirthDate の他に、プロトタイプチェーンをたどって initialize, getAge も出力されてしまいます。上の画像の赤枠で示した部分が下記のコードの実行結果です。

var p = new Person("web", "surfer", "2017/6/30");

for (var key in p) {
    console.log(key + ':' + p[key]);
}

それを、以下のように、p.hasOwnProperty(key) が true になる要素のみをコンソールに出力すれば、上の画像の青枠部分に示した通り、Name, LastName, BirthDate のみとなります。

for (var key in p) {
    if (p.hasOwnProperty(key)) {
        console.log(key + ':' + p[key]);
    }
}

上記は、あくまで自分が思いついた自分的に納得できる例で、他にもっと適切で分かりやすい例があるかもしれませんが・・・

Tags: ,

JavaScript

NULL 条件でのレコード抽出

by WebSurfer 2017年6月18日 18:02

Visual Studio のデータソース構成ウィザードを使って、@IT の記事「Microsoft Visual Studio 2005 による Web アプリケーション構築技法」の「D. テーブルアダプタへのクエリ追加」のセクションに書いてあるように、特定の条件で DataSet / DataTable を生成するメソッドを作ることができます。

以下の画像はサンプルデータベース Northwind の Orders テーブルから ShippedDate が NULL のレコードを抽出して DataGridView に表示したものですが、このようなことができるメソッドを作るにはどうすればよいかということを書きます。

ShippedDate が NULL のレコードを抽出

SELECT クエリで WHERE ShippedDate = @ShippedDate という条件で TableAdapter にメソッドを追加すると、そのメソッドの引数に null が渡された場合は、メソッド内部でパラメータ @ShippedDate に DBNull.Value が代入されるコードが生成されます。

しかしながら、それでは ShippedDate が NULL のレコードを抽出することはできません。ShippedDate が NULL のレコードを抽出するためには WHERE ShippedDate IS NULL とする必要があります。

ではどうすればいいかですが、クエリビルダで元となる SELECT クエリを作成する際、@IsNull_ShippedDate(名前は任意)というような引数に null が渡されたか否かを判定するパラメータを追加し、以下の画像のように WHERE 句を組み立ててそれをベースにメソッドを生成します。

クエリビルダ

これにより、DataTable を返す GetDataByNullableShippedDate メソッド(名前は任意)の例ですが、以下のようなコードが生成されます。(注:自動生成されたコードそのものではなく、読みやすくするため改行等を行っています)

public virtual OrdersDataTable GetDataByNullableShippedDate(
               int? IsNull_ShippedDate, DateTime? ShippedDate)
{
  this.Adapter.SelectCommand = this.CommandCollection[1];
  if (IsNull_ShippedDate.HasValue == true) 
  {
    this.Adapter.SelectCommand.Parameters[0].Value = 
                                (int)IsNull_ShippedDate.Value;
  }
  else
  {
    this.Adapter.SelectCommand.Parameters[0].Value = 
                                                DBNull.Value;
  }

  if (ShippedDate.HasValue == true)
  {
    this.Adapter.SelectCommand.Parameters[1].Value = 
                                 (DateTime)ShippedDate.Value;
  }
  else
  {
    this.Adapter.SelectCommand.Parameters[1].Value = 
                                                DBNull.Value;
  }
  OrdersDataTable dataTable = new OrdersDataTable();
  this.Adapter.Fill(dataTable);
  return dataTable;
}

この GetDataByNullableShippedDate メソッドを以下のように呼び出して DataTable を取得し DataGridView に表示したのが一番上の画像です。

public partial class Form14 : Form
{
  private OrdersTableAdapter adapter = new OrdersTableAdapter();
  private BindingSource bindingSource1 = new BindingSource();
  private NorthwindDataSet.OrdersDataTable table;
        
  public Form14()
  {
    InitializeComponent();

    DateTime? shippedDate = null;

    table = adapter.GetDataByNullableShippedDate(
                shippedDate.HasValue ? 0 : 1, shippedDate);

    bindingSource1.DataSource = table;
    this.dataGridView1.DataSource = bindingSource1;
  }
}    

もちろん、NULL でない特定の日付の ShippedDate のレコードも上のコードで抽出できます。

Tags: ,

ADO.NET

About this blog

2010年5月にこのブログを立ち上げました。その後 ブログ2 を追加し、ここは ASP.NET 関係のトピックス、ブログ2はそれ以外のトピックスに分けました。

Calendar

<<  2017年9月  >>
272829303112
3456789
10111213141516
17181920212223
24252627282930
1234567

View posts in large calendar