Question

我在将儿童加载到我的选项列表时遇到问题。我创建了一个订单，但我无法编辑。它不会加载下拉列表。我的目标是在订单上按“编辑”。

它将在orderitem的下拉列表中选择当前产品。我想把产品模型的价格放到视图中（当从下拉列表中选择一个项目时）

还有其他方法可以填充下拉列表吗？

我会上传图片。

这是我的代码javascript代码。

var Products = [];
//fetch categories from database
function LoadProducts(element) {
if (Products.length == 0) {
    //ajax function for fetch data
    $.ajax({
        type: "GET",
        url: '/Sales/GetProducts',
        success: function (data) {
            Products = data;
            //render catagory

            renderProducts(element);

        }
    })
}
else {
    alert("else");
    //render catagory to the element
    renderProducts(element);
}
}

function renderProducts(element) {
var $ele = $(element);
$ele.empty();
$ele.append($('<option/>').val('0').text('Select'));
$.each(Products, function (i, val) {
    $ele.append($('<option/>').val(val.ProductId).text(val.ProductName));
})
}


var Seats = [];
//fetch categories from database
function LoadSeats(element) {
if (Seats.length == 0) {
    //ajax function for fetch data
    $.ajax({
        type: "GET",
        url: '/Sales/GetSeats',
        success: function (data) {
            Seats = data;
            //render catagory
            renderSeats(element);
        }
    })
}
else {
    //render catagory to the element
    renderSeats(element);
}
}

function renderSeats(element) {
var $ele = $(element);
$ele.empty();
$ele.append($('<option/>').val('0').text('Select'));
$.each(Seats, function (i, val) {
    $ele.append($('<option/>').val(val.SeatId).text(val.SeatPlace));
})
}


var Employees = [];
//fetch categories from database
function LoadEmployees(element) {
if (Employees.length == 0) {
    //ajax function for fetch data
    $.ajax({
        type: "GET",
        url: '/Sales/GetEmployees',
        success: function (data) {
            Employees = data;
            //render catagory
            renderEmployees(element);
        }
    })
}
else {
    //render catagory to the element
    renderEmployees(element);
}
}

function renderEmployees(element) {
var $ele = $(element);
$ele.empty();
$ele.append($('<option/>').val('0').text('Select'));
$.each(Employees, function (i, val) {
    $ele.append($('<option/>').val(val.EmployeeId).text(val.EmployeeName));
})
}


var PaymentMethods = [];
//fetch categories from database
function LoadPaymentMethods(element) {
if (PaymentMethods.length == 0) {
    //ajax function for fetch data
    $.ajax({
        type: "GET",
        url: '/Sales/GetPaymentMethods',
        success: function (data) {
            PaymentMethods = data;
            //render catagory
            renderPaymentMethods(element);
        }
    })
}
else {
    //render catagory to the element
    renderPaymentMethods(element);
}
}

function renderPaymentMethods(element) {
var $ele = $(element);
$ele.empty();
$ele.append($('<option/>').val('0').text('Select'));
$.each
(PaymentMethods, function (i, val) {                           
 $ele.append
($('<option/>')
.val(val.PaymentMethodId)
.text(val.PaymentMethodType));
})
}




var ObjectState = {
Unchanged: 0,
Added: 1,
Modified: 2,
Deleted: 3
};


LoadProducts($('#productCategory'));

var salesOrderItemMapping = {    
'SalesOrderItems': {
    key: function (salesOrderItem) {
       // alert("Salesorderitem mapping key");
        return ko.utils.unwrapObservable(salesOrderItem.SalesOrderItemId);
    },
    create: function (options) {
        console.log(options);
        return new SalesOrderItemViewModel(options.data);            
    }      
}
};


//var productItemMapping = {
//    'Products': {
//        key: function(product) {
//            return ko.utils.unwrapObservable(product.ProductId);
//        },
//        create: function(options) {
//            return new SalesOrderViewModel(options.data);
 //        }
 //    }
 //};
 //    ko.mapping.fromJS(data, productItemMapping, SalesOrderViewModel);

SalesOrderItemViewModel = function (data) {
//alert("salesorder item view"); // funkade
var self = this;
ko.mapping.fromJS(data, salesOrderItemMapping, self);
//dd: ko.observableArray(Products);
self.itemss = ko.observableArray(Products);
self.selectedItem = ko.observable(Products.ProductId);

//self.product1 = ko.observableArray(Products());

//self.dd = ko.observableArray(function() {
//    //data.ProductId = data.Products.ProductId;
//    return self.Products();
//});

self.flagSalesOrderAsEdited = function() {
    if (self.ObjectState() !== ObjectState.Added) {
        self.ObjectState(ObjectState.Modified);
    }
   // alert("salesorder item view if");
    return true;
};
};


SalesOrderViewModel = function (data) {
var self = this;
ko.mapping.fromJS(data, salesOrderItemMapping, self);
//alert("salesorder view model"); // funkade

self.save = function () {
    $.ajax({
        url: "/Sales/Save/",
        type: "POST",
        data: ko.toJSON(self),
        contentType: "application/json",
        success: function (data) {
            if (data.salesOrderViewModel !== null)
                ko.mapping.fromJS(data.salesOrderViewModel, {}, self);

            if (data.newLocation !== null)
                window.location = data.newLocation;
        }
    });
},

self.flagSalesOrderAsEdited = function () {
    if (self.ObjectState() !== ObjectState.Added) {
        self.ObjectState(ObjectState.Modified);
    }
    return true;
},



self.deleteSalesOrderItem = function(salesOrderItem) {
    self.SalesOrderItems.remove(this);

    if (salesOrderItem.SalesOrderItemId() > 0 &&
                       self.SalesOrderItemsToDelete.indexOf
(salesOrderItem.SalesOrderItemId()) === -1)
        self.SalesOrderItemToDelete.push(SalesOrderItemId());

}

self.addSalesOrderItem = function () {
   // alert(" add salesorder item"); // funkade
var salesOrderItem = new SalesOrderItemViewModel(
{ SalesOrderItemId: 0,         ProductId: 1, Quantity: 1, 
ObjectState:     ObjectState.Added });
self.SalesOrderItems.push(salesOrderItem);
};
};
 //UnitPrice: 1

LoadSeats($('#SeatId'));
LoadEmployees($('#EmployeeId'));
LoadPaymentMethods($('#PaymentMethodId'));

这是我的编辑部分视图。

<table class="table table-striped">
    <tr>
        <th>Product Name</th>
        <th>Quantity</th>
        @*<th>Unit Price</th>*@
        <th><button class="btn btn-info btn-xs" 
    data-bind="click: addSalesOrderItem">Add</button></th>
    </tr>
    <tbody data-bind="foreach: SalesOrderItems">
    <tr>
        <td>
            @*<select id="productCategory" class="pc form-control" 
    data-bind="value: ProductId">
                <option>Select</option>
            </select>*@
            @*<select data-bind="options: $parent.product1, 
    optionsText: 'ProductName', optionsValue: 'ProductId', 
    value: ProductId"></select>*@
            <select data-bind=
    "options: itemss, optionsText: 'ProductName', 
    value: ProductId,     optionsValue: 'ProductId', 
    selectedOption:     selectedOption"> </select>

        </td>
        @*<td class="form-group">
<input class="form-control input-sm" data-bind="value: ProductId" /></td>*@
        <td class="form-group">
<input class="form-control input-sm" data-bind="value: Quantity"/></td>
        @*<td class="form-group">
<input class="form-control input-sm" data- bind="text: UnitPrice"/></td>*@
        <td class="form-group">Delete</td>
    </tr>
    </tbody>
</table>

这是我创作的时候

这是我编辑订单的时候

我保存时遇到这个问题

我在将儿童加载到我的选项列表时遇到问题。我创建了一个订单，但我无法编辑。它不会加载下拉列表。我的目标是在订单上按“编辑”。

它将在orderitem的下拉列表中选择当前产品。我想把产品模型的价格放到视图中（当从下拉列表中选择一个项目时）我会上传图片。

我希望有一条路要走。我是淘汰/ mvc的新手，我无法找到有关映射的示例。我会推荐任何我可以使用的feedpack或步骤。如果您需要我更多，请写信。

谢谢!!!

这是我的创建视图btw（如何链接到淘汰赛）

@model TheSolution.Domain.viewModels.SalesOrderViewModel
@using System.Web.Script.Serialization


@{
ViewBag.Title = "Create Sales Order";
}

@{
string data = new JavaScriptSerializer().Serialize(Model);
}

@section scripts
{
<script src="~/Scripts/knockout-3.4.0.js"></script>
<script src="~/Scripts/knockout.mapping-latest.js"></script>
<script src="~/Scripts/salesorderviewmodel.js"></script>
<script type="text/javascript">
    var salesOrderViewModel = new SalesOrderViewModel(@Html.Raw(data));
    ko.applyBindings(salesOrderViewModel);
</script>
}


@Html.Partial("_EditSalesOrder");

Answer 1

因为Ajax正在加载asyc。它没有时间加载。

通过加载我的下拉列表修复编辑问题。我在视图（创建和编辑）中使用了ajaxStop它等待直到ajax加载之前获取视图

这是代码

    $(document).ajaxStop(function (event, request, settings) {

        var salesOrderViewModel = new SalesOrderViewModel(@Html.Raw(data));
        ko.applyBindings(salesOrderViewModel);
    });

由于价格我不得不做一个ko ArrayFirst来匹配ProductId observable和Products Array中的ProductId（我用Ajax加载的那个）它将返回模型中该行的UnitPrice值。

这就是它的样子。

self.findItem = function () {
    console.log(self.itemss().length);
    var thePrice = ko.utils.arrayFirst(self.itemss(), function (item) {
        return item.ProductId === self.ProductId();

    }).UnitPrice;
    console.log(thePrice);
    return thePrice * self.Quantity();
}

在MVC中装载/选择儿童的淘汰儿童

1 个答案: