Click here to Skip to main content
11,921,845 members (65,780 online)
Rate this:
Please Sign up or sign in to vote.
See more: MVC3 Knockout.js
Hello Friends,
I'm new to Knockout and MVC.
In my view I'm getting list of product model, which contains details like

My requirement is:
1. I want to show only 1 dropdown intially which will be populated with the ProductName from the model.
2. Based on type of product the QuantityPerUnit, UnitPrice and UnitsInStock will be displayed in the lables.
3. There is button to place extra order, which will dynamically create another dropdown of products.

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>
    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());
    <tbody data-bind="foreach: order">
                @*<select id="ddlProduct">
                <option>Select Product</option>
                @foreach (var _prod in Model)
                <select data-bind="value: product"></select>
     <button data-bind="click: addOrder">Reserve another order</button>

Any idea how to carry out this functionality??

Thanks in advance
Posted 11-Mar-13 5:25am

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

  Print Answers RSS
0 OriginalGriff 538
1 Dave Kreskowiak 260
2 Sergey Alexandrovich Kryukov 173
3 phil.o 170
4 RyanDev 134
0 OriginalGriff 7,036
1 KrunalRohit 4,530
2 Sergey Alexandrovich Kryukov 3,286
3 George Jonsson 2,840
4 Suvendu Shekhar Giri 2,216

Advertise | Privacy | Mobile
Web02 | 2.8.151120.1 | Last Updated 11 Mar 2013
Copyright © CodeProject, 1999-2015
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