Cascading Dropdown List in ASP.Net MVC a sample demonstration

Last couple of weeks I found a good number of requests from my trainees and some .NET developers. They request me for sample code or a demonstration of cascading dropdown list in ASP.NET MVC. That’s why, I am writing this article. Cascading dropdown list is actually a parent child dropdown list. In this article I showed two dropdown lists one is category dropdown list and other is product dropdown list. Product dropdown list will be populated on the basis of category (selected category).

Let’s implement cascading dropdown list in ASP.NET MVC

Tools and Technology used
I used following tools and technology to develop the project –

1. Visual Studio 2013
2. Visual C#
3. ASP.NET MVC 5
4. Entity Framework 6
5. JQuery Ajax

Step 1: Create a ASP.NET MVC Project
Open visual studio and then go
File -> Project -> ASP.NET Web Application
Create an ASP.NET MVC project

Step 2: Install Json.NET
Click right button on Project -> NuGet Packages

2015-12-04-01

  • Select and install Json.NET

2015-12-04-02

Keep note that in this moment, your internet connection must on.

Step 3: Create a local database
Click right button on App_Data folder -> Select Add -> SQL Server Database.

2015-12-04-03

Type Item name as InventoryDB. You can choose any type you want. You will see Inventory.mdf file is created in App_Data folder

Step 4: Modify connection string.
Modify connection string as below because you are using localdb.


  
    
  

Step 5: Create a model for the application.

Create a model name Category in model folder

    public class Category
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public List Products { get; set; }
    }

Create a model name Product in model folder

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

        public int CategoryId { get; set; }

        [ForeignKey("CategoryId")]
        public virtual Category Category { get; set; }
    }

Create a model name Item in model folder

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

        [Display(Name = "Category")]
        public int CategoryId { get; set; }
        [ForeignKey("CategoryId")]
        public virtual Category Category { get; set; }

        [Display(Name = "Products")]
        public int ProductId { get; set; }
        [ForeignKey("ProductId")]
        public Product Product { get; set; }
    }

Step 6: Create Context Class
Create a context class in model folder name InventoryDBContext as follows

    public class InventoryDBContext : DbContext
    {
        public InventoryDBContext()
            : base("DefaultConnection")
        {

        }

        public DbSet Categories { get; set; }
        public DbSet Products { get; set; }
        public DbSet Items { get; set; }
    }

Step 7: Enable Migration

Go to Tools-> NuGet Package Manager -> Package Manger Console
Type the following command in package manager console to enable migration
PM> Enable-Migrations -ContextTypeName InventoryDBContext

After pressing enter you will see a class name Configuration is created in Migrations folder with some codes.
Now add seed data in Seed method of Configuration class in Migrations folder as follows.

    internal sealed class Configuration : DbMigrationsConfiguration
    {
        public Configuration()
        {
            AutomaticMigrationsEnabled = false;
        }

        protected override void Seed(Web.Mahedee.net.Models.InventoryDBContext context)
        {
            context.Categories.AddOrUpdate(
                p => p.Name,
                new Category
                {
                    Name = "Electronics",
                    Products = new List { 
                        new Product{Name = "Mobile"},
                        new Product{Name = "Laptop"},
                        new Product{Name = "Television"},
                        new Product{Name = "Camera"}
                    }

                },

                new Category
                {
                    Name = "Men ware",
                    Products = new List 
                    { 
                        new Product{Name = "Footware"},
                        new Product{Name = "Clothings"},
                        new Product{Name = "Watches"},
                        new Product{Name = "Hand bag"},
                        new Product{Name = "Sun Glass"}
                    }
                },

                new Category
                {
                    Name = "Baby & Kids",
                    Products = new List 
                    { 
                        new Product{Name = "Baby footware"},
                        new Product{Name = "Kids clothigs"},
                        new Product{Name = "Baby care"}
                    }
                },

                 new Category
                {
                    Name = "Books",
                    Products = new List 
                    { 
                        new Product{Name = "Introduction to C#"},
                        new Product{Name = "ASP.NET MVC Begineer to Professional"},
                        new Product{Name = "ASP.NET Web API Security"},
                        new Product{Name = "SPA with ASP.NET MVC"}
                    }
                }

                );
        }
    }

Step 8: Add Migration and Update database
In package manager console write the following command to add a migration.

PM> add-migration firstmigration

A file will be created in Migrations folder something like below.
File Name: 201512041037292_firstmigration

Update the file, in AddForeignKey section and set false for cascadeDelete as follows.

   public partial class firstmigration : DbMigration
    {
        public override void Up()
        {
            DropForeignKey("dbo.Categories", "Item_Id", "dbo.Items");
            DropForeignKey("dbo.Products", "Item_Id", "dbo.Items");
            DropIndex("dbo.Categories", new[] { "Item_Id" });
            DropIndex("dbo.Products", new[] { "Item_Id" });
            CreateIndex("dbo.Items", "CategoryId");
            CreateIndex("dbo.Items", "ProductId");

            AddForeignKey("dbo.Items", "CategoryId", "dbo.Categories", "Id", cascadeDelete: false);
            AddForeignKey("dbo.Items", "ProductId", "dbo.Products", "Id", cascadeDelete: false);

            DropColumn("dbo.Categories", "Item_Id");
            DropColumn("dbo.Products", "Item_Id");
        }
        
        public override void Down()
        {
            AddColumn("dbo.Products", "Item_Id", c => c.Int());
            AddColumn("dbo.Categories", "Item_Id", c => c.Int());
            DropForeignKey("dbo.Items", "ProductId", "dbo.Products");
            DropForeignKey("dbo.Items", "CategoryId", "dbo.Categories");
            DropIndex("dbo.Items", new[] { "ProductId" });
            DropIndex("dbo.Items", new[] { "CategoryId" });
            CreateIndex("dbo.Products", "Item_Id");
            CreateIndex("dbo.Categories", "Item_Id");
            AddForeignKey("dbo.Products", "Item_Id", "dbo.Items", "Id");
            AddForeignKey("dbo.Categories", "Item_Id", "dbo.Items", "Id");
        }
    }

Write the following command in package manager console to update database.
PM> update-database –Verbose

Step 9: Add Items Controller

  • Right click on Controllers folder -> Add -> Controller
  • Select MVC 5 Controller with views using Entity Framework and the click Add

2015-12-04-04

  • Select Item as Model class and InventoryDBContext as context class and click Add button as follows

2015-12-04-05

ItemsController and Views will be created automatically.

Step 10: Update Items controller

  • Modify the following action of Items controller
        public ActionResult Create()
        {
            List lstCategory = db.Categories.ToList();
            lstCategory.Insert(0, new Category { Id = 0, Name = "--Select Category--" });

            List lstProduct = new List();
            ViewBag.CategoryId = new SelectList(lstCategory, "Id", "Name");
            ViewBag.ProductId = new SelectList(lstProduct, "Id", "Name");
            return View();
        }

  • Add the following action in the Items controller
        public JsonResult GetProductsByCategoryId(int id)
        {
            List products = new List();
            if (id > 0)
            {
                products = db.Products.Where(p => p.CategoryId == id).ToList();

            }
            else
            {
                products.Insert(0, new Product { Id = 0, Name = "--Select a category first--" });
            }
            var result = (from r in products
                          select new
                          {
                              id = r.Id,
                              name = r.Name
                          }).ToList();

            return Json(result, JsonRequestBehavior.AllowGet);
        }

Step 5: Modify the Create View of Items folder
Modify the Create View as follows.

@model Web.Mahedee.net.Models.Item

@{
    ViewBag.Title = "Create";
}




Create

@using (Html.BeginForm()) { @Html.AntiForgeryToken()

Item


@Html.ValidationSummary(true, "", new { @class = "text-danger" })
@Html.LabelFor(model => model.CategoryId, "Category", htmlAttributes: new { @class = "control-label col-md-2" })
@Html.DropDownList("CategoryId", null, htmlAttributes: new { @class = "form-control" }) @Html.ValidationMessageFor(model => model.CategoryId, "", new { @class = "text-danger" })
@Html.LabelFor(model => model.ProductId, "Product", htmlAttributes: new { @class = "control-label col-md-2" })
@Html.DropDownList("ProductId", null, htmlAttributes: new { @class = "form-control" }) @Html.ValidationMessageFor(model => model.ProductId, "", new { @class = "text-danger" })
@Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
@Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
}
@Html.ActionLink("Back to List", "Index")
@section Scripts { @Scripts.Render("~/bundles/jqueryval") }

Now run the application and type the following URL .

http://localhost:61767/Items/Create

You will see the following output. Now select category from category dropdown lsit, you will see product dropdown list is populating on corresponding category.

2015-12-04-06

Means, it’s working…!! Cheers!!!

Please share, if it is helpfulShare on FacebookShare on LinkedInTweet about this on TwitterShare on Google+Email this to someonePrint this page

4 thoughts on “Cascading Dropdown List in ASP.Net MVC a sample demonstration

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>