Hinzufügen eines neuen Elements zur Datenbank

Abgeschlossenes Projekt herunterladen

In diesem Abschnitt fügen Sie die Möglichkeit hinzu, dass Benutzer ein neues Buch erstellen können. Fügen Sie in app.jsdem Ansichtsmodell den folgenden Code hinzu:

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();

Ersetzen Sie in Index.cshtml das folgende Markup:

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

Mit:

<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>

Dieses Markup erstellt ein Formular zum Übermitteln eines neuen Autors. Die Werte für die Dropdownliste des Autors sind datengebunden an die authors Observable im Ansichtsmodell gebunden. Bei den anderen Formulareingaben sind die Werte an die newBook Eigenschaft des Ansichtsmodells gebunden.

Der Sendehandler im Formular ist an die addBook Funktion gebunden:

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

Die addBook Funktion liest die aktuellen Werte der datengebundenen Formulareingaben, um ein JSON-Objekt zu erstellen. Anschließend sendet es das JSON-Objekt an /api/books.

ZurückWeiter