Update Form Multiple Select Can't Display Value in ASP.NET MVC

Question

I have a multiple select type control named fruit. When I want to update the fruitcollection form, the value that I entered earlier cannot appear on the fruitcollection multiple select form. What's the solution? Thank you

Update.cshtml (View)

...
    <select class="form-control select2" multiple="multiple" name="FruitsCollection" value="@Model.Fruit">
     <option value="Apple">Apple</option>
     <option value="Banana">Banana</option>
     <option value="Watermelon">Watermelon</option>
    </select> 
...

StoreController.cs (Controller)

MyDbContext db = new MyDbContext();
...
public ActionResult Update(int id)
{
      MasterStore store = new MasterStore();
      if (id!=0)
      {
          store = db.MasterStore.Where(s => s.Id == id).FirstOrDefault();
          promo.FruitsCollection = promo.Fruit.Split(',').ToArray();
      }
   return View(store);
}
[HttpPost]
public ActionResult UpdateStore(MasterStore store)
{
     MasterStore p = db.MasterStore.Where(s => s.Id == store.Id).First();
     p.Id = store.Id;
     p.Fruit = store.Fruit;
}
...

MasterStore.cs (Model)

...
public partial class MasterStore
{
    public int Id { get; set; }
    public string Fruit { get; set; }

    [NotMapped]
    public string[] FruitsCollection { get; set; }
}
...

<select> elements don't have a value attribute. developer.mozilla.org/en-US/docs/Web/HTML/Element/select — Tieson T.
– Tieson T., Commented Nov 26, 2019 at 4:14
<option value="Apple">Apple</option> <option value="Banana">Banana</option> <option value="Watermelon">Watermelon</option> I added, but still can't — ANder
– ANder, Commented Nov 26, 2019 at 4:43

Tieson T. · Accepted Answer · 2019-11-26 05:05:29Z

Based on your model, you could do something like this:

<select class="form-control select2" multiple="multiple" name="FruitsCollection">
     <option value="Apple" selected="@(Model.FruitsCollection.Contains("Apple") ? "selected" : null)">Apple</option>
     <option value="Banana" selected="@(Model.FruitsCollection.Contains("Banana") ? "selected" : null)">Banana</option>
     <option value="Watermelon" selected="@(Model.FruitsCollection.Contains("Watermelon") ? "selected" : null)">Watermelon</option>
</select>

This part,

selected="@(Model.FruitsCollection.Contains("Apple") ? "selected" : null)"

will either render as selected="selected", or be omitted - the tag builder omits attributes that are set to null.

That's not really going to scale well. You probably would get better results from using the HtmlHelper for a multi-select, the ListBoxFor helper:

@Html.ListBoxFor(m => m.FruitCollection, 
    /* todo */, 
    new { @class="form-control select2" })

You would need to decide how you want to build the required second parameter, where I have the /* todo */ placeholder. That needs to be an instance of the MultiSelectList class, which you can create inline or as part of creating the model within the controller. Here's the bare minimum to do it inline with your values:

@Html.ListBoxFor(m => m.FruitCollection, 
    new MultiSelectList(new string[]{ "Apple", "Banana", "Watermelon" }), 
    new { @class="form-control select2" })

Collectives™ on Stack Overflow

Update Form Multiple Select Can't Display Value in ASP.NET MVC

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related