Add a New Item to the Database
by Mike Wasson
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.
Comments (
)
)
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
|
|