ASP.NET MVC pre-selected Html.DropDownListFor

Question

I have problem with Html.DropDownListFor. I have read a lot of similar questions but I still dont understand what I have to do. I dont know how to make Meal "bb" in dropdown list as pre-selected value.

EDIT: function code:

ViewModel

public class OrderForm
{
    public int Id { get; set; }
    public string MealName { get; set; }
    public int OrderCount { get; set; }
    public List<SelectListItem> MealOptions { get; set; }
}

Controller

public IActionResult OrderForm()
{
    List<SelectListItem> mealOptions = new List<SelectListItem>();

    mealOptions.Add(new SelectListItem("aa", "1"));
    mealOptions.Add(new SelectListItem("bb", "2"));
    mealOptions.Add(new SelectListItem("cc", "3"));

    OrderForm viewModel = new OrderForm
    {
         MealName = "someMeal",
         Id = 2,
         OrderCount = 5,
         MealOptions = mealOptions
    };

    return View(viewModel);
}

View

@model OrderForm
@Html.LabelFor(x => x.MealName)
@Html.TextBoxFor(x => x.MealName)
@Html.DropDownListFor(x => x.Id, Model.MealOptions)

HTML Result

<div>
    <label for="MealName">MealName</label>
    <input id="MealName" name="MealName" type="text" value="someMeal" />

    <select data-val="true" data-val-required="The Id field is required." id="Id" name="Id">
          <option value="1">aa</option>
          <option selected="selected" value="2">bb</option>
          <option value="3">cc</option>
    </select>
</div>

This is my result.

Nayan · Accepted Answer · 2022-05-22T05:43:46.070

2

Working Sample: https://dotnetfiddle.net/MHLuvc

Model

using System.Web.Mvc;
using System.Collections.Generic;

public class OrderForm {
    public int Id { get; set; }
    public string MealName {get; set;}
    public int OrderCount { get; set; }
    public int MealItemId {get;set;}
    public List<SelectListItem> MealOptions { get; set; }
}

public class MealItem {
    public int AltId {get;set;}
    public string Name {get;set;}
}

Controller

using System.Linq;

public IActionResult OrderForm(int id)
{
    var mealItems = new List<MealItem>() {
         new MealItem(){AltId = 0,Name = "aa"},
         new MealItem(){AltId = 1,Name = "bb"},
         new MealItem(){AltId = 2,Name = "cc"}
    };
        
    var mealOptions = mealItems.Select(prop => new SelectListItem() { Text = prop.Name, Value = prop.AltId.ToString() }).ToList();

    OrderForm viewModel = new OrderForm
    {
        MealName = "someMeal",
        Id = 4,
        OrderCount = 5,
        MealItemId = 2, // Set Default MealOption Id
        MealOptions = mealOptions
    };

    return View(viewModel);
}

View

@model OrderForm

@{
    @Html.LabelFor(x => x.MealName)
    @Html.TextBoxFor(x => x.MealName)
    @Html.DropDownListFor(x => x.MealItemId, Model.MealOptions)
}

edited May 22 '22 at 05:43

answered May 21 '22 at 14:09

Nayan

471
2
9

check updated answer – Nayan May 21 '22 at 14:48
This solution I have in question and it does not work. – Pavel May 21 '22 at 15:00
Sample: https://dotnetfiddle.net/hHJrWs – Nayan May 21 '22 at 15:02
You need to pass the model into the view, see my answer below. – Stewart May 21 '22 at 15:20
@Nayan Ok. it works, thank you. Now I try to do it as Stewart say. Pass the model into the view. In cases when I want to pre-populate more items. Because when I do in this solution `return View(order)` this solution stop working. – Pavel May 21 '22 at 16:18
check updated answer. Hope it helps. Working Sample: https://dotnetfiddle.net/MHLuvc – Nayan May 22 '22 at 05:44

Stewart · Answer 2 · 2022-05-21T17:40:25.707

1

DropDownListFor requires the View to have a Model (strongly typed), and uses the values in the Model to populate the relevant fields. Below is what you should be aiming at.

/* create a new viewmodal */
public class OrderVm
{
    [DisplayName("Meal Name")]
    public string MealName { get; set; }
    public List<SelectListItem> MealOptions { get; set; } = new List<SelectListItem>();
}

/* updated controller */
public IActionResult OrderForm(int id)
{
   List<MealItem> listMeal = mealService.GetMeals();

   var orderVm = new OrderVm()
   {
       MealName = "bb",
   };

   foreach (MealItem m in listMeal)
   {
       orderVm.MealOptions.Add(new SelectListItem(m.mealName, m.altId.ToString()));
   }

   return View(orderVm);
} 


/* view */
@model OrderVm
@Html.LabelFor(x => x.MealName)
@Html.DropDownListFor(x => x.MealName, Model.MealOptions)

edited May 21 '22 at 17:40

answered May 21 '22 at 14:39

Stewart

705
3
6

I understand. I am able to pre-populate some text box. But when I try to do it with `@Html.DropDownListFor` it doesnt. In my case `mealService.GetMeal(id)` returns `MealIteam` not `OrderForm`. When I do this: `OrderForm order = new OrderForm {MealName = "someMeal",Id = 1}; return View(order);` MealName is pre-populated but dropdownlist doesnt, – Pavel May 21 '22 at 16:17
I made it and without success. I edited code. – Pavel May 21 '22 at 18:25

ASP.NET MVC pre-selected Html.DropDownListFor

2 Answers2