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-22 05:43:46Z

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, 2022 at 5:43

answered May 21, 2022 at 14:09

Nayan

6715 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Nayan Over a year ago

check updated answer

Pavel Over a year ago

This solution I have in question and it does not work.

Nayan Over a year ago

Sample: dotnetfiddle.net/hHJrWs

Stewart Over a year ago

You need to pass the model into the view, see my answer below.

Pavel Over a year ago

@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.

|

Stewart · Accepted Answer · 2022-05-21 17:40:25Z

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, 2022 at 17:40

answered May 21, 2022 at 14:39

Stewart

8806 silver badges7 bronze badges

2 Comments

Pavel Over a year ago

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 Over a year ago

I made it and without success. I edited code.

Collectives™ on Stack Overflow

ASP.NET MVC pre-selected Html.DropDownListFor

2 Answers 2

6 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related