در این پست از آموزش Web API 2 ، افزودن آیتم جدید به ساختمان داده را بررسی خواهیم کرد .
پست های قبلی آموزش ۲ Web API :
- آموزش APS.NET Web Api 2 با انتیتی فریم ورک ۶ (Entity Framework)
- افزودن مدل و کنترلرها – آموزش ASP.net Web API
- Seed کردن ساختمان داده – آموزش API
- روابط موجود در انتیتی – آموزش تصویری WEB API
- ساخت اشیاء انتقال داده یا DTOها
- ساخت اپلیکیشن سمت کاربر با فرمت Javascript
- ساخت رابط کاربری (UI)
- نمایش جزئیات هر آیتم
در این بخش، شما به کاربران امکان ساخت کتاب جدیدی را میدهید. در 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 ارسال می کند.