Introduction

This article explains how to change the checkbox list depending on the changes of a dropdown list value in the Web API. In it the checkbox list data is bound with the Dropdown list .

Use the following procedure to create a sample application.

Step 1

First we create a Web API application as in the following:

Step 2

Add a Model folder as in the following:

Add the following code:

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. namespace MvcApplication23.Models
  6. {
  7. public class FruitModel
  8. {
  9. public List<Fruit> FruitH { get; set; }
  10. public int SelectedFruit { get; set; }
  11. public List<FruitDetail> FruitLModel { get; set; }
  12. }
  13. public class Fruit
  14. {
  15. public int Id { get; set; }
  16. public string FruitName { get; set; }
  17. }
  18. public class FruitDetail
  19. {
  20. public int Id { get; set; }
  21. public int FruitId { get; set; }
  22. public string Fruit_T { get; set; }
  23. }
  24. }

Step 3

Now in the "Controller" we add the code that uses all the variables of the Model class. This file exists:

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 MvcApplication23.Models;
  7. namespace MvcApplication23.Controllers
  8. {
  9. public class HomeController : Controller
  10. {
  11. public ActionResult Index()
  12. {
  13. FruitModel objfruit = new FruitModel();
  14. objfruit.FruitH = GetAllFruit();
  15. List<FruitDetail> obj= new List<FruitDetail>();
  16. obj = GetAllFruitDetail();
  17. objfruit.FruitLModel = obj;
  18. objfruit.SelectedFruit = 0;
  19. return View(objfruit);
  20. }
  21. [HttpPost]
  22. public ActionResult Index(FruitModel objfruit)
  23. {
  24. objfruit.FruitH = GetAllFruit();
  25. List<FruitDetail> objfruit1 = new List<FruitDetail>();
  26. if (objfruit.SelectedFruit != 0)
  27. {
  28. objfruit1 = GetAllFruitDetail();
  29. objfruit.FruitLModel = objfruit1.Where(m => m.FruitId == objfruit.SelectedFruit).ToList();
  30. }
  31. else
  32. {
  33. objfruit1 = GetAllFruitDetail();
  34. objfruit.FruitLModel = objfruit1;
  35. }
  36. return View(objfruit);
  37. }
  38. public List<Fruit> GetAllFruit()
  39. {
  40. List<Fruit> objfruit = new List<Fruit>();
  41. objfruit.Add(new Fruit { Id = 0, FruitName = "All" });
  42. objfruit.Add(new Fruit { Id = 1, FruitName = "FruitList-1" });
  43. objfruit.Add(new Fruit { Id = 2,FruitName = "FruitList-2" });
  44. objfruit.Add(new Fruit { Id = 3, FruitName = "FruitList-3" });
  45. return objfruit;
  46. }
  47. public List<FruitDetail> GetAllFruitDetail()
  48. {
  49. List<FruitDetail> objfruitmodel = new List<FruitDetail>();
  50. objfruitmodel.Add(new FruitDetail { Id = 1, FruitId = 1, Fruit_T = "Apple" });
  51. objfruitmodel.Add(new FruitDetail { Id = 2, FruitId = 1, Fruit_T = "Banana" });
  52. objfruitmodel.Add(new FruitDetail { Id = 3, FruitId = 2, Fruit_T = "Graps" });
  53. objfruitmodel.Add(new FruitDetail { Id = 4, FruitId = 2, Fruit_T = "Orange" });
  54. objfruitmodel.Add(new FruitDetail { Id = 5, FruitId = 2, Fruit_T = "Gaava" });
  55. objfruitmodel.Add(new FruitDetail { Id = 6, FruitId = 2, Fruit_T = "Cherry" });
  56. objfruitmodel.Add(new FruitDetail { Id = 7, FruitId = 3, Fruit_T = "Coconut" });
  57. objfruitmodel.Add(new FruitDetail { Id = 8, FruitId = 3, Fruit_T = "Mango" });
  58. objfruitmodel.Add(new FruitDetail { Id = 9, FruitId = 3, Fruit_T = "Lychee" });
  59. return objfruitmodel;
  60. }
  61. }
  62. }

Step 4

In the View write some code as in the following:

Add the following code:

  1. @model MvcApplication23.Models.FruitModel
  2. @{
  3. ViewBag.Title = "Bind Data of checkbox list with the Dropdown list in Web API";
  4. }
  5. @using (Html.BeginForm("Index", "Home"))
  6. {
  7. <table width="30%">
  8. <tr>
  9. <td>
  10. Fruits :
  11. </td>
  12. <td align="left">@Html.DropDownList("SelectedFruit", new SelectList(Model.FruitH ,"Id", "FruitName", Model.SelectedFruit))
  13. <input type="submit" value="Search" />
  14. </td>
  15. </tr>
  16. <tr>
  17. <td colspan="2">
  18. @foreach (var item in Model.FruitLModel)
  19. {
  20. <div>
  21. @Html.CheckBox("FruitNameLIst", false, new { @value = item.Id })
  22. @Html.Label("lblname",item.Fruit_T)
  23. </div>
  24. }
  25. </td>
  26. </tr>
  27. <tr>
  28. <td colspan="2">
  29. </td>
  30. </tr>
  31. </table>
  32. }

Step 5

Execute the application:

Output

Now select the the list of fruits from the dropdown list and click on search.

Display Fruit List 2 Value