【Web API系列教程】3.9 — 实战：处理数据（添加新条目到数据库）

在本节，你将添加让用户可以创建新book的功能。在app.js中，添加如下代码到视图模型：

self.authors = ko.observableArray();
self.newBook = {
    Author: ko.observable(),
    Genre: ko.observable(),
    Price: ko.observable(),
    Title: ko.observable(),
    Year: ko.observable()
}

var authorsUri = '/api/authors/';

function getAuthors() {
    ajaxHelper(authorsUri, 'GET').done(function (data) {
        self.authors(data);
    });
}

self.addBook = function (formElement) {
    var book = {
        AuthorId: self.newBook.Author().Id,
        Genre: self.newBook.Genre(),
        Price: self.newBook.Price(),
        Title: self.newBook.Title(),
        Year: self.newBook.Year()
    };

    ajaxHelper(booksUri, 'POST', book).done(function (item) {
        self.books.push(item);
    });
}

getAuthors();

在Index.cshtml中，替换以下代码：

<code class=" hljs xml">
    <!--{cke_protected}{C}%3C!%2D%2D%20TODO%3A%20Add%20new%20book%20%2D%2D%3E-->

</code>

到：

<code class=" hljs applescript">

  
    </code>

Add Book

<form class="form-horizontal" data-bind="submit: addBook">
	<code class="hljs applescript"><label class="col-sm-2 control-label" for="inputAuthor">Author</label> <select data-bind="options:authors, optionsText: 'Name', value: newBook.Author"></select> <label class="col-sm-2 control-label" for="inputTitle">Title</label> <input class="form-control" data-bind="value:Title" id="inputTitle" type="text" /> <label class="col-sm-2 control-label" for="inputYear">Year</label> <input class="form-control" data-bind="value:Year" id="inputYear" type="number" /> <label class="col-sm-2 control-label" for="inputGenre">Genre</label> <input class="form-control" data-bind="value:Genre" id="inputGenre" type="text" /> <label class="col-sm-2 control-label" for="inputPrice">Price</label> <input class="form-control" data-bind="value:Price" id="inputPrice" step="any" type="number" /><button class="btn btn-default" type="submit">Submit</button></code></form>

这段代码创建了一个表单，用于提交新的作者。作者下拉框的值被数据绑定到视图模型的authors中。对于其他的表单输入，这些值都被数据绑定到视图模型的newBook属性。

这个表单上的提交事件被数据绑定到addBook函数：

<form class="form-horizontal" data-bind="submit: addBook">
	&nbsp;</form>

这个addBook函数读取数据绑定表单输入中的当前值，并创建JSON对象。然后会POST这个JSON对象到/api/books。