ASP.NET (snapshot 2017) Microsoft documentation and samples

Add a New Item to the Database

In this section, you will add the ability for users to create a new book. In app.js, add the following code to the view model:

[!code-javascriptMain]

   1:  self.authors = ko.observableArray();

   2:  self.newBook = {

   3:      Author: ko.observable(),

   4:      Genre: ko.observable(),

   5:      Price: ko.observable(),

   6:      Title: ko.observable(),

   7:      Year: ko.observable()

   8:  }

9:

  10:  var authorsUri = '/api/authors/';

11:

  12:  function getAuthors() {

  13:      ajaxHelper(authorsUri, 'GET').done(function (data) {

  14:          self.authors(data);

  15:      });

  16:  }

17:

  18:  self.addBook = function (formElement) {

  19:      var book = {

  20:          AuthorId: self.newBook.Author().Id,

  21:          Genre: self.newBook.Genre(),

  22:          Price: self.newBook.Price(),

  23:          Title: self.newBook.Title(),

  24:          Year: self.newBook.Year()

  25:      };

26:

  27:      ajaxHelper(booksUri, 'POST', book).done(function (item) {

  28:          self.books.push(item);

  29:      });

  30:  }

31:

  32:  getAuthors();

In Index.cshtml, replace the following markup:

[!code-htmlMain]

   1:  <div class="col-md-4">

   2:      <!-- TODO: Add new book -->

   3:  </div>

With:

[!code-htmlMain]

   1:  <div class="col-md-4">

   2:  <div class="panel panel-default">

   3:    <div class="panel-heading">

   4:      <h2 class="panel-title">Add Book</h2>

   5:    </div>

6:

   7:    <div class="panel-body">

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

   9:        <div class="form-group">

  10:          <label for="inputAuthor" class="col-sm-2 control-label">Author</label>

  11:          <div class="col-sm-10">

  12:            <select data-bind="options:authors, optionsText: 'Name', value: newBook.Author"></select>

  13:          </div>

  14:        </div>

15:

  16:        <div class="form-group" data-bind="with: newBook">

  17:          <label for="inputTitle" class="col-sm-2 control-label">Title</label>

  18:          <div class="col-sm-10">

  19:            <input type="text" class="form-control" id="inputTitle" data-bind="value:Title"/>

  20:          </div>

21:

  22:          <label for="inputYear" class="col-sm-2 control-label">Year</label>

  23:          <div class="col-sm-10">

  24:            <input type="number" class="form-control" id="inputYear" data-bind="value:Year"/>

  25:          </div>

26:

  27:          <label for="inputGenre" class="col-sm-2 control-label">Genre</label>

  28:          <div class="col-sm-10">

  29:            <input type="text" class="form-control" id="inputGenre" data-bind="value:Genre"/>

  30:          </div>

31:

  32:          <label for="inputPrice" class="col-sm-2 control-label">Price</label>

  33:          <div class="col-sm-10">

  34:            <input type="number" step="any" class="form-control" id="inputPrice" data-bind="value:Price"/>

  35:          </div>

  36:        </div>

  37:        <button type="submit" class="btn btn-default">Submit</button>

  38:      </form>

  39:    </div>

  40:  </div>

  41:  </div>

This markup creates a form for submitting a new author. The values for the author drop-down list are data-bound to the authors observable in the view model. For the other form inputs, the values are data-bound to the newBook property of the view model.

The submit handler on the form is bound to the addBook function:

[!code-htmlMain]

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

The addBook function reads the current values of the data-bound form inputs to create a JSON object. Then it POSTs the JSON object to /api/books.

Previous Next

Comments (

)

<00> <01> <02> <03> <04> <05> <06> <07> <08> <09> <10> <11> <12> <13> <14> <15> <16> <17> <18> <19> <20> <21> <22> <23>

Link to this page: //www.vb-net.com/AspNet-DocAndSamples-2017/aspnet/web-api/overview/data/using-web-api-with-entity-framework/part-9.htm