Can Not populate DropDown List In Detail Portion Of Master detail form
Subhabrata Mukherjee
I am new to knockout i have to create a master child form in asp.net mvc .
I have two view models BillDetailViewModel and BillMainViewModel
public class BillDetailViewModel
{
public int BillDetailId { get; set; }
public int ItemId { get; set; }
public int OutLetFoodGroupId { get; set; }
public string ItemDesc { get; set; }
public decimal ItemBasePrice { get; set; }
public decimal DiscountedPrice { get; set; }
public decimal VatPercent { get; set; }
public decimal VatAmount { get; set; }
public decimal SalePrice { get; set; }
public int Qty { get; set; }
public string OutletName { get; set; }
public string FoodGroupDesc { get; set; }
public int BillId { get; set; }
}
public class BillMainViewModel
{
public BillMainViewModel()
{
BillDetails = new List<BillDetailViewModel>();
}
[Key]
public int BillId { get; set; }
public string FinYr { get; set; }
public int CashierId { get; set; }
public string Cashier { get; set; }
public int TotalQty { get; set; }
public decimal TotalAmount { get; set; }
public decimal TotalVatAmount { get; set; }
public decimal TotalSalePrice { get; set; }
public decimal ServiceChargePercent { get; set; }
public decimal ServiceChargeAmount { get; set; }
public decimal ServiceTaxPercent { get; set; }
public decimal ServiceTaxAmount { get; set; }
public decimal GrandTotal { get; set; }
public decimal RoundOff { get; set; }
public decimal NetAmount { get; set; }
public char PaymentType { get; set; }
public string CreditCardNo { get; set; }
public string CreditCardCo { get; set; }
public decimal AmountPaid { get; set; }
public decimal AmountRefunded { get; set; }
public List<BillDetailViewModel> BillDetails { get; set; }
}
I have created a knockout viewmodel code as follows (billmainviewmodel.js):
var billDetailMapping = {
'BillDetails': {
key: function (billDetail) {
return ko.utils.unwrapObservable(billDetail.BillDetailId);
},
create: function (options) {
return new BillDetailViewModel(options.data);
}
}
};
BillDetailViewModel = function (data) {
var self = this;
ko.mapping.fromJS(data, billDetailMapping, self);
};
BillMainViewModel = function (data) {
var self = this;
ko.mapping.fromJS(data, billDetailMapping, self);
self.Cashpayment = ko.observable(false);
self.Cashpayment.subscribe(function (newValue) {
self.AmountPaid(0);
self.CreditCardCo('');
self.CreditCardNo('');
});
self.save = function () {
var data = ko.toJSON(self);
alert(data);
$.ajax({
url: "/POS/POS/BillCreation",
type: 'POST',
data: data,
contentType: "application/json",
success: function (data) {
if (data.billMainViewModel != null)
ko.mapping.fromJS(data.billMainViewModel, {}, self);
if (data.newLocation != null)
window.location = data.newLocation;
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
if (XMLHttpRequest.status == 400) {
$('#MessageToClient').text(XMLHttpRequest.responseText);
}
else {
$('#MessageToClient').text('The web server had an error.');
}
}
});
};
self.addBillDetail = function () {
var billdetail = new BillDetailViewModel({ qty: 1 });
self.BillDetails.push(billdetail);
};
};
IN Billmain portion there are many calculative fields based on billdetails value
The form looks like
|
Cashier |
FinYr |
TotQty |
TotAmt |
sTax(%) |
Stax |
Vat |
Grand |
Net |
|
abc |
15-16 |
Calculated |
Calculated |
5.6 |
calculated |
calculated |
calculated |
calculated |
|
ItemDesc |
OutLet |
BasePrice |
Disc Pr |
Vat Per |
Vat Amt |
Sale Pr |
Qty |
subTotal |
FoodGr |
ABC ABC 240.00 240.00 0 0 240.00 4 960.00 XYZ
|
|
|
ABC |
|
MNO |
|
PQR |
I can not Populate The ItemDesc dropdown list though i Have got the following data (no data in dropdown) :
var billMainViewModel = new
BillMainViewModel(
{"BillId":0,"FinYr":"2015-2016","CashierId":2,"Cashier":"Supervisor","ServiceChargePercent":2.00,"ServiceTaxPercent":5.60,"CreditCardNo":null,"CreditCardCo":null,"AmountPaid":0,"AmountRefunded":0,
"BillDetails":
[{"BillDetailId":0,"ItemId":60,"OutLetFoodGroupId":17,"ItemDesc":"Rosogolla","ItemBasePrice":15.00,"DiscountedPrice":15.00,"VatPercent":0.00,"VatAmount":0.00,"SalePrice":15.00,"Qty":0,"OutletName":"Amrito","FoodGroupDesc":"Sweets","BillId":0},
{"BillDetailId":0,"ItemId":62,"OutLetFoodGroupId":17,"ItemDesc":"Jalbhora TaalSans Sandesh","ItemBasePrice":40.00,"DiscountedPrice":40.00,"VatPercent":0.00,"VatAmount":0.00,"SalePrice":40.00,"Qty":0,"OutletName":"Amrito","FoodGroupDesc":"Sweets","BillId":0},
{"BillDetailId":0,"ItemId":65,"OutLetFoodGroupId":2,"ItemDesc":"Tandoori Chicken full","ItemBasePrice":250.00,"DiscountedPrice":225.00,"VatPercent":0.00,"VatAmount":0.00,"SalePrice":225.00,"Qty":0,"OutletName":"Chachas Chicken","FoodGroupDesc":"Tandoor","BillId":0},
{"BillDetailId":0,"ItemId":66,"OutLetFoodGroupId":2,"ItemDesc":"Tandoori chicken Half","ItemBasePrice":120.00,"DiscountedPrice":120.00,"VatPercent":0.00,"VatAmount":0.00,"SalePrice":120.00,"Qty":0,"OutletName":"Chachas Chicken","FoodGroupDesc":"Tandoor","BillId":0},
{"BillDetailId":0,"ItemId":67,"OutLetFoodGroupId":17,"ItemDesc":"Rosogollar Payesh","ItemBasePrice":100.00,"DiscountedPrice":90.00,"VatPercent":0.00,"VatAmount":0.00,"SalePrice":90.00,"Qty":0,"OutletName":"Amrito","FoodGroupDesc":"Sweets","BillId":0},
{"BillDetailId":0,"ItemId":68,"OutLetFoodGroupId":10,"ItemDesc":"Gobi Ka Chapati","ItemBasePrice":8.00,"DiscountedPrice":8.00,"VatPercent":0.00,"VatAmount":0.00,"SalePrice":8.00,"Qty":0,"OutletName":"Chatpata Chapati","FoodGroupDesc":"Chapati","BillId":0}]
})
Using the views
@model BO.POS.BillMainViewModel
@using System.Web.Script.Serialization
@{
ViewBag.Title = "Bill";
Layout = "~/Areas/POS/Views/Shared/_POSMainApp.cshtml";
}
@{string data = new JavaScriptSerializer().Serialize(Model);}
<div>
<div style="float:left;width:150px;">@Html.ActionLink("Back to List", "BillMainListing")</div>
<h4>@ViewBag.Title</h4>
</div>
<form id="frm" method="POST">
.........
........
<tbody data-bind="foreach: BillDetails">
<tr>
<td class="form-group">
<select data-bind="options:$parent.BillDetails, value:BillMainViewModel().BillDetails, optionsText: '$data.ItemDesc', optionsCaption:'Select a Item ...'"></select>
</td>
</form>
@section scripts{
<script src="~/Scripts/jquery-2.1.4.min.js"></script>
<script src="~/Scripts/knockout-3.3.0.js"></script>
<script src="~/Scripts/knockout.mapping-latest.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Areas/POS/Scripts/billmainviewmodel.js"></script>
<script type="text/javascript">
$(function () {
var billMainViewModel = new BillMainViewModel(@Html.Raw(data))
@*billMainViewModel.itemlist =@Html.Raw(Json.Encode(ViewBag.items))*@
ko.applyBindings(billMainViewModel);
});
</script>
Please help me
Regards
