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.[su_accordion][su_spoiler title=”How to Create a New MVC Project ?”] 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

 

[/su_spoiler][/su_accordion] 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

Copy to Clipboard

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

Copy to Clipboard

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.

Copy to Clipboard

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

Copy to Clipboard

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

Copy to Clipboard

[su_quote]Instead of C# List, you can also use IEnumerable Collection[/su_quote]

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

Copy to Clipboard

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

Copy to Clipboard

s
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

Copy to Clipboard

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

Copy to Clipboard

you can use same razor code for dropdown list.

Copy to Clipboard

Method-2

Copy to Clipboard

slight change in razor view

Copy to Clipboard
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

Copy to Clipboard

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