Part 5 - How to implement Cascading DropDownList with AngularJS and ASP.NET MVC

In this post, I would like to explain Part 5 - How to implement Cascading DropDownList with AngularJS and ASP.NET MVC. 
This is our 5th Post about AngularJS.  Here I have explained a little about AngularJS and What we will learn in this section part by part.
Sometimes we need to display DropDownLists in our webpage such that values in one DropDownList are dependent on the value selected in another DropDownList. The most common example of such a functionality is countries and states DropDownLists where based on a selected country you need to populate the states DropDownList. In this article I would like to explain how to implement Cascading DropDownList with AngularJS and ASP.NET MVC. 
Here we will use AngularJS ng-change directive will allow us to monitor value changes on input elements and allows you to specify custom behavior in our AngularJS applications. Like here in this application, I have used ng-change in a Dropdown to monitor value changes and specify a function (custom behavior), which will fire when the value of the dropdown has been changed.
Part5 - Cascade Dropdown using AngularJS and MVC4
{{Result}}
Part 5 - How to implement Cascading DropDownList with AngularJS and ASP.NET MVC
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    <style>
        .menuUl {
            list-style:none;
            margin:0px;
            padding:0px;
        }
            .menuUl li {
                float:left;
                padding:3px;
                margin-right:2px;
                background-color:#f3f3f3;
            }
                .menuUl li a {
                    display:block;
                    line-height:30px;
                    padding:0px 5px;
                    color:#920f0f;
                    text-decoration:none;
                }
                    .menuUl li a:hover {
                        text-decoration:underline;
                    }
    </style>
</head>
    @* Here  ng-app="MyApp" is used for auto-bootstrap an AngularJS application. here ng-app="MyApp" means <body> element is the owner 
    of AngularJS application*@


<body ng-app="MyApp">
     <ul class="menuUl">
         <li><a href="#" style="color:black;"><b>Angular Example :</b></a></li>
         <li>@Html.ActionLink("Part 1", "Index")</li>
         <li>@Html.ActionLink("Part 2", "Part2")</li>
         <li>@Html.ActionLink("Part 3", "Part3")</li>
         <li>@Html.ActionLink("Part 4", "Part4")</li>
     </ul>
    <div style="height:1px; clear:both;"></div>
    @RenderBody()

    @Scripts.Render("~/bundles/jquery")
    @* Add Angular Library Here *@
    @Scripts.Render("~/bundles/angular")
    <script src="~/Scripts/MyApp.js"></script>
    @RenderSection("scripts", required: false)
</body>
</html>


Posted By :