asp.net mvc - test is null in the controller upon post -

I have the following code and after the post, the test value is always zero in the controller. What's wrong with the following code:

Model:

  public class suitcase {public string color {get; Set; } Public string [] size {get; Set; } Public listing & lt; String & gt; Cloth {get; Set; } Public listing & lt; Test & gt; Test {receive; Set; }} Public class test {public string name {get; Set; } Get public int id { Set; }}  

View:

  & lt; Fieldet & gt; & Lt; Legend & gt; All about my stuff & lt; / Legend & gt; & Lt; Div class = "editor-label" & gt; & Lt;%: HTML.LabelFor (model = & gt; model color)% & gt; & Lt; / Div & gt; & Lt; Div class = "editor-field" & gt; & Lt;%: Html.TextBoxFor (model = & gt; model color)% & gt; & Lt; / Div & gt; & Lt; Br / & gt; & Lt; Div class = "editor-label" & gt; Width, height, depth: & lt; / Div & gt; & Lt; Div class = "editor-field" & gt; Ml.TextBoxFor (model => model.depe, new {style = "width: 50px;"})%> & Lt; / Div & gt; & Lt; Br / & gt; & Lt; Div class = "editor-label" & gt; Suitcase Content & lt; / Div & gt; & Lt; Div class = "editor-field" & gt; & Lt; Div id = "clothing-editor" & gt; Clothing items: & lt; Input type = "text" id = "new-clothes-item" style = "width: 150px" /> & Lt; Button id = "add-clothes" & gt; Add to suitcase & lt; / Button & gt; & Lt; / Div & gt; & Lt; B & gt; The item is currently in a suitcase: & lt; / B & gt; & Lt; Ul id = "clothes-list" & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; P & gt; & Lt; Button ID = "Pack-It" & gt; Put on baggage carousel & lt; / Button & gt; & Lt; / P & gt; & Lt; / Fieldset & gt; & Lt; Script type = "text / javascript" language = "javascript" & gt; $ (Function () {$ ("button"). Button (); // Allow users to add items in suitcase $ ("#Add-Cloth"). Click (function () {var clothesText = $ ("#" ("# Clothes-list"). ("& Lt; li & gt;" + Clothing text .all + "& lt; / li & gt;"); clothesText.val (""). Focus );}); // Pack the suitcase and send it to the corresponding carousel ... ARM ... Controller $ ("# pack-it"). Click (function () {var clothesList = []; $ ("List clothes") each (function () (clothesList.push ($ (this) .text ())}); var size list = []; size list [0] = "honey Yum "; [1] =" big "; size list [2] =" small "; var data = new object (); datatyst = []; var readings = {}; read.Name =" Micheal "read Is Ing.ID = 123; datatyst [0] = reading; Reading.Name = "Rowen" reading.ID = 1234; datatyst [1] = reading; $ .ajax ({type: 'post', traditional: true, data : {Color: $ ("#color"). Val (), size: size list, clothing: clothing list, test: datatyst}});})}}; & lt; / script & gt;  

Controller:

  [http post] Public blank result suitcase Look for Bootstrap LookupAutacade) {New blank Return (;); }  

It probably is not related, but I do not think what code this is doing You want:

  var reading = {}; Reading.Name = "Micheal" reading.ID = 123; DataTest [0] = Reading; Reading.Name = "Rowen" reading.ID = 1234; DataTest [1] = Reading;  

This is adding the same object to DataTest twice, because you do not set reading to be a new array , You are updating the original item as "code" as "Rowen" and in the form of a name and 1234 as id .