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.
From the "MVC4 project" window 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#".
Select "Class" and click on the "Add" button.

Add the following code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace MvcApplication23.Models
{
public class FruitModel
{
public List<Fruit> FruitH { get; set; }
public int SelectedFruit { get; set; }
public List<FruitDetail> FruitLModel { get; set; }
}
public class Fruit
{
public int Id { get; set; }
public string FruitName { get; set; }
}
public class FruitDetail
{
public int Id { get; set; }
public int FruitId { get; set; }
public string Fruit_T { get; set; }
}
}

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

Add the following code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcApplication23.Models;
namespace MvcApplication23.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
FruitModel objfruit = new FruitModel();
objfruit.FruitH = GetAllFruit();
List<FruitDetail> obj= new List<FruitDetail>();
obj = GetAllFruitDetail();
objfruit.FruitLModel = obj;
objfruit.SelectedFruit = 0;
return View(objfruit);
}
[HttpPost]
public ActionResult Index(FruitModel objfruit)
{
objfruit.FruitH = GetAllFruit();
List<FruitDetail> objfruit1 = new List<FruitDetail>();
if (objfruit.SelectedFruit != 0)
{
objfruit1 = GetAllFruitDetail();
objfruit.FruitLModel = objfruit1.Where(m => m.FruitId == objfruit.SelectedFruit).ToList();
}
else
{
objfruit1 = GetAllFruitDetail();
objfruit.FruitLModel = objfruit1;
}
return View(objfruit);
}
public List<Fruit> GetAllFruit()
{
List<Fruit> objfruit = new List<Fruit>();
objfruit.Add(new Fruit { Id = 0, FruitName = "All" });
objfruit.Add(new Fruit { Id = 1, FruitName = "FruitList-1" });
objfruit.Add(new Fruit { Id = 2,FruitName = "FruitList-2" });
objfruit.Add(new Fruit { Id = 3, FruitName = "FruitList-3" });
return objfruit;
}
public List<FruitDetail> GetAllFruitDetail()
{
List<FruitDetail> objfruitmodel = new List<FruitDetail>();
objfruitmodel.Add(new FruitDetail { Id = 1, FruitId = 1, Fruit_T = "Apple" });
objfruitmodel.Add(new FruitDetail { Id = 2, FruitId = 1, Fruit_T = "Banana" });
objfruitmodel.Add(new FruitDetail { Id = 3, FruitId = 2, Fruit_T = "Graps" });
objfruitmodel.Add(new FruitDetail { Id = 4, FruitId = 2, Fruit_T = "Orange" });
objfruitmodel.Add(new FruitDetail { Id = 5, FruitId = 2, Fruit_T = "Gaava" });
objfruitmodel.Add(new FruitDetail { Id = 6, FruitId = 2, Fruit_T = "Cherry" });
objfruitmodel.Add(new FruitDetail { Id = 7, FruitId = 3, Fruit_T = "Coconut" });
objfruitmodel.Add(new FruitDetail { Id = 8, FruitId = 3, Fruit_T = "Mango" });
objfruitmodel.Add(new FruitDetail { Id = 9, FruitId = 3, Fruit_T = "Lychee" });
return objfruitmodel;
}
}
}

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:

@model MvcApplication23.Models.FruitModel
@{
ViewBag.Title = "Bind Data of checkbox list with the Dropdown list in Web API";
}
@using (Html.BeginForm("Index", "Home"))
{
<table width="30%">
<tr>
<td>
Fruits :
</td>
<td align="left">@Html.DropDownList("SelectedFruit", new SelectList(Model.FruitH ,"Id", "FruitName", Model.SelectedFruit))
<input type="submit" value="Search" />
</td>
</tr>
<tr>
<td colspan="2">
@foreach (var item in Model.FruitLModel)
{
<div>
@Html.CheckBox("FruitNameLIst", false, new { @value = item.Id })
@Html.Label("lblname",item.Fruit_T)
</div>
}
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
</table>
}

Step 5

Execute the application:

Output

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