Question

我在使用带有列表的模型发布ajax调用时遇到问题。

我的模特是：

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;
    }
}

在我看来，我正在尝试将MyList的列表项显示为：

    <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>

这个视图是局部视图，它从“主”视图中调用，如下所示：

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

我的ajax帖子是：

    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);
    }
}

我的控制器是：

        [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);

        }
    }

当使用我的模型的直接属性时，这个概念对我来说非常有效。例如，如果我尝试设置/获取Str的属性。但是，对于MyList项，它们似乎永远不会在Json命令中正确序列化。它保留了原始模型的一部分值。即第一次调用它时，MyList为null所以我创建它并将其作为Action Result的一部分返回。这会显示值ok。但是，如果我手动编辑该值并重新发布，则发布的值与最初检索的值相同。

我认为这可能与我给TextArea的名称有关，而且无法正确解析。使用Firebug，其中一个文本区域的来源是：

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

所以我试图确定为什么我的模型的编码没有更新（编辑）的值。

TIA

Answer 1

我建议您使用编辑器模板。因此，您可以使用以下命令替换您在局部视图中编写的foreach循环：

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

然后为其定义一个编辑器模板，该模板将为列表中的每个元素（~/Views/Test1/EditorTemplates/MyListItem.cshtml或~/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);

编辑器模板将负责正确命名输入字段，以便默认模型绑定器正确地反序列化它们。

现在在主视图中，您还可以使用编辑器模板而不是部分：

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

然后我之前显示的编辑器模板将按惯例放在~/Views/Test1/EditorTemplates/MyModel.cshtml或~/Views/Shared/EditorTemplates/MyModel.cshtml中。

好的，到目前为止一切顺利。最后一步是发送一个AJAX请求。这可以在单独的javascript文件中完成：

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);
    }
});

清洁简单。

现在我们已经清理了视图和javascript，我们必须清理控制器操作，这是原始问题的来源。因此，在您的控制器操作中，您正在尝试修改POSTed值。这个问题是HTML帮助程序在绑定时使用ModelState值，之后它们使用模型。这是设计的。因此，您在模型中放置的值完全被助手忽略，您会看到旧值，它们是发布到控制器操作的值。您必须先将它们从模型状态中删除。

MVC 3：模型的AJAX post list属性

1 个答案: