Cascade DropDown Sample | C# Online Compiler

Cascade DropDown Sample by IbrahimIslam

using System;
using System.ComponentModel.DataAnnotations;

namespace HelloWorldMvcApp
{

}

Model

​x
 
using System;
using System.ComponentModel.DataAnnotations;
​
namespace HelloWorldMvcApp
{
​
}

@{
	Layout = null;
}

<!DOCTYPE html>
<!-- template from http://getbootstrap.com/getting-started -->

<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>DropDown Selection</title>
	</head>
	
	<body>
		<div>
			@Html.DropDownList("combo1", (IEnumerable<SelectListItem>)ViewBag.combo)
			 <select id="combo2"></select> 
		</div>

		<!-- JS includes -->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
		
		<script type="text/javascript">
		
			$(document).ready(function(){
			
				$('#combo1').change(function(){
				
					$.ajax({
						type: "GET",
						url: "@Url.Action("GetSecondComboData", "Home")",
						data: { val : $(this).val() },
						success: function (data) {
							var options = $("#combo2");
							options.empty();
							$.each(data, function() {
								options.append($("<option />").val(this).text(this));
							});
						},
						dataType: 'json'
					});
				
				});
			
			});

		</script>
	</body>
</html>

View

 
@{
    Layout = null;
}
​
<!DOCTYPE html>
<!-- template from http://getbootstrap.com/getting-started -->
​
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>DropDown Selection</title>
    </head>
    
    <body>
        <div>
            @Html.DropDownList("combo1", (IEnumerable<SelectListItem>)ViewBag.combo)
             <select id="combo2"></select> 
        </div>
​
        <!-- JS includes -->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        
        <script type="text/javascript">
        
            $(document).ready(function(){
            
                $('#combo1').change(function(){
                
                    $.ajax({
                        type: "GET",
                        url: "@Url.Action("GetSecondComboData", "Home")",
                        data: { val : $(this).val() },
                        success: function (data) {
                            var options = $("#combo2");
                            options.empty();
                            $.each(data, function() {
                                options.append($("<option />").val(this).text(this));
                            });
                        },
                        dataType: 'json'
                    });
                
                });
            
            });
​
        </script>
    </body>
</html>
​

using System;
using System.Web.Mvc;
using System.Collections.Generic;
using System.Linq;

namespace HelloWorldMvcApp
{
	public class HomeController : Controller
	{
		[HttpGet]
		public ActionResult Index()
		{
			var values = new List<dynamic>
			{
				new { value = 0 , text = "0"},
                new { value = 1 , text = "1"},
                new { value = 2 , text = "2"},
                new { value = 3 , text = "3"},
                new { value = 4 , text = "4"},
                new { value = 5 , text = "5"},
                new { value = 6 , text = "6"},
                new { value = 7 , text = "7"},
                new { value = 8 , text = "8"},
                new { value = 9 , text = "9"}
			};
			
			ViewBag.combo = new SelectList(values, "value", "text");
			
			return View();
		}
		
		[HttpGet]
		public JsonResult GetSecondComboData(int val)
		{
			return Json(Enumerable.Range(0, val+1), JsonRequestBehavior.AllowGet);
		}
	}
}

Controller

 
using System;
using System.Web.Mvc;
using System.Collections.Generic;
using System.Linq;
​
namespace HelloWorldMvcApp
{
    public class HomeController : Controller
    {
        [HttpGet]
        public ActionResult Index()
        {
            var values = new List<dynamic>
            {
                new { value = 0 , text = "0"},
                new { value = 1 , text = "1"},
                new { value = 2 , text = "2"},
                new { value = 3 , text = "3"},
                new { value = 4 , text = "4"},
                new { value = 5 , text = "5"},
                new { value = 6 , text = "6"},
                new { value = 7 , text = "7"},
                new { value = 8 , text = "8"},
                new { value = 9 , text = "9"}
            };
            
            ViewBag.combo = new SelectList(values, "value", "text");
            
            return View();
        }
        
        [HttpGet]
        public JsonResult GetSecondComboData(int val)
        {
            return Json(Enumerable.Range(0, val+1), JsonRequestBehavior.AllowGet);
        }
    }
}

View in Full Screen

3
0
1

Cached Result
Last Run:	9:08:33 pm
Compile:	0.147s
Execute:	0.013s
Memory:	8kb
CPU:	0.031s

View IL Code