How to Create a DropDownList in MVC

Introduction

In this article,  We will discuss on how to create a dropdownlist in mvc projects.

Let’s Start

Story starts like this, we have a real world situation to solve.It looks like below.

Sample DropDownList in MVC

 

A simple form to add new stock into warehouse. It consists of a product Dropdownlist, count text box and a submit button.

A database with product  and stock table is given.

DropDownList-in-Mvc

Hint:
Product table already populated with some products.we want these products in our dropdownlist. Stock table is empty. After form submission, productid of selected product and count from textbox will be added to stock table.

Step 1

Create fresh mvc project.

How to Create a New MVC Project ?
Fresh MVC Project looks like this.

Fresh Mvc Project

Step 2

Added ADO. NET Entity model for the DataBase as DbModel.edmx into Model folder and saved connection string as DbModels.

ADO.Net Entity Model

Product model class

Additional ProductCollection property is added to Stock model. we will be using this property for implementing the product Dropdownlist.

It must be marked with [NotMapped] attribute since it is not a column in Stock table.

Step 3

Add Stock controller with an action AddOrEdit like below.

ProductCollection is populated with product items.

Step 4

Create AddOrEdit view, for that right click on the action click on add view. in the next window uncheck layout option.

Create New Mvc View

Now we need to design the form. You can use bootstrap for designing view but I use html table for simplicity.

Define model as first line in the view

Now inside the body, form design can be done like this

Instead of C# List, you can also use IEnumerable Collection

I don’t know whether you noticed or not we have given form action as AddOrEdit, 

So we need HttpPost Action AddOrEdit. where we need to save posted data from the form.

Put a Breakpoint in this post Action.Navigate to Stock/AddOrEdit then submit the form with some test data.
PopulateForm

After submitting the form you can check our Breakpoint.

Break Point

 

So Selected ‘NoteBook’ id 3 and Count 10 is posted to server.after saving them our stock table looks like this.

DropDownList-in-Mvc-Stock-Table-after-form-submit

Now let me update AddOrEdit Get Action like this

Now navigate to Stock/AddOrEdit/1. you can see the same form that we posted. So now you add can functions like Update Or Delete the Stock.

Other Ways to Create DropDown List in MVC

 From a hard coded list / Static List

Method-1

you can use same razor code for dropdown list.

Method-2

slight change in razor view

DropDownList Vs DropDownListFor

Both of them are Html Helper Methods to create dropdown list in mvc,First Parameter for these functions determines the name for dropdown list.

If we use DropDownList instead of DropDownListFor, Razor code will look like this

here we need to pass name of control as magic string or name is hard coded here.

If we change Model Property ProductId to something else,during form submission, selected value of dropdown will not bind in post request.

So try to stick with DropDownListFor Method. it will make our dropdown strongly typed.

Plugin For DropDown List

There are plenty of plugins for dropdown list.

Wit attractive features like

  • Search options from dropdown
  • Allow multiple selection
  • and much more

Popular Plugins

Post A Reply