Home/ Questions/Q 6125083
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T16:12:25+00:00

How do I make the default modelbinding handle Lists? Let’s say I have a

  • 0

How do I make the default modelbinding handle Lists?

Let’s say I have a ShoppingCart class, which has a ShoppingCartItem List:

Public Class ShoppingCart
  Public Property CouponCode As String
  Public Property Items As New List(Of ShoppingCartItem)
End Class

Public Class ShoppingCartItem
  Public Property Title As String
  Public Property Count As Integer
End Class

My view looks like this (as per the advice from this, and this, blogpost):

@ModelType VAVTag.LuckyDraw.ShoppingCart

@Code
  Layout = Nothing
End Code
<!DOCTYPE html>
<html>
<head runat="server">
  <title>Index</title>
</head>
<body>
  @Using Html.BeginForm()
    @<fieldset>
      <legend>ShoppingCart</legend>
      @Html.TextBoxFor(Function(m) m.CouponCode)
      <hr />
      @Html.EditorFor(Function(m) m.Items)

      <p>
        <input type="submit" value="Save" />
      </p>
    </fieldset>
  End Using
</body>
</html>

The items are rendered using an EditorTemplate (thanks Darin):

@ModelType ShoppingCartItem
@Html.EditorFor(Function(m) m.Title )
@Html.EditorFor(Function(m) m.Count )
<br />

In my controller, I’m inserting some random data, and the view renders my shoppingcart nicely, with three items. 

Public Class ShoppingCartController
  Inherits System.Web.Mvc.Controller

  Function Index() As ActionResult
    Dim model As New ShoppingCart
    model.Items.Add(New ShoppingCartItem With {.Count = 1, .Title = "Item A"})
    model.Items.Add(New ShoppingCartItem With {.Count = 17, .Title = "Item B"})
    model.Items.Add(New ShoppingCartItem With {.Count = 100, .Title = "Item C"})

    Return View(model)
  End Function

  <HttpPost()>
  Function Index(model As ShoppingCart) As ActionResult
    Return View(model) ' model is empty!
  End Function
End Class

However, when I submit the page, no values are picked up, not even the CouponCode field. The model object is empty. What gives?

Ultimately, my goal is to add/remove items clientside via javascript and then have the modelbinder pick up the changes automatically when the page is submitted.

Update: I was just missing the Property keyword from my model properties declarations. It’s too late, and I got to get some sleep. 🙂

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    How do I make the default modelbinding handle Lists?

    The default model binder already handles lists and dictionaries perfectly fine.

    Just use editor templates. For example:

    View model:

    public class ShoppingCartItem
{
    public string Title { get; set; }
    public int Count { get; set; }
}

public class ShoppingCart
{
    public string CouponCode { get; set; }
    public List<ShoppingCartItem> Items { get; set; }
}

    Controller:

    public class HomeController : Controller
{
    public ActionResult Index()
    {
        var model = new ShoppingCart
        {
            Items = new[]
            {
                new ShoppingCartItem { Count = 1, Title = "Item A" },
                new ShoppingCartItem { Count = 17, Title = "Item B" },
                new ShoppingCartItem { Count = 100, Title = "Item C" },
            }.ToList()
        };
        return View(model);
    }

    [HttpPost]
    public ActionResult Index(ShoppingCart model)
    {
        return View(model);
    }
}

    View:

    @model ShoppingCart
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <title>Index</title>
</head>
<body>
    @using (Html.BeginForm())
    {
        <fieldset>           
            <legend>ShoppingCart</legend>
            @Html.TextBoxFor(x => x.CouponCode)
            <hr/>
            @Html.EditorFor(x => x.Items)
        </fieldset>
        <p>
            <input type="submit" value="Save" />
        </p>
    }
</body>
</html>

    and finally the editor template (~/Views/Home/EditorTemplates/ShoppingCartItem.cshtml) which will be rendered for each item of the Items collection:

    @model ShoppingCartItem
@Html.EditorFor(x => x.Title)
@Html.EditorFor(x => x.Count)
    • 0