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
- Select and install Json.NET
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.
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
- Select Item as Model class and InventoryDBContext as context class and click Add button as follows
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.
Means, it’s working…!! Cheers!!!
