افزودن آیتم جدید به ساختمان داده – آموزش Web API 2

در این پست از آموزش Web API 2 ، افزودن آیتم جدید به ساختمان داده را بررسی خواهیم کرد .

پست های قبلی آموزش ۲ Web API :

در این بخش، شما به کاربران امکان ساخت کتاب جدیدی را می‌دهید. در app.js، کد زیر را به view model اضافه کنید:

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 به صورت sata-bound در آمده که در view model قابل دیدن است. برای دیگر مقادیر ورودی، موارد موجود به ویژگی newbook برای view model به شکل data-bound درآمده است.

Submit handler در این فرم به تابع addbook بایند شده است:

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

تابع addbook مقادیر موجود در data-bound فرم  را میخواند تا شیء JSON بسازد. سپس اشیاء JSON را به api/books  به روش POST  ارسال می کند.

 

ورکشاپ رایگان دوره های تخصصی برنامه نویسی

شما این فرصت را دارید، با تکمیل فرم زیر، قبل از انتخاب دوره آموزشی مناسب خود، در ورکشاپ رایگان دوره های تخصصی برنامه نویسی شرکت کنید

درباره‌ی برنامه نویسان

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *