Cascading Dropdown List With MVC, LINQ to SQL and AJAX

This article explains how to populate a child dropdown list depending on each new value as values are selected in the parent's DropDown List.

Database Design

I use two tables to populate DropDown Lists. One is a Country table and another is State table. The Country table is a parent table and the State table is a child table. These tables have primary key and foreign key relationships using the CountryId column.

Relationship between Country table and State table:

Create an MVC Application

I will create a MVC application using Visual Studio 2012. So let's see the procedure for creating a MVC application.

Step 1: Go to "File" -> "New" -> "Project...".

Step 2: Choose "ASP.NET MVC 4 Web Application" from the list then give the application name "CountryStateApplication" and set the path in the location input where you want to create the application.

Step 3: Now choose the Project Template "Empty" and select "Razor" as the view engine from the dropdown list.

Adding a LINQ to SQL Class

Entity classes are created and stored in LINQ to SQL Classes files (.dbml files). The O/R Designer opens when you open a .dbml file. It is a DataContext class that contains methods and properties for connecting to a database and manipulating the data in the database. The DataContext name corresponds to the name that you provided for the .dbml file

Step 1: Right-click on the Models folder in the Solution Explorer then go to "Add" and click on "Class.."

Step 2: Choose "LINQ to SQL Classes" from the list and give the name "Address" for the dbml name. After that click on "Add".

Figure 1.2: Create dbml file for Database operation

Step 3: Drag both tables (Country table and State table) from the database in the Server Explorer and drop onto the O/R Designer surface of the "Address.dbml" file.

Figure 1.3: Tables in Address.dbml file

Using the Repository Pattern

The Repository Pattern, according to Martin Fowler, is a repository that mediates between the domain and data mapping layers, acting like an in-memory domain object collection. Client objects construct query specifications declaratively and submit them to the repository for satisfaction. Objects can be added to and removed from the repository, since they can form a simple collection of objects, and the mapping code encapsulated by the repository will carry out the appropriate operations behind the scenes. Conceptually, a repository encapsulates the set of objects persisted in a data store and the operations performed over them, providing a more object-oriented view of the persistence layer. The repository also supports the objective of achieving a clean separation and one-way dependency between the domain and data mapping layers. In practice, it is usually a collection of data access services, grouped in a similar way to the domain model classes.

I implement the Repository pattern by defining one repository class for both domain model entities that require specialized data access methods. A repository class contains the specialized data access methods required for its corresponding domain model entity.

Figure 1.4: Address repository interface and class

When you create the repository class, you create an interface that represents all of the methods used by the repository class. Within your controllers, you write your code against the interface instead of the repository. That way, you can implement the repository using various data access technologies in the future. So first of all you need to create an interface "IAddressRepository" under the Models folder that contains basic access methods for country and states by countryId.

The MVC Model contains all application logic (business logic, validation logic, and data access logic), except pure view and controller logic. Create a "AddressModel" class under the Models folder and create properties for label field and dropdown list values.