Cascading Kendo DropDownList in Asp.Net MVC

In any type of Forms, a DropDownList is common and from time to time we need to provide the functionality of cascading between drop-down lists. In this article, we will learn how to populate a drop-down list and cascade between those drop-down lists using Kendo DropDownList in the Asp.Net MVC application. Here we will cascade two drop-down lists Author and Books, we will select the book based on the selected author.

Step 1. Create an Empty MVC project and Inside Model folder create two classes as shown below.

public class Author
    {
        public int Id { get; set; }
        public string Name { get; set; }

    }

    public class Book
    {
        public string ISBN { get; set; }
        public int AuthorId { get; set; }
        public string Title { get; set; }
        public decimal Price { get; set; }
    }

Step 2. Create a Controller and name it as Home Controller , then create following methods inside the Home Controller.

// It simply returns a view where we will design our DropDownLists.
public ActionResult CascadeDropdownList()
        {
            return View();
        }

//It return all Authors
        public ActionResult GetAuthors()
        {
            List<Author> authorList = new List<Author>(){
            new Author(){Id=1,Name="Sachin"},
            new Author(){Id=2,Name="Arjun"},
            new Author(){Id=3, Name="Vikash"}
            };
            return Json (authorList,JsonRequestBehavior.AllowGet);
        }

        public List<Book> GetBooks()
        {
            List<Book> bookList = new List<Book>(){
            new Book(){ISBN="AB23",AuthorId=1,Title="Journey to Iceland",Price=2000},
          new Book(){ISBN="AB24",AuthorId=1,Title="Learn c# in one day",Price=780},
           new Book(){ISBN="AB25",AuthorId=2,Title="The ghost Story",Price=890},
            new Book(){ISBN="AB26",AuthorId=2,Title="How to cook food",Price=1000},
          new Book(){ISBN="AB27",AuthorId=3,Title="Learn SQL in 24 hours",Price=2000},
           new Book(){ISBN="AB28",AuthorId=3,Title="How to be happy",Price=4500},
            };
            return bookList;
        }

// It returns books written by a specific author
        public ActionResult GetBooksByAuthor(int? AuthorId)
        {
            return Json (GetBooks().Where(b => b.AuthorId == AuthorId).ToList(), JsonRequestBehavior.AllowGet);
        }

Step 3. Create two dropdownlists in the CascadeDropdownList view as shown below.

    <h4>Authors:</h4>
    @(Html.Kendo().DropDownList()
          .Name("Authors")
          .HtmlAttributes(new { style = "width:50%" })
          .OptionLabel("Select Author...")
          .DataTextField("Name")
          .DataValueField("Id")
          .DataSource(source =>
                  {
                      source.Read(read =>
                             {
                                 read.Action("GetAuthors", "Home");
                             });
                  })
    )

    <h4 style="margin-top: 2em;">Books:</h4>
    @(Html.Kendo().DropDownList()
          .Name("Books")
          .HtmlAttributes(new { style = "width:50%" })
          .OptionLabel("Select books...")
          .DataTextField("Title")
          .DataValueField("ISBN")
          .DataSource(source =>
                  {
                      source.Read(read =>
                      {
                          read.Action("GetBooksByAuthor", "Home")
                              .Data("filterBooks");
                      })
                      .ServerFiltering(true);
                  })
          .Enable(false)
          .AutoBind(false)
                  .CascadeFrom("Authors")
    )

<script>
    function filterBooks() {
        return {
            AuthorId: $("#Authors").val()
        };
    }
</script>

Now let's understand the code.

A DropDownList needs a datasource , so we need to specify the data source for both DropDownLists, The Child DropDownList filters itself based on the filtering condition that we define in the Data() method of Data source , basically the Filtering condition is a JavaScript function.

Now Run the application you will get a beautiful cascading dropdownlist.