使用不显眼的 JavaScript，参数不是 null，但它的值是

Question

当我的 JavaScript 与我的 cshtml 文件位于同一页面时，这是有效的：

function SaveEntity() {
    // more code here
    alert(entity.FirstName);  // this shows that entity's properties have values
    $.post('/Home/Save', { entity: entity }, SaveComplete);
}

该代码现在位于单独的 Index.js 文件中。在我的控制器中，实体参数不为空，但它的所有值都是。为什么现在会发生这种情况？

控制器签名：

public ActionResult Save(Entity entity)
{ // method here }

编辑 - Fiddler 截图

编辑

这是 Entity 类，由 Entity Framework 生成：

public partial class Entity
{
    public Entity()
    {
        this.Contacts = new HashSet<Contact>();
    }

    public int EntityId { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string Address { get; set; }
    public string City { get; set; }
    public string State { get; set; }
    public string ZipCode { get; set; }
    public string Company { get; set; }
    public string LastModifiedUser { get; set; }
    public Nullable<System.DateTime> LastModifiedTime { get; set; }
    public string Notes { get; set; }

    public virtual ICollection<Contact> Contacts { get; set; }
}

编辑

完整的 Index.js，带有完整的 SaveEntity() 方法：

var _currentEntities;

    $(function () {
        // Hide the ID column (column 1)
        $('#tableContacts').dataTable({
            "aoColumnDefs": [
                { "bSearchable": false, "bVisible": false, "aTargets": [0] }
            ],
            "bLengthChange": false, // don't show the number of records to show per page
            "bFilter": false,  // don't show the search/filter box
            "iDisplayLength": 5
        });

        $('#waitImage').hide();
        // Show the letters of the alphabet, with a link to call GetEntries() for each of them.
        for (var i = 65; i <= 90; i++) {
            $('#headerAlphabet').append('<a href=\"#\" onclick=\"GetEntries(\''
                + String.fromCharCode(i) + '\')\">'
                + String.fromCharCode(i) + '</a> ');
        }
    });

            function GetEntries(firstLetter) {
                // code here
            }

            function EntriesReceived(entities) {
                // code here
            }

            function DisplayPerson(entityId) {
                // code here
            }

        function SaveEntity() {
            // Grab our entity
            var entity;
            for (var i = 0; i < _currentEntities.length; i++) {
                if (_currentEntities[i].EntityId == $('#txtEntityId').val()) {
                    entity = _currentEntities[i];
                    break;
                }
            }

            entity.FirstName = $('#txtFirstName').val();
            entity.LastName  = $('#txtLastName').val();
            entity.Address   = $('#txtAddress').val();
            entity.City      = $('#txtCity').val();
            entity.State     = $('#txtState').val();
            entity.ZipCode   = $('#txtZipCode').val();
            entity.Company   = $('#txtCompany').val();
            entity.Notes     = $('#txtNotes').val();

            alert(entity.FirstName);

            $.post('/Home/Save', { entity: entity }, SaveComplete);
        }

            function SaveComplete(saveStatus) {
                alert(saveStatus);
            }

            function CancelChanges() {
                alert('Cancel will be done here.');
            }

Answer 1

首先，在进行任何类型的 ajax 提交时，您都希望在 Http 调试器（如 Fiddler）中查看实际请求。你想看看它是否真的发布了你认为的值。这将帮助您确定问题出在您的 javascript 中还是在服务器上。现在，你不知道。

请参阅：This 和 This

其次，您应该发布您的服务器端实体定义。

编辑：

这似乎是 jQuery 默认序列化对象的方式存在问题，该方式使用括号表示法，不适用于默认模型绑定器。您必须使用 Dave 提到的传统：true 参数。

更多关于Here。以下将解决您的问题。 $.param 方法与 true 参数一起使用时将强制执行传统序列化。

$.post('/Home/Save', $.param(entity, true), SaveComplete);. 

Answer 2

我犹豫了，b/c 我的回答没有说​​明为什么这会在 View 中起作用，但在 js 文件中会失败。但我会使用 ajax 与 post 调用来设置 json 和传统的：

 

$.ajax({
    type: 'POST',
    url: '/Home/Save',
    dataType: 'json',
    traditional: true,
    data: entity , //$.toJSON(data),
    success: function (data) {
          SaveComplete(data);
    }
});