Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Choose which option is selected on pageload of razor Html.DropDownListFor() in HTML?
The Html.DropDownListFor() helper in Razor allows you to create dropdown lists bound to model properties. To control which option is selected on page load, you can use the Selected property of SelectListItem or rely on the model's property value to automatically determine the selection.
Syntax
Following is the basic syntax for Html.DropDownListFor() with preselected options −
@Html.DropDownListFor(m => m.PropertyName,
new List<SelectListItem> {
new SelectListItem { Value = "value1", Text = "Text1", Selected = condition },
new SelectListItem { Value = "value2", Text = "Text2", Selected = condition }
},
htmlAttributes)
Using the Selected Property
The most straightforward way to control which option is selected is by setting the Selected property of SelectListItem based on a condition that compares the option's value with the model property.
Example − Boolean Dropdown with Conditional Selection
Following example shows how to create a dropdown that selects "Show" or "Hide" based on the model's Valeur property −
<!DOCTYPE html>
<html>
<head>
<title>DropDownListFor Selection Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Visibility Control</h2>
<!-- Simulating Razor syntax in HTML -->
<select name="Valeur" class="selectnew">
<option value="0" selected>Show</option>
<option value="1">Hide</option>
</select>
<p>The "Show" option is preselected when Valeur equals 0.</p>
</body>
</html>
The equivalent Razor code would be −
@Html.DropDownListFor(m => m.Valeur,
new List<SelectListItem> {
new SelectListItem { Value = "0", Text = "Show", Selected = Model.Valeur == 0 },
new SelectListItem { Value = "1", Text = "Hide", Selected = Model.Valeur != 0 }
},
new { @class = "selectnew" })
Automatic Selection Based on Model Value
When the dropdown is bound to a model property using DropDownListFor, ASP.NET MVC automatically selects the option whose Value matches the model property's current value. This means you can omit the Selected property if the values align correctly.
Example − Category Selection
Following example demonstrates automatic selection based on model value −
<!DOCTYPE html>
<html>
<head>
<title>Category Dropdown Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Product Category</h2>
<!-- Simulating automatic selection when CategoryId = 2 -->
<select name="CategoryId">
<option value="1">Electronics</option>
<option value="2" selected>Books</option>
<option value="3">Clothing</option>
<option value="4">Home & Garden</option>
</select>
<p>When CategoryId = 2, "Books" is automatically selected.</p>
</body>
</html>
The Razor code for this would be −
@Html.DropDownListFor(m => m.CategoryId,
new List<SelectListItem> {
new SelectListItem { Value = "1", Text = "Electronics" },
new SelectListItem { Value = "2", Text = "Books" },
new SelectListItem { Value = "3", Text = "Clothing" },
new SelectListItem { Value = "4", Text = "Home & Garden" }
})
Using SelectList for Cleaner Code
Instead of manually creating SelectListItem objects, you can use SelectList which automatically handles the selection based on the selected value parameter.
Example − Status Dropdown with SelectList
@Html.DropDownListFor(m => m.Status,
new SelectList(new List<object> {
new { Value = "Active", Text = "Active" },
new { Value = "Inactive", Text = "Inactive" },
new { Value = "Pending", Text = "Pending" }
}, "Value", "Text", Model.Status))
Here, the fourth parameter Model.Status determines which option is selected based on matching the value.
Multiple Conditions for Selection
You can use more complex conditions to determine which option should be selected on page load.
Example − Priority Dropdown with Complex Logic
<!DOCTYPE html>
<html>
<head>
<title>Priority Selection Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Task Priority</h2>
<!-- Demonstrating different priority selections -->
<select name="Priority">
<option value="1">Low</option>
<option value="2" selected>Medium</option>
<option value="3">High</option>
<option value="4">Critical</option>
</select>
<p>Medium priority is selected based on business logic.</p>
</body>
</html>
The corresponding Razor code with complex selection logic −
@Html.DropDownListFor(m => m.Priority,
new List<SelectListItem> {
new SelectListItem { Value = "1", Text = "Low", Selected = Model.Priority == 1 || Model.IsNewTask },
new SelectListItem { Value = "2", Text = "Medium", Selected = Model.Priority == 2 && !Model.IsUrgent },
new SelectListItem { Value = "3", Text = "High", Selected = Model.Priority == 3 || Model.IsUrgent },
new SelectListItem { Value = "4", Text = "Critical", Selected = Model.Priority == 4 }
})
Best Practices
When working with dropdown selection in Razor, consider the following approaches −
| Approach | Best For | Pros | Cons |
|---|---|---|---|
| Selected property with conditions | Complex selection logic | Full control over selection | More verbose code |
| Automatic model binding | Simple value matching | Clean, concise code | Limited to exact value matches |
| SelectList with selected value | Dynamic data from database | Works well with collections | Requires proper data structure |
Conclusion
To choose which option is selected on page load in Html.DropDownListFor(), you can either set the Selected property of SelectListItem based on conditions, or rely on automatic model binding where MVC matches the dropdown value to the model property. The Selected property approach offers more control for complex scenarios, while automatic binding provides cleaner code for simple value matching.
232 Views
