Create CheckBox List in Web API

Introduction

This article shows how to create a Checkbox List. In this application we create a dropdown list of checkboxes in which we can select one or more records.

Now let's see the application

Step 1

Use the following procedure to create the sample application using the Web API:

• Start Visual Studio 2013.
• From the Start Window select "New Project".
• Select "Installed" -> "Templates" -> "Visual C#" -> "Web" -> "Visual Studio 2012" and select "ASP.NET MVC4 Web Application".
  
  
  
  
• Click on the "OK" button.
• From the MVC4 project window select "Web API".
  
  
  
  
• Click on the "OK" button.

Step 2

Use the following procedure to create a Model class:

• In the "Solution Explorer".
• Right-click on the Model Folder.
• Select "Add" -> "Class".
• Select "Installed" -> "Visual C#" and select "Class".
  
  
  
  
• Click on the "OK" button.

Add the following Code:

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace CheckBoxlistAPI.Models
{
    public class User
    {
        public IList<SelectListItem> User_Name { get; set; }
    }
}

 

Step 3

Use the following procedure to create a Controller:

• In the "Solution Explorer".
• Right-click on the "Controller Folder".
• Select "Add" -> "Controller".
  
  
  
  
• Select "MVC Controller" from the template.
• Click on the "Add" button.

Add the following Code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using CheckBoxlistAPI.Models;
namespace CheckBoxlistAPI.Controllers
{
    public class UsersController : Controller
    {
        //
        // GET: /Users/
        public ActionResult Index()
        {
            return View();
        }
        public ActionResult UserView()
        {
            User obj = new User();
            List<SelectListItem> Username = new List<SelectListItem>();
            Username.Add(new SelectListItem{Text = "User1", Value="1"});
            Username.Add(new SelectListItem{Text ="User2",Value="2"});
            Username.Add(new SelectListItem { Text = "User3", Value = "3" });
            Username.Add(new SelectListItem { Text = "User4", Value = "4" });
            obj.User_Name = Username;
            return View(obj);
        }
    }
}

Step 4

Add a new View:

• In the UsersController.
• Right-click on the "UserView" ActionResult.
  
  
  
  
• Select "Add View".
  
  
  
  
• Click on the "Add" button.

Add the following code:

 

@model CheckBoxlistAPI.Models.User
@{
    ViewBag.Title = "UserView";
}
<h2>UserView</h2>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script>
    $(document).ready(function () {
        $('.chklst').click(function () {
            var getcid = $(this).attr('id');
            var ischk = $('#' + getcid).is(':checked');
            if ($('#' + getcid).is(':checked') == true) {
                $('#td' + $(this).val()).css("color", "Green");
                $('#td' + $(this).val()).css("background-color", "Pink");
            }
            else {
                $('#td' + $(this).val()).css("color", "Black");
                $('#td' + $(this).val()).css("background-color", "white");
            }
        });
    });
</script>
<div id=" userlist" class="elem" style="height:100px; overflow:auto;border:solid;width:150px">
    @foreach (var Username in @Model.User_Name)
    {
        var ChkID = "chk" + Username.Value;
        var tdID = "td" + Username.Value;
        <table width="100%">
            <tr>
               <td width="20px">
                    <input type="checkbox" id="@ChkID"class="chklst" value="@Username.Value"/>
                </td>
                <td id="@tdID" width="100px">
                    @Username.Text
                </td>
            </tr>
        </table>
    }
</div>

 

Step 5

Execute the application: