MVC <select> chain | C# Online Compiler

MVC <select> chain by Sphinxxx

using System;
using System.ComponentModel.DataAnnotations;

namespace HelloWorldMvcApp
{
	public class SampleViewModel
	{
		//
	}
}

Model

​x
 
using System;
using System.ComponentModel.DataAnnotations;
​
namespace HelloWorldMvcApp
{
    public class SampleViewModel
    {
        //
    }
}

@model HelloWorldMvcApp.SampleViewModel
@{
	Layout = null;
}

<!DOCTYPE html>
<html>
	<body>
		<div class="container">
			<a href="http://stackoverflow.com/questions/43698162/select-for-select-c-sharp-to-javascript">
				http://stackoverflow.com/questions/43698162/select-for-select-c-sharp-to-javascript
			</a>
			
			<p></p>
			
			<select id="league">
			@foreach(var team in ViewBag.List)
            {
				<option value="@team.Key">@team.Key</option>
            }
			</select>
		
			<select id="team"></select>
		</div>

		<script type="text/javascript">
			
			//Complete list of leagues and their teams:
			var leagues = {
				@foreach(var l in ViewBag.List)
				{
					@: '@l.Key': [
							foreach(var team in ViewBag.List[l.Key])
							{
								@: '@team',
							}
					@: ],
				}
			};
			
			var selectLeague = document.querySelector('#league'),
			    selectTeam = document.querySelector('#team');
			
			function updateTeams() {
				var league = selectLeague.value;
			
				selectTeam.innerHTML = '';
				leagues[league].forEach(function(team) {
			
					var x = document.createElement("OPTION");
					x.setAttribute("value", team);
					x.textContent = team;
			
					selectTeam.appendChild(x);
			    });
			}

			selectLeague.onchange = updateTeams;
			updateTeams();

		</script>

	</body>
</html>

View

 
@model HelloWorldMvcApp.SampleViewModel
@{
    Layout = null;
}
​
<!DOCTYPE html>
<html>
    <body>
        <div class="container">
            <a href="http://stackoverflow.com/questions/43698162/select-for-select-c-sharp-to-javascript">
                http://stackoverflow.com/questions/43698162/select-for-select-c-sharp-to-javascript
            </a>
            
            <p></p>
            
            <select id="league">
            @foreach(var team in ViewBag.List)
            {
                <option value="@team.Key">@team.Key</option>
            }
            </select>
        
            <select id="team"></select>
        </div>
​
        <script type="text/javascript">
            
            //Complete list of leagues and their teams:
            var leagues = {
                @foreach(var l in ViewBag.List)
                {
                    @: '@l.Key': [
                            foreach(var team in ViewBag.List[l.Key])
                            {
                                @: '@team',
                            }
                    @: ],
                }
            };
            
            var selectLeague = document.querySelector('#league'),
                selectTeam = document.querySelector('#team');
            
            function updateTeams() {
                var league = selectLeague.value;
            
                selectTeam.innerHTML = '';
                leagues[league].forEach(function(team) {
            
                    var x = document.createElement("OPTION");
                    x.setAttribute("value", team);
                    x.textContent = team;
            
                    selectTeam.appendChild(x);
                });
            }
​
            selectLeague.onchange = updateTeams;
            updateTeams();
​
        </script>
​
    </body>
</html>
​

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

namespace HelloWorldMvcApp
{
	public class HomeController : Controller
	{
		[HttpGet]
		public ActionResult Index()
		{
			ViewBag.List = new Dictionary<string, string[]>
			{
				{ "Premier League", new[] { "Arsenal", "Chelsea" } },
				{ "Bundesliga",     new[] { "Bayern Munchen", "Wolfsburg" } },
			};
			
			return View();
		}


	}
}

Controller

 
using System;
using System.Web.Mvc;
using System.Collections.Generic;
​
namespace HelloWorldMvcApp
{
    public class HomeController : Controller
    {
        [HttpGet]
        public ActionResult Index()
        {
            ViewBag.List = new Dictionary<string, string[]>
            {
                { "Premier League", new[] { "Arsenal", "Chelsea" } },
                { "Bundesliga",     new[] { "Bayern Munchen", "Wolfsburg" } },
            };
            
            return View();
        }
​
​
    }
}

View in Full Screen

Sword
Axe
Sword

Cached Result
Last Run:	5:00:48 pm
Compile:	0.007s
Execute:	0.06s
Memory:	2.72Mb
CPU:	0.067s

View IL Code