How to Create a DropDownList in ASP.NET MVC - CodAffection
[the_ad_placement id="before-content"]

How to Create a DropDownList in ASP.NET MVC

DropDownList in ASPNET MVC


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.


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.

How to Create a New MVC Project

Step 1

Open your Visual Studio.
go to File > New >Project.

Create new project in visual studio

Under Visual C#, select Web.
Name your application, select project the location. Click OK.

Create Mvc Project

Select MVC template, check Mvc. Click OK.

Select Mvc Template

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

@model DropDownListInMVC.Models.Stock

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,

@using (Html.BeginForm("AddOrEdit", "Stock", FormMethod.Post))

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.

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.


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


you can use same razor code for dropdown list.


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

4 thoughts on “How to Create a DropDownList in ASP.NET MVC”

  1. Thanks DOTNET MOB. It works fine and saves to the database. However, I get an error in the front-end.

    Value cannot be null.
    Parameter name: items

    Below is the line with an error:

    Line 22: @Html.DropDownListFor(model => model.Role_id, new SelectList(Model.RolesCollection, “Role_id”, “Role_name”),”select”)


    1. I get the same error when I use this and add into your other project “Asp.Net MVC CRUD Operations Using Datatable”

Leave a Comment

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

Scroll to Top
Share via
Copy link
Powered by Social Snap