Update the Data of Checkbox List While Changing the Value of Dropdown List

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:

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

    Select MVC4 Application

  • From the "MVC4 project" window select "Web API".

    Select Web API

  • Click on the "OK" button.

Step 2

Add a Model folder as in the following:

  • In the "Solution Explorer".
  • Right -click on the "Model folder".
  • Select "Add" -> "Class".
  • From the add item window select "Installed" -> "Visual C#".

    Add Model Class

  • Select "Class" and 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. namespace MvcApplication23.Models  
  6. {  
  7.     public class FruitModel  
  8.     {  
  9.         public List<Fruit> FruitH { getset; }  
  10.         public int SelectedFruit { getset; }  
  11.         public List<FruitDetail> FruitLModel { getset; }  
  12.     }  
  13.     public class Fruit  
  14.     {  
  15.         public int Id { getset; }  
  16.         public string FruitName { getset; }  
  17.     }  
  18.     public class FruitDetail  
  19.     {  
  20.         public int Id { getset; }  
  21.         public int FruitId { getset; }  
  22.         public string Fruit_T { getset; }  
  23.     }  
  24. }   

Step 3

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

  • In the "Solution Explorer".

  • Expand the "Controller" folder.

  • Select the "HomeController".

    Display Controller

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:

  • In the "Solution Explorer".

  • Expand the "Views Folder"

  • Select "Home" -> "Index.cshtml".

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"falsenew { @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