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:

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