asp.net-mvc-4 - MVC 4 複数選択リスト ボックスとチェック リスト ボックス

Question

MVC 4 asp.net の Sivaraman Dhamodharan が行った同様の実装を、http: //www.codeproject.com/Articles/139792/Multi-Select-List-Box-and-Checked-Listにある彼の記事で行いたいと思います。 -箱

私は MVC 4 の初心者で、楽しんでいます!

Answer 1

「訪問エリア」と「割り当てられたID」（投稿した記事に記載されているように）の複数選択ボックスをMVCで非常に簡単に作成できます。チェックボックス付きの選択ボックスの場合、MVC でテーブルを作成できます。

以下の手順に従ってください。

ページのビュー モデルが AssignWorkViewModel で、製品のビュー モデルが ProductViewModel であるとします。

public class AssignWorkViewModel
{

    public List<ProductViewModel> Products { get; set; }
}


public class ProductViewModel
{
    public int ProductId { get; set; }

    //used to bind the checkbox value in the view
    public bool IsSelected { get; set; }

    public string ProductName { get; set; }
}

アクションメソッド名は「AssignWork」としましょう

public ActionResult AssignWork()
    {
        AssignWorkViewModel model = new AssignWorkViewModel();

        List<ProductViewModel> products = new List<ProductViewModel>();

        //let's add some values
        ProductViewModel samsungMonitor = new ProductViewModel();
        samsungMonitor.ProductId = 1;
        samsungMonitor.IsSelected = false;
        samsungMonitor.ProductName = "Samsung Monitor";
        products.Add(samsungMonitor);

        ProductViewModel sonyDvd = new ProductViewModel();
        sonyDvd.ProductId = 2;
        sonyDvd.IsSelected = false;
        sonyDvd.ProductName = "Sony DVD";
        products.Add(sonyDvd);

        ProductViewModel motherBoard = new ProductViewModel();
        motherBoard.ProductId = 3;
        motherBoard.IsSelected = false;
        motherBoard.ProductName = "Pentium Mother Board";
        products.Add(motherBoard);

        model.Products = products;

        //pass model to the view
        return View(model);
    }

景色、

@model SelectBoxTest.ViewModels.AssignWorkViewModel
<table>
    @foreach (var item in Model.Products)
    {
        <tr>
            <td>@Html.HiddenFor(model => item.ProductId)</td>
            <td>@Html.CheckBoxFor(model => item.IsSelected)</td>
            <td>@Html.DisplayFor(model => item.ProductName)</td>
        </tr>
    }
</table>

結果、

これはあなたが始めるのに役立つかもしれないと思います。