Hello Friends,
I'm new to Knockout and MVC.
In my view I'm getting list of product model, which contains details like
ProductName|QuantityPerUnit|UnitPrice|UnitsInStock
My requirement is:
1. I want to show only 1 dropdown intially which will be populated with the ProductName from the model.<br />
2. Based on type of product the QuantityPerUnit, UnitPrice and UnitsInStock will be displayed in the lables.<br />
3. There is button to place extra order, which will dynamically create another dropdown of products.<br />
Here is view:
@model IList<MVC.Models.Product>
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Please place an order</h2>
<script src="../../Scripts/knockout%202.20.js" type="text/javascript"></script>
<script>
function orderReservation() {
var self = this;
self.product = ko.observable(_objModel);
}
function ReservationsViewModel() {
var self = this;
self.addOrder = function () {
self.order.push(new orderReservation());
}
}
ko.applyBindings(new ReservationsViewModel());
</script>
<table>
<tbody data-bind="foreach: order">
<tr>
<td>
@*<select id="ddlProduct">
<option>Select Product</option>
@foreach (var _prod in Model)
{
<option>@_prod.ProductName</option>
}
</select>*@
<select data-bind="value: product"></select>
</td>
</tr>
</tbody>
</table>
<div>
<button data-bind="click: addOrder">Reserve another order</button>
</div>
Any idea how to carry out this functionality??
Thanks in advance