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

Question

I have the following codes and the test value is always null in the controller after the post. What is wrong with the following code:
Model:
public class Suitcase
{
public string Color { get; set; }
public string[] Size { get; set; }
public List<string> Clothes { get; set; }
public List<Test> test { get; set; }
}
public class Test
{
public string Name { get; set; }
public int ID { get; set; }
}
The view:
<fieldset>
<legend>All about my baggage</legend>
<div class="editor-label">
<%: Html.LabelFor(model => model.Color) %>
</div>
<div class="editor-field">
<%: Html.TextBoxFor(model => model.Color) %>
</div>
<br />
<div class="editor-label">
Width, Height, Depth:
</div>
<div class="editor-field">
ml.TextBoxFor(model => model.Depth, new { style = "width:50px;" })%>
</div>
<br />
<div class="editor-label">Suitcase Contents</div>
<div class="editor-field">
<div id="clothes-editor">
Clothing Item: <input type="text" id="new-clothes-item" style="width:150px" /> <button id="add-clothes">Add to suitcase</button>
</div>
<b>Items currently in suitcase:</b>
<ul id="clothes-list">
</ul>
</div>
<p>
<button id="pack-it">Put on Baggage Carosel</button>
</p>
</fieldset>
<script type="text/javascript" language="javascript">
$(function () {
$("button").button();
// allow users to add items to the suitcase
$("#add-clothes").click(function () {
var clothesText = $("#new-clothes-item");
$("#clothes-list").append("<li>" + clothesText.val() + "</li>");
clothesText.val("").focus();
});
// pack the suitcase up and send it to the baggage carosel...erm...controller
$("#pack-it").click(function () {
var clothesList = [];
$("#clothes-list li").each(function () {
clothesList.push($(this).text())
});
var SizeList = [];
SizeList[0] = "Medium";
SizeList[1] = "Large";
SizeList[2] = "small";
var Data = new Object();
Data.test = [];
var reading = {};
reading.Name = "Micheal"
reading.ID = 123;
Data.test[0] = reading;
reading.Name = "Rowen"
reading.ID = 1234;
Data.test[1] = reading;
$.ajax({
type: 'POST',
traditional: true,
data: {
Color: $("#Color").val(),
Size: SizeList,
Clothes: clothesList,
test: Data.test
}
});
});
});
</script>
Controller:
[HttpPost]
public EmptyResult Suitcase(Suitcase lookWhatIPacked)
{
return new EmptyResult();
}

Answer 1

It's probably not related, but I don't think this code is doing what you intend:
var reading = {};
reading.Name = "Micheal"
reading.ID = 123;
Data.test[0] = reading;
reading.Name = "Rowen"
reading.ID = 1234;
Data.test[1] = reading;
This is adding the same object to Data.test twice, as you don't set reading to be a new array, so you're updating the original object to have "Rowen" as the Name and 1234 as the ID.