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: