使用挖空将数据从数据库加载到下拉列表

Load data from Database to DropDownList using Knockout

本文关键字：数据库加载下拉列表数据更新时间：2023-09-26

我正在使用挖空创建编辑可变长度列表。当我单击"添加"按钮时，它将向屏幕添加一个下拉列表和一个文本框。我已经成功地将数据从数据库加载到 DropDownList，但每次我单击添加按钮时，它总是填充数据。

法典：

<div class="form-horizontal" data-bind="with: purchaseOrder">
    <h4>Purchase Order</h4>
    <hr />
    <div class="form-group">
        <label class="control-label col-md-2" for="PurchaseOrderDate">PO Date</label>
        <div class="col-md-10">
            <input class="form-control" data-bind="value: PurchaseOrderDate" placeholder="Purchase Order Date" />
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-md-2" for="InvoiceNo">Invoice No</label>
        <div class="col-md-10">
            <input class="form-control" data-bind="value: InvoiceNo" placeholder="Invoice No" />
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-md-2" for="Memo">Memo</label>
        <div class="col-md-10">
            <input class="form-control" data-bind="value: Memo" placeholder="Enter Memo" />
        </div>
    </div>
</div>
<h4>Details</h4>
<hr />
<table class="table">
    <thead>
        <tr>
            <th>Item Name</th>
            <th>Qty Order</th>
            <th></th>
        </tr>
    </thead>
    <tbody data-bind="foreach: purchaseOrderDetails">
        <tr>
            <td>
                <select class="form-control" data-bind="options: AX_INVENTSUMs, optionsText: 'ITEMNAME', optionValue: 'ITEMID'"></select>
            </td>
            <td>
                <input class="form-control" data-bind="value: QuantityOrder" placeholder="Enter Quantity Order">
            </td>
            <td>
                <a class="btn btn-sm btn-danger" href='#' data-bind=' click: $parent.removeItem'>X</a>
            </td>
        </tr>
    </tbody>
</table>
<p>
    <button class="btn btn-sm btn-primary" data-bind='click: addItem'>Add Item</button>
</p>
@section Scripts {
    @Scripts.Render("~/bundles/knockout")
    <script>
        $(function () {
            var PurchaseOrder = function (purchaseOrder) {
                var self = this;
                self.PurchaseOrderID = ko.observable(purchaseOrder ? purchaseOrder.PurchaseOrderID : 0);
                self.PurchaseOrderDate = ko.observable(purchaseOrder ? purchaseOrder.PurchaseOrderDate : '');
                self.InvoiceNo = ko.observable(purchaseOrder ? purchaseOrder.InvoiceNo : '');
                self.Memo = ko.observable(purchaseOrder ? purchaseOrder.Memo : '');
            };
            var PurchaseOrderDetail = function (purchaseOrderDetail, items) {
                var self = this;
                self.PurchaseOrderDetailID = ko.observable(purchaseOrderDetail ? purchaseOrderDetail.PurchaseOrderDetailID : 0);
                self.PurchaseOrderID = ko.observable(purchaseOrderDetail ? purchaseOrderDetail.PurchaseOrderDetailID : 0);
                self.ItemID = ko.observable(purchaseOrderDetail ? purchaseOrderDetail.ItemID : 0);
                self.QuantityOrder = ko.observable(purchaseOrderDetail ? purchaseOrderDetail.QuantityOrder : 0);
                self.QuantityBonus = ko.observable(purchaseOrderDetail ? purchaseOrderDetail.QuantityBonus : 0);
                self.AX_INVENTSUMs = ko.observableArray(items);
            };
            var PurchaseOrderCollection = function () {
                var self = this;
                self.purchaseOrder = ko.observable(new PurchaseOrder());
                self.purchaseOrderDetails = ko.observableArray([new PurchaseOrderDetail()]);
                self.CashedArray = ko.observableArray([]);
                $.getJSON("/AX_INVENTSUM/GetAX_INVENTSUMs", null, function (data) {
                    var array = [];
                    $.each(data, function (index, value) {
                        array.push(value);
                    });
                    self.CashedArray(array);
                });
                self.addItem = function () {
                    self.purchaseOrderDetails.push(new PurchaseOrderDetail(null, self.CashedArray));
                };
                self.removeItem = function (purchaseOrderDetail) {
                    self.purchaseOrderDetails.remove(purchaseOrderDetail);
                };
            };
            ko.applyBindings(new PurchaseOrderCollection());
        });
    </script>
}

正如您在上面的代码中看到的，如何使这种情况一次只发生一次？

您必须将列表缓存在某个位置。我更喜欢在父视图模型之类的东西中执行此操作。见下文。

var OrderList = function(){
    var self = this;
    ...
    self.CashedArray = ko.observableArray(new Array());
    $.getJSON("/AX_INVENTSUM/GetAX_INVENTSUMs", null, function (data) {
        var array = [];
        $.each(data, function (index, value) {
            array.push(value);
        });
        self.CashedArray(array);
    });
    self.AddButtonClick = function (){
       var orderDetails = new PurchaseOrderDetail(self.CashedArray());
    };
};
var PurchaseOrderDetail = function (items) {
    var self = this;
    ...
    self.AX_INVENTSUMs = ko.observableArray(items);
};