Veritabanına Yeni Öğe Ekleme

Tamamlanan Projeyi İndir

Bu bölümde, kullanıcıların yeni bir kitap oluşturmasına olanak sağlayacaksınız. app.js görünüm modeline aşağıdaki kodu ekleyin:

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 dosyasında aşağıdaki işaretlemeyi değiştirin:

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

Şununla:

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

Bu işaretleme, yeni yazar göndermek için bir form oluşturur. Yazar açılan listesinin değerleri, görünüm modelindeki authors gözlemlenebilir değere bağlıdır. Diğer form girişleri için değerler, görünüm modelinin newBook özelliğine verilere bağlıdır.

Formdaki gönderme işleyicisi işleve addBook bağlıdır:

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

İşlev, addBook bir JSON nesnesi oluşturmak için veriye bağlı form girişlerinin geçerli değerlerini okur. Ardından JSON nesnesini öğesine posts /api/books.

ÖncekiSonraki