In this article, We will discuss on how to create a dropdownlist in mvc projects.
Story starts like this, we have a real world situation to solve.It looks like below.
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
Open your Visual Studio.
go to File > New >Project.
Under Visual C#, select Web.
Name your application, select project the location. Click OK.
Select MVC template, check Mvc. Click OK.
Fresh MVC Project looks like this.
Added ADO. NET Entity model for the DataBase as DbModel.edmx into Model folder and saved connection string as DbModels.
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.
Add Stock controller with an action AddOrEdit like below.
ProductCollection is populated with product items.
Create AddOrEdit view, for that right click on the action click on add view. in the next window uncheck layout option.
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,
@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.
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