Click here to Skip to main content
13,090,678 members (47,877 online)
Rate this:
 
Please Sign up or sign in to vote.
See more:
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
Posted 11-Mar-13 4:25am

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month


Advertise | Privacy |
Web04 | 2.8.170813.1 | Last Updated 11 Mar 2013
Copyright © CodeProject, 1999-2017
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100