آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

اضافه کردن آیتم جدید به پایگاه داده

دوره های مرتبط با این مقاله

اضافه کردن آیتم جدید به پایگاه داده

در این قسمت، شما برای کاربران این قابلیت را اضافه می کنید تا آنها بتوانند یک کتاب جدید ایجاد کنند. در 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 >
                        

این قطعه کد، یک فرم برای ثبت نام author جدید ایجاد می کند. مقادیر لیست author از authors observable در view model گرفته شده و پر می شود. برای ورودی های دیگر فرم، مقادیر به خاصیت newBook از view model بسط داده می شود.

کنترول کننده ثبت نام در فرم به تابع addBook محدود است.

تابع addBook مقادیر جاری داده ها را از ورودی های فرم برای ساخت object JSON می خواند و سپس آن را به /api/books ارسال(POST) می کند.

  • 818
  •    1026
  • تاریخ ارسال :   1395/03/17

دانلود PDF دانلود فیلم آموزشی دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
اضافه کردن آیتم جدید به پایگاه داده
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .