【Web API系列教程】3.9 — 实战:处理数据(添加新条目到数据库)-阿里云开发者社区

开发者社区> nomasp> 正文

【Web API系列教程】3.9 — 实战:处理数据(添加新条目到数据库)

简介: 在本节,你将添加让用户可以创建新book的功能。在app.js中,添加如下代码到视图模型: self.authors = ko.
+关注继续查看

在本节,你将添加让用户可以创建新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中,替换以下代码:

<div class="col-md-4">
    <!-- TODO: Add new book -->
</div>

到:

<div class="col-md-4">
<div class="panel panel-default">
  <div class="panel-heading">
    <h2 class="panel-title">Add Book</h2>
  </div>

  <div class="panel-body">
    <form class="form-horizontal" data-bind="submit: addBook">
      <div class="form-group">
        <label for="inputAuthor" class="col-sm-2 control-label">Author</label>
        <div class="col-sm-10">
          <select data-bind="options:authors, optionsText: 'Name', value: newBook.Author"></select>
        </div>
      </div>

      <div class="form-group" data-bind="with: newBook">
        <label for="inputTitle" class="col-sm-2 control-label">Title</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" id="inputTitle" data-bind="value:Title"/>
        </div>

        <label for="inputYear" class="col-sm-2 control-label">Year</label>
        <div class="col-sm-10">
          <input type="number" class="form-control" id="inputYear" data-bind="value:Year"/>
        </div>

        <label for="inputGenre" class="col-sm-2 control-label">Genre</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" id="inputGenre" data-bind="value:Genre"/>
        </div>

        <label for="inputPrice" class="col-sm-2 control-label">Price</label>
        <div class="col-sm-10">
          <input type="number" step="any" class="form-control" id="inputPrice" data-bind="value:Price"/>
        </div>
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </div>
</div>
</div>

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

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

<form class="form-horizontal" data-bind="submit: addBook">

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Python系列直播——深入Python与日志服务,玩转大规模数据分析处理实战
Python系列直播——深入Python与日志服务,玩转大规模数据分析处理实战
4842 0
linux自动定时备份web程序和mysql数据库
  前些天受朋友说linux定时备份不知道怎么搞,叫帮忙处理一下。由于这段时间正闲着,所以也就欣然答应。由于朋友对linux不懂也希望我将操作的过程记录下来,也就是越详细越好。所以写得比较$%^&*。本以为半个小时或者一个小时可以搞好,谁不知整整搞了一天。
949 0
【Web API系列教程】3.8 — 实战:处理数据(显示条目细节)
在本节,你将添加查看每本书的详细信息的功能。在app.js中,添加以下代码到视图模型: self.detail = ko.
548 0
weblogic连接RAC数据库
对于负载均衡的机器,要连接多个实例的数据库的时候,使用这种策略目前是比较好的一种方案,当然也可以使用weblogic自带的解决方案。 直接使用了RAC的负载均衡策略。   在Oracle中找到tnsnames.ora这个文件。
660 0
在应用程序中利用Jena API处理OWL本体
接触Semantic Web的时间还不是很长,所以现在写的这方面内容算是笔记性质,很可能存在很多误解,欢迎指出或讨论:) 一般来说,我们在Protege这样的编辑器里构建了本体,就会想在应用程序里使用它,这就需要一些开发接口。
1765 0
Asp.Net Web API 2第七课——Web API异常处理
原文:Asp.Net Web API 2第七课——Web API异常处理 前言 阅读本文之前,您也可以到Asp.Net Web API 2 系列导航进行查看 http://www.cnblogs.com/aehyok/p/3446289.
806 0
为数据库添加控制文件
      此文承接上一篇文章,由于对单个控制文件恢复后,数据库里只有一个控制文件,所以要为数据库添加控制文件。 1)在nomount状态修改spfile文件。由于数据库里只有一个控制文件control03.
551 0
【Web API系列教程】3.7 — 实战:处理数据(创建UI视图)
在本节,你将开始为app定义HTML,并在HTML和视图模型间添加数据绑定。 打开Views/Home/Index.cshtml文件。
650 0
+关注
542
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载