Как повторить связанные элементы управления на основе нажатия кнопки Добавить новые в Asp.net MVC и Knockoutjs

Question

Я хочу повторить выпадающий список, который уже связан с использованием свойства Viewbag и другого текстового поля, когда пользователь нажимает на Добавить курс.Я использовал asp.net mvc и knockout.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>