【Web API系列教程】3.9 — 实战:处理数据(添加新条目到数据库)
程序员文章站
2024-01-09 19:00:34
在本节,你将添加让用户可以创建新book的功能。在app.js中,添加如下代码到视图模型:
self.authors = ko.observableArray();
sel...
在本节,你将添加让用户可以创建新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"> </form>
这个addBook函数读取数据绑定表单输入中的当前值,并创建JSON对象。然后会POST这个JSON对象到/api/books。
上一篇: SQL 中用户定义函数的使用方法
下一篇: [日常] Go语言圣经-查找重复行
推荐阅读
-
【Web API系列教程】3.9 — 实战:处理数据(添加新条目到数据库)
-
【Web API系列教程】3.8 — 实战:处理数据(显示条目细节)
-
【Web API系列教程】3.3 — 实战:处理数据(建立数据库)
-
【Web API系列教程】3.10 — 实战:处理数据(发布App到Azure App Service)
-
【Web API系列教程】3.3 — 实战:处理数据(建立数据库)
-
【Web API系列教程】3.2 — 实战:处理数据(添加模型和控制器)
-
【Web API系列教程】3.10 — 实战:处理数据(发布App到Azure App Service)
-
【Web API系列教程】3.8 — 实战:处理数据(显示条目细节)
-
【Web API系列教程】3.9 — 实战:处理数据(添加新条目到数据库)