ViewModel post back a null Collection in asp.net mvc 5

Question

    public class SaleItem
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }

    public class SalesDBContext
    {
        public static List<SaleItem> GetItems()
        {
            var items = new List<SaleItem>(){
                new SaleItem{Id=1,Name="Soap"},
                new SaleItem{Id=2,Name="Milk Power"},
                new SaleItem{Id=3,Name="Toothpaste"},
                new SaleItem{Id=4,Name="Ice Cream"}
            };
            return items.ToList();
        }
    }

    public class SalesViewModel
    {
        public string Item { get; set; }
        public List<SaleItem> itemlist { get; set; }
    }

I have above SalesViewModel class and SalesDBContext for dummy data generation. I want to add items to a list selected from a dropdown. For that I have created the following view:

@model MVCDropdown.Models.SalesViewModel
@using MVCDropdown.Models

<form method="post">
    <p>
        @Html.DropDownListFor(model => model.Item, new SelectList(ViewBag.Items, "Id", "Name"), "--select--")
        <input type="submit" value="Add" />
    </p>
    <p>
        @if (Model.itemlist != null)
        {
            <table>
                @foreach (var s in Model.itemlist)
                {
                    <tr>
                        <td>@s.Name</td>
                    </tr>
                }
            </table>
        }
    </p>
</form>

The Controller

        [HttpGet]
        public ActionResult Index()
        {
            SalesViewModel model = new SalesViewModel
            { 
                Item = "",
                itemlist = new List<SaleItem>()
            };
            PopDrodown();
            return View(model);
        }

        [HttpPost]
        public ActionResult Index(SalesViewModel vm)
        {
            var t = SalesDBContext.GetItems().Where(x => x.Id == Convert.ToInt32(vm.Item)).FirstOrDefault();
            vm.itemlist.Add(t);
            PopDrodown();
            return View(vm);
        }

        private void PopDrodown()
        {
            ViewBag.Items = SalesDBContext.GetItems();
        }

Items added to the list should be displayed in a table under the dropdown. However, when I post post back a selected item from the dropdown by pressing add, it returns a null itemlist to the controller, and previously added items are not there. How can I avoid this problem?

Answer 1

You only have a single input element inside your HTML form: that's the dropdown. So the only value that is sent to your controller action when the form is submitted is the Item property. If you want to send the collection you could use hidden fields:

<table>
    @for (var i = 0; i < Model.itemlist.Count; i++)
    {
        <tr>
            <td>
                @Html.HiddenFor(x => x.itemlist[i].Id)
                @Html.HiddenFor(x => x.itemlist[i].Name)
                @Html.DisplayFor(x => x.itemlist[i].Name)
            </td>
        </tr>
    }
</table>

Obviously if the user is not supposed to edit the values inside the HTML form, then a much better approach is to have a POST view model that will contain only the properties that the user can modify and you will retrieve the collection elements from the same place you retrieved them in the GET action.