Part 39 - How to display multiple checkbox with checked and unchecked value

In this video you will be able to display multiple checkbox on view page with checked and unchecked value. So, the expected output would be like what shown in below image.

#Controller Code

Add a controller named "Test" and replace everything with below code. In below code, you will find three methods
a) Index () : This method will return view with data in  ViewBag.ItemList  consisting all Items in the shop.

using MVCTutorial.Models;
using System;
using System.Collections.Generic;
using System.Globalization;
using System.IO;
using System.Linq;
using System.Net;
using System.Threading;
using System.Web;
using System.Web.Mvc;

namespace MVCTutorial.Controllers
{

    public class TestController : Controller
    {

        public ActionResult Index()
        {
            MVCTutorialEntities db = new MVCTutorialEntities();
           
            List<MyShop> ItemList = new List<MyShop>();
            ItemList.Add(new MyShop { ItemID = 1, ItemName = "Rice", IsAvailable = true });
            ItemList.Add(new MyShop { ItemID = 2, ItemName = "Pulse", IsAvailable = false });
            ItemList.Add(new MyShop { ItemID = 3, ItemName = "Chocholate", IsAvailable = true });
            ItemList.Add(new MyShop { ItemID = 4, ItemName = "Soap", IsAvailable = false });
            ItemList.Add(new MyShop { ItemID = 5, ItemName = "Tea", IsAvailable = true });

            ViewBag.ItemList = ItemList;

            return View();
        }


    }
}

  
#Model code (EmployeeViewModel)

Right click on your model folder and add a class. Then give a name "MyShop" and click ok button. Replace content with below code, 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MVCTutorial.Models
{
    public class MyShop
    {
        public int ItemID { get; set; }
        public string ItemName { get; set; }
        public bool IsAvailable { get; set; }

    }
}

 # View Page (Index.cshtml)

Right click on your controller' s Index method and add a view. After adding view, replace content with below code.

<div class="panel panel-body" style="min-height:256px">

<div class="col-md-9">
        <div class="col-md-5">
            <img src="~/Content/loading.gif" id="loader" height="20" width="20" style="display:none" />

            <ul class="list-group" id="ItemList">
                @if (ViewBag.ItemList != null)
                {
                    <li class="list-group-item list-group-item-heading active">
                        <h4 class="list-group-item-text">Available Items in my store</h4>

                    </li>
                    foreach (var item in ViewBag.ItemList)
                    {
                        <li class="list-group-item">

                            <div class="checkbox">
                                <input id="item_@item.ItemID" type="checkbox" checked="@item.IsAvailable" />
                                <label for="item_@item.ItemID">@item.ItemName</label>
                            </div>


                        </li>

                    }
                    <li class="list-group-item"><a href="#" class="btn btn-block btn-success" onclick="SaveItems()">Save Item</a></li>

                }

            </ul>
        </div>
    </div>

</div>

Share this post