0

我目前正在为 WebAPI 进行 Pluralsight 培训，并且遇到了一些问题（下载示例并没有帮助，因为它们也不起作用 - 该课程是从 Beta 版创建的，我正在使用 .Net 的最终版本4.5)。我使用以下 HTML 创建了一个非常简单的视图：

<form onsubmit="return submitCourse();">
     <input type="text" name="name" id="name" />
     <input type="submit" value="Create Course" />
</form>
<h1 id="msg"></h1>
<script>

//1: have form - get values from form - send to API as json
//2: use form values

function submitCourse() {

    //$.ajax({
    //    url: '/api/courses',
    //    type: 'POST',
    //    dataType: 'json'
    //});

    $.ajax({
        url: '/api/courses/',
        type: 'POST',
        dataType: 'json',            
        success: function (newCourse) {
            var msg = 'New course id = ' + newCourse.id;
            $('#msg').text(msg);
        }
    });

    return false;
}

</script>

应该发生的是当表单提交时，脚本首先运行，表单数据通过 AJAX 调用为我传输。我遇到的问题是当 Post 方法在我的控制器中被击中时，“newCourse”参数始终为空：

    public Course Post(Course newCourse)
    {
        newCourse.id = _courses.Count;
        _courses.Add(newCourse);

        //TODO : return 201
        return newCourse;
    }

通过各种工具挖掘，我发现上面的脚本似乎根本没有发送数据（内容长度为 0），但我似乎无法弄清楚为什么（WebAPI 和 jQuery 的 $.ajax() 调用的新手）。我尝试使用 $.ajax() 调用中的“data”选项将调用的主体显式设置为表单值（如下所示：data: { 'name' : $('#name').text( ) } )，但这也没有多大作用。内容长度似乎发生了变化（变为 5，不知道为什么），但这些值仍然没有被反序列化。

有小费吗？我对这两种技术都太陌生了，不知道从哪里开始。

4

1 回答 1

1

您需要使用 $.ajax() 中的数据选项将数据发布到 API。您可以使用 data: $("#CourseForm").serialize()，如果您将 id 'CourseForm' 提供给表单并确保表单内的输入字段的名称与 Course 的属性名称匹配，以绑定到工作。

于 2012-10-06T17:27:44.240 回答