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".

    Select MVC4 Application

  • Click on the "OK" button.
  • From the MVC4 project window select "Web API".

    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".

    Add model class

  • Click on the "OK" button.

Add the following Code:

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.Mvc;
  6. namespace CheckBoxlistAPI.Models
  7. {
  8. public class User
  9. {
  10. public IList<SelectListItem> User_Name { get; set; }
  11. }
  12. }

Step 3

Use the following procedure to create a Controller:

  • In the "Solution Explorer".
  • Right-click on the "Controller Folder".
  • Select "Add" -> "Controller".

    Add Controller

  • Select "MVC Controller" from the template.
  • Click on the "Add" button.

Add the following Code:

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.Mvc;
  6. using CheckBoxlistAPI.Models;
  7. namespace CheckBoxlistAPI.Controllers
  8. {
  9. public class UsersController : Controller
  10. {
  11. //
  12. // GET: /Users/
  13. public ActionResult Index()
  14. {
  15. return View();
  16. }
  17. public ActionResult UserView()
  18. {
  19. User obj = new User();
  20. List<SelectListItem> Username = new List<SelectListItem>();
  21. Username.Add(new SelectListItem{Text = "User1", Value="1"});
  22. Username.Add(new SelectListItem{Text ="User2",Value="2"});
  23. Username.Add(new SelectListItem { Text = "User3", Value = "3" });
  24. Username.Add(new SelectListItem { Text = "User4", Value = "4" });
  25. obj.User_Name = Username;
  26. return View(obj);
  27. }
  28. }
  29. }

Step 4

Add a new View:

  • In the UsersController.
  • Right-click on the "UserView" ActionResult.

    Select Add View for creating the View

  • Select "Add View".

    AddView

  • Click on the "Add" button.

Add the following code:

  1. @model CheckBoxlistAPI.Models.User
  2. @{
  3. ViewBag.Title = "UserView";
  4. }
  5. <h2>UserView</h2>
  6. <script src="~/Scripts/jquery-1.8.2.min.js"></script>
  7. <script>
  8. $(document).ready(function () {
  9. $('.chklst').click(function () {
  10. var getcid = $(this).attr('id');
  11. var ischk = $('#' + getcid).is(':checked');
  12. if ($('#' + getcid).is(':checked') == true) {
  13. $('#td' + $(this).val()).css("color", "Green");
  14. $('#td' + $(this).val()).css("background-color", "Pink");
  15. }
  16. else {
  17. $('#td' + $(this).val()).css("color", "Black");
  18. $('#td' + $(this).val()).css("background-color", "white");
  19. }
  20. });
  21. });
  22. </script>
  23. <div id=" userlist" class="elem" style="height:100px; overflow:auto;border:solid;width:150px">
  24. @foreach (var Username in @Model.User_Name)
  25. {
  26. var ChkID = "chk" + Username.Value;
  27. var tdID = "td" + Username.Value;
  28. <table width="100%">
  29. <tr>
  30. <td width="20px">
  31. <input type="checkbox" id="@ChkID"class="chklst" value="@Username.Value"/>
  32. </td>
  33. <td id="@tdID" width="100px">
  34. @Username.Text
  35. </td>
  36. </tr>
  37. </table>
  38. }
  39. </div>

Step 5

Execute the application:

Display checkbox List