我似乎无法将表单值发回服务器答案

【问题标题】：I can't seem to post my form values back to the server我似乎无法将表单值发回服务器
【发布时间】：2012-03-03 15:27:11
【问题描述】：

我正在使用 MVC3 并尝试创建一个简单的联系表单，使用 jquery $.ajax 将值发布回服务器。

目前我的联系表单视图绑定到我创建的 ContactViewModel：

public class ContactViewModel
{
    [Required]
    public string Name { get; set; }

    [Required]
    [DataType(DataType.EmailAddress)]
    public string Email { get; set; }

    [Required]
    public string Message { get; set; }     
}

这是我的 [HttpPost] 方法，用于处理提交的表单：

    [HttpPost]
    public ActionResult SubmitForm(ContactViewModel contactVM)
    {
        if (!ModelState.IsValid)
        {
            return View(contactVM);
        }

        // TODO: If the form's valid then save the data

        return RedirectToAction("Thankyou");
    }

如您所见，此方法需要一个 ContactViewModel 数据类型。我很困惑，因为我的 javascript 中似乎没有这个类，所以我想我必须在 js 中重建该类，然后将其发布回我的 SubmitForm 方法？以下是我用来尝试实现此目的的代码：

<script type="text/javascript">
    $(document).ready(function () {
        var contactVM = { ContactViewModel : [{
            Name: $('#Name').val(),
            Email: $('#Email').val(),
            Message: $('#Message').val() }]
        };

        $.ajax({
            url: '/Contact/SubmitForm',
            type: "POST",
            data: JSON.stringify(contactVM),
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function () {
                alert('Success!');
            },
            error: function () {
                alert('Failure!');
            }
        });
    });        
</script>

如您所见，我尝试在 javascript 中创建完全相同的类，以便可以将其发布回服务器，但是当我单步执行代码时，似乎 SubmitForm 方法中接受了我的 contactVM 变量只有空值。

我哪里错了？我什至在正确的轨道上吗？抱歉，如果我没有很清楚地解释这一点！

谢谢！

更新：原来我是个白痴，只调用 $.ajax 函数页面加载而不是在单击按钮时！结合安德鲁在下面所说的话，一切似乎都在工作:-)

【问题讨论】：

很高兴你知道了。我正要问是否在页面加载时填充了字段:)

标签： asp.net asp.net-mvc-3 jquery

【解决方案1】：

在这种情况下，JavaScript 中不需要“包装器”ContactViewModel。你应该可以简单地写：

$(document).ready(function () {
    var contactVM = {
        Name: $('#Name').val(),
        Email: $('#Email').val(),
        Message: $('#Message').val()
    };

    $.ajax({
        url: '/Contact/SubmitForm',
        type: "POST",
        data: JSON.stringify(contactVM),
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function () {
            alert('Success!');
        },
        error: function () {
            alert('Failure!');
        }
    });
});

模型绑定器将获取您提交的对象并将其映射到ContactViewModel。

【讨论】：