Filter Grid With Cascading Dropdownlist In MVC Using Razor

Agenda

1. Creating MVC basic application
2. Adding an ADO.Net entity model to the application
3. Adding a Home Controller
4. Adding a View Model (CustomerView)
5. Adding a View
6. Binding a dropdown to Country
7. Binding a dropdown to states based on the country using JSON
8. Creating a partial view for displaying records in the Grid
9. Final output

I like to write stuff as simple as possible to make them simple to understand for the readers. I have wrote various MVC articles as in the following:

• Creating Insert Update and Delete application In MVC 4 Using Razor

http://www.c-sharpcorner.com/UploadFile/4d9083/creating-insert-update-and-delete-application-in-mvc-4-using/

• Creating Simple WebGrid In MVC 4 Using Simple Model And Dataset

http://www.c-sharpcorner.com/UploadFile/4d9083/creating-simple-webgrid-in-mvc-4-using-simple-model-and-data/

• Binding Dropdownlist With Database In MVC

http://www.c-sharpcorner.com/UploadFile/4d9083/binding-dropdownlist-in-mvc-in-various-ways-in-mvc-with-data/

• Creating Simple Cascading Dropdownlist In MVC 4 Using Razor

http://www.c-sharpcorner.com/UploadFile/4d9083/creating-simple-cascading-dropdownlist-in-mvc-4-using-razor/

• Binding Radiobutton and Radiobuttonlist in Various Way in MVC With Database

http://www.c-sharpcorner.com/UploadFile/4d9083/binding-radiobutton-and-radiobuttonlist-in-various-way-in-mv201/

• How to Create Google Charts With MVC 4

http://www.c-sharpcorner.com/UploadFile/4d9083/how-to-create-google-charts-with-mvc-4/

• Globalization and Localization in ASP.Net MVC 4

http://www.c-sharpcorner.com/UploadFile/4d9083/globalization-and-localization-in-Asp-Net-mvc-4/

• Creating Simple Checkbox list in MVC 4 Using Razor

http://www.c-sharpcorner.com/UploadFile/4d9083/creating-simple-checkboxlist-in-mvc-4-using-razor/ Let's start.

• Creating MVC basic application

For creating the basic application in MVC in Visual Studio IDE select "File" -> "New" -> "Project...". A New Project dialog will pop up. Inside that there is a template list and from that select web and in the project template list select ASP.NET MVC 4 Web Application and name your project Simplesearch and click on the OK button. During the adding of the project a new dialog will pop up for selecting the Project Template and inside that select the basic Template. After creating the application here is the complete folder view. Now that we have created the application, let's work with the database part

• Adding an ADO.NET Entity Data Model to the application (.edmx)

In this demo I will use the following 3 tables:

• Country
• State
• Customerdetails

State Table

Customerdetails Table

Procedure to Add Entity Data Model We will add an ADO.NET Entity Data Model in the Model folder.

1. For adding, right-click on the Model Folder select Add then inside that select ADO.NET Entity Data Model.
2. After selecting, a small dialog will pop up to prompt for a name; I am providing the name OrderDB. Then click on the OK button.
3. After clicking on the OK button a new wizard will pop up with the name Entity Data Model wizard. In that select Generate from Database.
4. Next a wizard will pop up for the Connection Properties. Here just enter all the connection related information for the database that you want to use and then select “Yes include the sensitive data in the connection string”.
5. Now in the next wizard it will ask for selecting tables from the database and inside that select [Country, State , Customerdetails ] then finally click on the Finish button.

After adding the Entity Data Model here is the complete folder view.

• Adding Home Controller

For adding the Controller just right-click on the Controller folder select Add then select Controller. After selecting, a new dialog will pop up with the name Add controller. Here we will name the controller HomeController and in the scaffolding option in the template select Empty MVC controller. The Add Controller dialog snapshot is below: After adding the Controller the default Index ActionResult is generated, here is the code. Now let's move forward and add ViewModel with name CustomerView.

• Adding view Model (CustomerView)

For adding just right-click on the Model folder then select Add then select Class. A new wizard will pop up asking of a class name. Name it CustomerView.cs and click on the Add button. An empty class is generated. Now let's add some properties to it. I have added SelectedCountriesId and Country List properties for binding to the dropdownlist. And for binding the grid I have use a Customerdetail List. And for binding the state we will use JSON. Now we have completed the adding of the View Model, let's add a View.

• Adding View

To add a view just right-click inside the Index ActionResult. A new dialog will pop up with the name Add View and we have a default view name the same as the ActionResult Name (Index). We will not be using the scaffolding template when adding the View. A blank view is generated and now here is the default code that is generated. Now let's configure an Index [HttpGet] ActionResult such that we can pass a CustomerView Model to the index View. Here is the code that I wrote in the Index ActionResult for binding the Country Dropdownlist. I created an object of OrderDBEntities and using LINQ I get data from the Countries table. And creating the CustomerView object for sending the model to the view and in the Countrieslist property of CustomerView I passed a list, Countrieslist, that we got data for by querying the database. Code snippet of Index ActionResult Here you will also find that we have sent a Customerdetail model a null because we are not showing records on the HttpGet request. And using ViewData["Selectedstate"] for maintaining the state after a postback to the controller. For binding the state we will use jQuery ajax and that is why we created a JsonResult to get the state value by passing the country id to Jsonresult. Code snippet of GetStates JsonResult After adding an Action method let's move toward configuring a View. We will now add a ViewModel (CustomerView) and a Dropdownlist to the View. Adding Model to View

• Binding dropdown Country

Adding a Dropdownlist of County and State to the View. After adding a Dropdownlist list, now let's add a jQuery script for binding the state on a change of the country dropdownlist.

• Binding dropdown states based on country using JSON

Adding jQuery Ajax script for binding State dropdownlist. After adding Dropdownlist and jQuery ajax script now let's run the application and check how your dropdownlist displays. Here is the View of Index.cshtml after rendering on the browser. URL: http://localhost:1381/Home/index We have a dropdownlist bound. Now let's add a partial view.

• Creating Partial view for displaying records in grid

For adding the View just right-click inside Index ActionResult then a new dialog will pop up with the name Add View and we have a default view name the same as the ActionResult name (Index). Just change the name of the view to Displaygrid then we just need to check the “Create as a Partial View” option and click on the Add button. An empty Partial view is created.