使用淘汰赛js将下拉列表中的值存储到表中答案

【问题标题】：Storing a value from a dropdown list into a table using knockout js使用淘汰赛js将下拉列表中的值存储到表中
【发布时间】：2013-11-29 03:14:10
【问题描述】：

我正在开发一个使用淘汰赛 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();
    });

这成功地将数据库中的数据填充到下拉列表中，但是当我单击添加新条目时，它不会将其添加到数据库中。

【问题讨论】：

标签： javascript asp.net asp.net-mvc knockout.js

【解决方案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'
        });
    }

【讨论】：