MVC 3：模型的AJAX发布列表属性

Question

I'm having trouble posting an ajax call with my model which has a list.

My model is:

public class MyListItem
{
    public int Id { get; set; }
    public string Value { get; set; }
}

public class MyModel
{
    public int Integer { get; set; }
    public string Str { get; set; }
    public List<MyListItem> MyList { get; set; }        

    public MyModel()
    {
        Str = "Initial";
        Integer = 1;
    }
}

in my view, i'm trying to display the list items of MyList as:

    <div>
    @{
            if (Model.MyList != null)
            { 
                int i = 0;
                foreach (var item in Model.MyList)
                {                       
                    <label>@item.Value</label>
                    @Html.Hidden("MyList[" + i + "].Id", item.Id);
                    @Html.TextArea("MyList[" + i + "].Value", item.Value, 1, 10, new { Value = item.Value });
                    <div />

                    i++;
                }
            }
    }
</div>

this view is a partial view, and it's called from the "main" view like this:

<form id="mine2">
    @{Html.RenderPartial("Test2", Model);}
</form>

My ajax post is:

    function OnAddToListAjax() {
    var actionUrl = '@Url.Action("AddToList", "Test1")';
    var alist = @Html.Raw(Json.Encode(Model));

    try
    {
        $.ajax(
        {
            url: actionUrl,
            type: "POST",
            dataType: "HTML",
            contentType: 'application/json',
            processData: false,
            //data: JSON.stringify({myModel: existing, list: alist}),
            data: JSON.stringify({myModel: alist}),
            traditional: true,
            success: function(result) {
                //alert(result);
                $('#mine2').html(result);
            },
            error: function (req, status, error) {
                HandleError(req);
            }
        });
    }
    catch (err)
    {
        alert(err);
    }
}

my controller is:

        [HttpPost]
    public ActionResult AddToList(MyModel myModel)//, MyList list)
    {
        try
        {

            //var list = new MyList();
            if (myModel.MyList == null)
                myModel.MyList = new MyList();
            myModel.Str += " Changed";

            //throw new Exception("This is broken!");
            myModel.MyList.Add(new MyListItem { Id = myModel.MyList.Count, Value = string.Format("Item {0}", myModel.MyList.Count) });
            //myModel.MyList = list;

            return PartialView("Test2", myModel);
        }
        catch (Exception ex)
        {
            myModel.ErrorModel = new ErrorModel() { ErrorDetails = "Error adding to list", ErrorString = ex.Message };
            return PartialView("Test2", myModel);

        }
    }

this concept works perfectly for me when using a direct property of my model. eg if I try to set/get the property of Str. However, for the MyList items, they never seem to get serialized properly in the Json command. It retains the values which were part of the original model. ie the first time I call this, MyList is null so I create it and return it as part of the Action Result. This displays the values ok. However, if I manually edit the value and re-post it, the value which is posted is the same as was originally retrieved.

I believe it's possibly something to do with the name I'm giving the TextArea and it can't be resolved properly. Using Firebug, the source for one of the text areas given is:

<textarea id="MyList_0__Value" rows="1" name="MyList[0].Value" cols="10" value="Item 0">Item 0</textarea>

So I'm trying to determine why the Encoding of my model doesn't have the updated (edited) values.

TIA

Answer 1

I would recommend you using editor templates. So you could replace the foreach loop you have written in your partial view with this:

@model MyModel
<div>
    @if (Model.MyList != null)
    {
        @Html.EditorFor(x => x.MyList)
    }
</div>

and then define an editor template for the it which will be rendered for each element of the list ( ~/Views/Test1/EditorTemplates/MyListItem.cshtml or ~/Views/Shared/EditorTemplates/MyListItem.cshtml ):

@model MyListItem
@Html.LabelFor(x => x.Value, Model.Value)
@Html.HiddenFor(x => x.Id);
@Html.TextAreaFor(x => x.Value, 1, 10);

The editor template will take care of properly naming the input fields so that the default model binder properly deserializes them back.

Now in your main view you could also use editor template instead of the partial:

@model MyModel
@using (Html.BeginForm("AddToList", "Test1", FormMethod.Post, new { id = "myForm" }))
{
    @Html.EditorForModel()
}

and then the editor template that I shown earlier will be placed by convention in ~/Views/Test1/EditorTemplates/MyModel.cshtml or ~/Views/Shared/EditorTemplates/MyModel.cshtml .

OK, so far so good. The last step is to send an AJAX request. This could be done in a separate javascript file:

var myForm = $('#myForm');
$.ajax({
    url: myForm.attr('action'),
    type: myForm.attr('method'),
    data: myForm.serialize(),
    success: function(result) {
        $('#mine2').html(result);
    },
    error: function (req, status, error) {
        HandleError(req);
    }
});

Clean and simple.

Now that we have cleaned the view and the javascript we have to clean the controller action which is where your original problem comes from. So in your controller action you are trying to modify POSTed values. The problem with this is that HTML helpers use ModelState values when binding and after that they use the model. This is by design. So the values you put in your model are completely ignored by the helpers and you see old values which were the one posted to the controller action. You will have to remove them from the model state first.