複数選択の ListBox

ListBox は、CheckedMemberPath プロパティを使用して複数選択機能をサポートします。デフォルトでは、リストから一つの項目のみ選択されますが、CheckedMemberPath プロパティを True に設定することでリストの項目ごとにチェックボックスを表示して複数の項目を選択できます。

CheckedMemberPath プロパティは文字列値を取得します。その文字列値は、ListBox 項目の横に配置しているチェックボックスを制御するプロパティの名前となります。チェックボックスをオンまたはオフする場合、対応するブール値が指定のプロパティに連結されます。

次の図は、項目ごとに対応するチェックボックスで複数選択を有効にした状態の ListBox を示しています。この例では、エンティティデータモデルを使用して、ListBox コントロールを C1NWind.mdf データベース内の Products テーブルと連結しています。

以下のコードは、ListBox コントロールに複数選択を有効にする方法を示しています。

コードの場合

MultiSelectController.cs

C#	コードのコピー
private C1NWindEntities db = new C1NWindEntities(); public ActionResult MultiSelect() { return View(db); } public ActionResult ListUpdateProducts([C1JsonRequest]CollectionViewEditRequest<Product> requestData) { return this.C1Json(CollectionViewHelper.Edit<Product>(requestData, item => { string error = string.Empty; bool success = true; try { db.Entry(item as object).State = EntityState.Modified; db.SaveChanges(); } catch (DbEntityValidationException e) { error = string.Join(",", e.EntityValidationErrors.Select(result => { return string.Join(",", result.ValidationErrors.Select(err => err.ErrorMessage)); })); success = false; } catch (Exception e) { error = e.Message; success = false; } return new CollectionViewItemResult<Product> { Error = error, Success = success && ModelState.IsValid, Data = item }; }, () => db.Products.ToList<Product>())); }

コードのコピー

private C1NWindEntities db = new C1NWindEntities();
public ActionResult MultiSelect()
{
    return View(db);
}

public ActionResult ListUpdateProducts([C1JsonRequest]CollectionViewEditRequest<Product> requestData)
{
    return this.C1Json(CollectionViewHelper.Edit<Product>(requestData, item =>
    {
        string error = string.Empty;
        bool success = true;
        try
        {
            db.Entry(item as object).State = EntityState.Modified;
            db.SaveChanges();
        }
        catch (DbEntityValidationException e)
        {
            error = string.Join(",", e.EntityValidationErrors.Select(result =>
            {
                return string.Join(",", result.ValidationErrors.Select(err => err.ErrorMessage));
            }));
            success = false;
        }
        catch (Exception e)
        {
            error = e.Message;
            success = false;
        }
        return new CollectionViewItemResult<Product>
        {
            Error = error,
            Success = success && ModelState.IsValid,
            Data = item
        };
    }, () => db.Products.ToList<Product>()));
}

MultiSelect.cshtml

HTML	コードのコピー
@model C1NWindEntities <div> <label>Select an item</label> <c1-list-box display-member-path="ProductName" checked-member-path="Discontinued" selected-value-path="Value" width="400px" height="200px"> <c1-items-source source-collection="@Model.Products"> </c1-items-source> </c1-list-box> </div>

HTML

コードのコピー

@model C1NWindEntities

<div>
    <label>Select an item</label>
    <c1-list-box display-member-path="ProductName" 
checked-member-path="Discontinued" selected-value-path="Value" 
width="400px" height="200px">
<c1-items-source source-collection="@Model.Products">
</c1-items-source>
    </c1-list-box>
</div>

先頭に戻る