使用敲除在MVC中观察到的问题 [英] Problem in observable in MVC using knockout

问题描述

朋友您好，



我的产品ID为product，productName为text.



我的问题是，当我从下拉列表中选择特定产品时，它应该获得其他详细信息，例如QuantityPerUnit，UnitPrice和UnitsInStock。



我想使用knockout执行。



我为QuantityPerUnit尝试了以下内容：

Hello friends,

I have dropdown with productID as value and productName as text.

My problem is when I select particular product from dropdown, it should get other details such as QuantityPerUnit, UnitPrice and UnitsInStock.

I want to perform using knockout.

I tried following for QuantityPerUnit:

<script>
    $(document).ready(function () {
        $('#divheader').append("<h2>Please place an order</h2>");
        $.ajax({
            type: "Post",
            url: "/Order/getData",
            data: {},
            success: function (data) {

                function ReservationsViewModel() {
                    var self = this;

                    self.orderList = ko.observableArray([
                        new orderReservation(data)
                    ]);
                    self.addOrder = function () {
                        self.orderList.push(new orderReservation(data));
                    }
                }

                function orderReservation(data) {
                    var self = this;
                    self.products = ko.observable(data);
                    self.QPU = ko.computed(function () {
                        return self.products().QuantityPerUnit
                    });
                }

                ko.applyBindings(new ReservationsViewModel());
            }
        });
    });

</script>

<table>
    <thead>
        <tr>
            <th>Product Name</th>
            <th>Quantity/Unit</th>
            <th>Unit Price</th>
            <th>Unit in stock</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: orderList">
        <tr>
            <td>
                <select style="width:250px;" id="ddlProduct" data-bind="options: products, optionsValue: 'ProductID', optionsText: 'ProductName', optionsCaption: 'Choose...'"></select>
            </td>
            <td data-bind="text: QPU"></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>
<div>
    <button data-bind="click: addOrder">Reserve another order</button>
</div>

下拉列表已经填充，但是在下拉列表中更改时，QuantityPerUnit不可用



我可以知道我哪里出错。



提前致谢

Dropdown is getting populated, but on change on dropdown QuantityPerUnit is not available

May i know where I'm going wrong.

Thanks in advance

推荐答案

（document）.ready（function（）{

(document).ready(function () {

（'＃divheader'）。append（< h2>请下订单< / h2> ;）;

('#divheader').append("<h2>Please place an order</h2>");

.ajax（{
type：Post，
url：/ Order / getData，
data：{} ，
成功：函数（数据）{

函数ReservationsViewModel（）{
var self = this;

self.orderList = ko.observableArray（ [
new orderReservation（data）
]）;
self.addOrder = function（）{
self.orderList.push（new orderReservation（data））;
}
}

函数orderReservation（data）{
var self = this;
self.products = ko.observable（data）;
self.QPU = ko.computed（function（）{
return self.products（）。QuantitySeerUnit
}）;
}

ko.applyBindings（new ReservationsViewModel（））;
}
}）;
}）;

< / script>

< table>
< thead>
< tr>
< th>产品名称< / th>
< th>数量/单位< / th>
< th>单价< / th>
< th>库存中的单位< / th>
< / tr>
< / thead>
< tbody data-bind =foreach：orderList>
< tr>
< td>
< select style =width：250px; id =ddlProductdata-bind =options：products，optionsValue：'ProductID'，optionsText：'ProductName'，optionsCaption：'Choose ...'>< / select>
< / td>
< td data-bind =text：QPU>< / td>
< td>< / td>
< td>< / td>
< / tr>
< / tbody>
< / table>
< div>
< button data-bind =click：addOrder>保留其他订单< / button>
< / div>

.ajax({ type: "Post", url: "/Order/getData", data: {}, success: function (data) { function ReservationsViewModel() { var self = this; self.orderList = ko.observableArray([ new orderReservation(data) ]); self.addOrder = function () { self.orderList.push(new orderReservation(data)); } } function orderReservation(data) { var self = this; self.products = ko.observable(data); self.QPU = ko.computed(function () { return self.products().QuantityPerUnit }); } ko.applyBindings(new ReservationsViewModel()); } }); }); </script> <table> <thead> <tr> <th>Product Name</th> <th>Quantity/Unit</th> <th>Unit Price</th> <th>Unit in stock</th> </tr> </thead> <tbody data-bind="foreach: orderList"> <tr> <td> <select style="width:250px;" id="ddlProduct" data-bind="options: products, optionsValue: 'ProductID', optionsText: 'ProductName', optionsCaption: 'Choose...'"></select> </td> <td data-bind="text: QPU"></td> <td></td> <td></td> </tr> </tbody> </table> <div> <button data-bind="click: addOrder">Reserve another order</button> </div>

下拉列表已经填充，但是在下拉列表中更改时，QuantityPerUnit不可用



我可以知道我哪里出错了。



提前致谢

Dropdown is getting populated, but on change on dropdown QuantityPerUnit is not available

May i know where I'm going wrong.

Thanks in advance

这篇关于使用敲除在MVC中观察到的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！