test is null in the controller upon post

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>



    </开发者_StackOverflow社区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();
    }

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.