jquery post数组导致浏览器挂起 - mvc 3答案

【问题标题】：jquery post array causing browser to hang - mvc 3jquery post数组导致浏览器挂起 - mvc 3
【发布时间】：2012-04-03 00:05:16
【问题描述】：

我有一个由以下对象组成的 JS 数组：

function SkillModel(skillModelAdapter) {
    this.SkillId = skillModelAdapter.SkillId;
    this.SkillName = skillModelAdapter.SkillName;
    this.Proficiency = skillModelAdapter.Proficiency;

    this.Element = null;

    this.ProficiencyString = function () {
        switch (this.Proficiency) {
            case 1:
                return "Beginner";
            case 2:
                return "Novice";
            case 3:
                return "Intermediate";
            case 4:
                return "Advanced";
            default:
                return "Expert";
        }
    };

    this.CreateElement = function () {
        var searchSkill = $('<div>').addClass('searchSkill').attr('skillId', this.SkillId);
        var skillName = $('<span>').addClass('skillName').html(this.SkillName);
        var proficiency = $('<span>').attr('proficiency', this.Proficiency).html(' (' + this.ProficiencyString() + ')');
        var removeLink = $('<a href="#">').addClass('removeSkill').html('X');

        searchSkill.append(skillName);
        searchSkill.append(proficiency);
        searchSkill.append(removeLink);

        this.Element = searchSkill;

        $('#SkillsContainer').append(searchSkill);
    };
}

当数组发布到我的 MVC 控制器时，如果数组为空，它可以正常工作。如果数组中有一个对象，它就会崩溃。

是否因为我的 json 对象包含函数而出现问题？

干杯，

詹姆斯

【问题讨论】：

jquery 帖子的代码在哪里？ “它崩溃”客户端或服务器端？异常消息，堆栈跟踪？
您好，它使客户端崩溃，除了 chrome 中的崩溃屏幕之外没有任何错误。
@James，是的。它尝试序列化对象，这意味着所有属性.. 但是当它尝试序列化对象的CreateElement 属性时失败.. 看看json.org 以查看允许的内容..
感谢 gaby，这正是我想要的！ :)

标签： jquery asp.net-mvc-3 model-view-controller

【解决方案1】：

函数不能被 JSON 序列化。您不应该尝试序列化此类对象。从您的代码看来，您已经将一些 skillModelAdapter 对象传递给 SkillModel 构造函数，这看起来是 JSON 序列化的良好候选者：

例如：

var skillModelAdapters = [
    { SkillId: 1, SkillName: 'skill 1', Proficiency: 1 },
    { SkillId: 2, SkillName: 'skill 2', Proficiency: 1 },
    { SkillId: 3, SkillName: 'skill 3', Proficiency: 3 },
    { SkillId: 4, SkillName: 'skill 4', Proficiency: 2 }
];

然后：

$.ajax({
    url: '@Url.Action("SomeAction")',
    type: 'POST',
    contentType: 'application/json',
    data: JSON.stringify(skillModelAdapters),
    success: function(result) {

    }
});

在服务器端，您将拥有一个视图模型：

public class SkillViewModel
{
    public int SkillId { get; set; }
    public string SkillName { get; set; }
    public int Proficiency { get; set; }
}

以及相应的控制器动作：

[HttpPost]
public ActionResult SomeAction(IEnumerable<SkillViewModel> skills)
{
    ...
}

【讨论】：