如何在Asp.net mvc和Knockoutjs中单击“添加新项”以重复绑定控件

Question

当用户单击“添加课程”时，我想重复使用Viewbag属性和另一个文本框绑定的下拉列表。 我已经根据我所看到的教程使用过asp.net mvc和kickout.js，但是该教程不能完全使用绑定控件来处理，请如何使用asp.net mvc和knockout.js来实现此目的。 下面是我的代码。 谢谢

<table id="jobsplits">
     <thead>
        <tr>
           <th>@Html.DisplayNameFor(m => m.selectedCourse.FirstOrDefault().FK_CourseId)</th>
           <th>@Html.DisplayNameFor(m => m.selectedCourse.FirstOrDefault().CourseUnit)</th>
           <th></th>
        </tr>
     </thead>
     <tbody data-bind="foreach: courses">
           @for (int i = 0; i < Model.selectedCourse.Count; i++)
           {
              <tr>
                  <td>
                       @Html.DropDownListFor(model => model.selectedCourse[i].FK_CourseId, new SelectList(ViewBag.Course, "Value", "Text", Model.FK_CourseId), "Select Course", new { @class = "form-control", data_bind = "value: courses" })
                  </td>
                  <td>
                       @Html.TextBoxFor(model => model.selectedCourse[i].CourseUnit, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly", data_bind = "value: courseUnit" } })
                  </td>
                  <td>
                       <button type="button" data-bind="click: $root.removeCourse" class="btn delete">Delete</button>
                  </td>
              </tr>
           }
     </tbody>
</table>

<div class="col-md-4">
     <button data-bind="click: addCourse" type="button" class="btn">Add Course</button>
</div>

这是脚本部分

@section Scripts{
@Scripts.Render("~/bundles/knockout")
<script>
    function CourseAdd(course, courseUnit) {
        var self = this;

        self.course = course;
        self.courseUnit = courseUnit;
    }

    function CourseRegViewModel() {
        var self = this;

        self.addCourse = function () {
            self.courses.push(new CourseAdd(self.course, self.courseUnit));
        }

        self.courses = ko.observableArray([
            new CourseAdd(self.course, self.courseUnit)
        ]);

        self.removeCourse = function (course) {
            self.courses.remove(course)
        }            
    }

    ko.applyBindings(new CourseRegViewModel());
</script>
}

编辑： 我已经能够从http://learn.knockoutjs.com/#/?tutorial=collections

获得此示例

但这只是一个硬编码的observableArray。

我希望能够从数据库中填充选择。但这并没有被填充。

这是我的以下示例代码：

<table id="jobsplits">
      <thead>
         <tr>
             <th>Persenger Name</th>
             <th>Meal</th>
             <th></th>
          </tr>
       </thead>
       <tbody data-bind="foreach: seats">
           <tr>
              <td>
                  <input data-bind="value: name" />
              </td>
              <td>
                  <select data-bind="options:coursesArray, optionsText:'Text', optionsValue:'Value', optionsCaption: 'Choose...'"></select>
              </td>
              <td>
                  <button type="button" data-bind="click: $root.removeSeat" class="btn delete">Delete</button>
              </td>
           </tr>
       </tbody>
     </table>

     <div class="col-md-4">                        
         <button data-bind="click: addSeat">Add Seat</button>
     </div>

这是调整后的脚本部分：

<script>
    function SeatReservation(name, initialMeal) {
        var self = this;
        self.name = name;
        self.meal = ko.observable(initialMeal);
    }

    function ReservationsViewModel() {
        var self = this;

        //This is what i want to put in dropdown instead
        self.thecourses.subscribe(function () {
            getCourses();
        });

        // Editable data
        self.seats = ko.observableArray([
            new SeatReservation("Steve", self.thecourses),
            new SeatReservation("Bert", self.thecourses)
        ]);

        self.addSeat = function () {
            self.seats.push(new SeatReservation("", self.availableMeals[0]));
        }

        self.removeSeat = function (seat) { self.seats.remove(seat) }

        var getCourses = function () {
            var collegeCode = $("#Colleges").val();
            var departmentCode = $("#Departments").val();

            var url = '@Url.Action("GetCourses", "Student")';
            $.getJSON(url, { deptId: departmentCode, collegeId: collegeCode }, function (data) {
                self.coursesArray(data)
            });
        }
    }

    ko.applyBindings(new ReservationsViewModel());
</script>