使用敲除js將下拉列表中的值存儲到表中

Question

我正在使用敲除JS，ASP.Net MVC開發一個應用程序，其中有一個下拉列表，其中包含一些使用敲除Js的數據綁定。 現在我想將所選值添加到數據庫中。

我正在通過以下方式

html

    <select>
              <!--ko foreach: products-->
              <option data-bind="text: $data, value: newproductnametoadd"></option>    
              <!--/ko-->                     
    </select>
<a class="btn" data-bind="click: add">Add New Entry</a>

淘汰賽JS

self.products = ko.observableArray();
    self.datainput = ko.observableArray();

 self.newproductnametoadd = ko.observable('Product');
    self.add = function (canadiancrude) {
        var payload = {
                Product: self.newproductnametoadd(),
Location: "Location", Pipeline: "Pipeline"
        };
        $.ajax({
            url: '/odata/Canadiancrudes',
            type: 'POST',
            //  data: ko.toJSON(payload),
            data: JSON.stringify(payload),
            contentType: 'application/json',
            dataType: 'json'
        });
    }
 $.ajax({
        dataType: "json",
        url: '/odata/Canadiancrudes',
        data: ko.toJSON(self.products),
        async: false,
        success: function (data) {
            self.datainput((ko.utils.arrayMap(data.value, function (canadiancrude) {
                var obsCanadianCrude = {
                    Id: canadiancrude.Id,

                    Product: canadiancrude.Product,
Location: ko.observable(canadiancrude.Location),
                    Pipeline: ko.observable(canadiancrude.Pipeline)

                }
                self.watchModel(obsCanadianCrude, self.modelChanged);
                return obsCanadianCrude;
            })));
        }
    });

  self.subsetcanadiancrudes = ko.observableArray(self.datainput()).extendsdistinct('Product');
    self.products = ko.computed(function () {
        var products = ko.utils.arrayMap(self.subsetcanadiancrudes(), function (item) {
            return item.Product;
        })
        return ko.utils.arrayGetDistinctValues(products).sort();
    });

這樣可以成功地將數據庫中的數據填充到下拉列表中，但是當我單擊添加新條目時，它不會將其添加到數據庫中。

Answer 1

得到了如下解決方案

的HTML

 <select  data-bind="options:$root.canadiancrudes, optionsText:'Product', optionsValue:'Product',value:selectedChoice, optionsCaption:'Choose a Product'">

 </select>
<input type="button" class="btn btn-success" data-bind="click: add, enable: selectedChoice" value="Add New Entry"/>

淘汰賽JS

self.selectedChoice = ko.observable();
    self.add = function (canadiancrude) {
        var payload = {
            Term: "Term", Product: this.selectedChoice(), Location: "Location", Pipeline: "Pipeline",
            BidCP: "Bid CP", BidVolume: "Bid Volume", Index: "Index", Bid: "0.0", Offer: "0.0",
            OfferVolume: "Offer Volume", OfferCP: "Offer CP"
        };
        $.ajax({
            url: '/odata/Canadiancrudes',
            type: 'POST',
            //  data: ko.toJSON(payload),
            data: JSON.stringify(payload),
            contentType: 'application/json',
            dataType: 'json'
        });
    }