How to repeat bound controls based on clicking Add new in Asp.net mvc and Knockoutjs





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}







0















I want to repeat a dropdownlist that is already bound using a Viewbag property and another textbox when a user click on Add Course.
I have used asp.net mvc and knockout.js based on a tutorial i saw, but the tutorial does not exactly handle using bound controls, please how can i achieve this using asp.net mvc and knockout.js.
Below is my code.
Thanks



<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>


This is the script section



@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>
}


Edit:
i have been able to get this sample working from: http://learn.knockoutjs.com/#/?tutorial=collections



but it is only an hard-coded observableArray.



I want to be able to populate the select from the database. But it is not getting populated.



This is my sample code below:



<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>


This is the adjusted script section:



<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>









share|improve this question

























  • You are mixing up knockout and mvc code. This will give you a big challenge to maintain and develop. I advise you to remove all the mvc code from the front-end and use an asp.net api to retrieve the data together with knockout OR handle the CourseAdd events in MVC.

    – R Pelzer
    Jan 3 at 10:30











  • Thanks @RPelzer for your reply, is there any link or tutorial that can point me to the better way of doing it. Thanks

    – Ayodele Timothy
    Jan 3 at 11:04











  • When you want to learn more about knockout, you can do the tutorial provided by them. learn.knockoutjs.com MVC tutorials can be found all over the web.

    – R Pelzer
    Jan 3 at 11:13











  • lol, R Pelzer, done that already, i meant a tutorial that addresses my immediate issue. Thanks

    – Ayodele Timothy
    Jan 3 at 12:37











  • Do you still need answer to the original issue you posted?

    – adiga
    Jan 16 at 18:56


















0















I want to repeat a dropdownlist that is already bound using a Viewbag property and another textbox when a user click on Add Course.
I have used asp.net mvc and knockout.js based on a tutorial i saw, but the tutorial does not exactly handle using bound controls, please how can i achieve this using asp.net mvc and knockout.js.
Below is my code.
Thanks



<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>


This is the script section



@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>
}


Edit:
i have been able to get this sample working from: http://learn.knockoutjs.com/#/?tutorial=collections



but it is only an hard-coded observableArray.



I want to be able to populate the select from the database. But it is not getting populated.



This is my sample code below:



<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>


This is the adjusted script section:



<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>









share|improve this question

























  • You are mixing up knockout and mvc code. This will give you a big challenge to maintain and develop. I advise you to remove all the mvc code from the front-end and use an asp.net api to retrieve the data together with knockout OR handle the CourseAdd events in MVC.

    – R Pelzer
    Jan 3 at 10:30











  • Thanks @RPelzer for your reply, is there any link or tutorial that can point me to the better way of doing it. Thanks

    – Ayodele Timothy
    Jan 3 at 11:04











  • When you want to learn more about knockout, you can do the tutorial provided by them. learn.knockoutjs.com MVC tutorials can be found all over the web.

    – R Pelzer
    Jan 3 at 11:13











  • lol, R Pelzer, done that already, i meant a tutorial that addresses my immediate issue. Thanks

    – Ayodele Timothy
    Jan 3 at 12:37











  • Do you still need answer to the original issue you posted?

    – adiga
    Jan 16 at 18:56














0












0








0








I want to repeat a dropdownlist that is already bound using a Viewbag property and another textbox when a user click on Add Course.
I have used asp.net mvc and knockout.js based on a tutorial i saw, but the tutorial does not exactly handle using bound controls, please how can i achieve this using asp.net mvc and knockout.js.
Below is my code.
Thanks



<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>


This is the script section



@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>
}


Edit:
i have been able to get this sample working from: http://learn.knockoutjs.com/#/?tutorial=collections



but it is only an hard-coded observableArray.



I want to be able to populate the select from the database. But it is not getting populated.



This is my sample code below:



<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>


This is the adjusted script section:



<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>









share|improve this question
















I want to repeat a dropdownlist that is already bound using a Viewbag property and another textbox when a user click on Add Course.
I have used asp.net mvc and knockout.js based on a tutorial i saw, but the tutorial does not exactly handle using bound controls, please how can i achieve this using asp.net mvc and knockout.js.
Below is my code.
Thanks



<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>


This is the script section



@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>
}


Edit:
i have been able to get this sample working from: http://learn.knockoutjs.com/#/?tutorial=collections



but it is only an hard-coded observableArray.



I want to be able to populate the select from the database. But it is not getting populated.



This is my sample code below:



<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>


This is the adjusted script section:



<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>






asp.net asp.net-mvc knockout.js






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Jan 10 at 21:57







Ayodele Timothy

















asked Jan 3 at 9:32









Ayodele TimothyAyodele Timothy

177




177













  • You are mixing up knockout and mvc code. This will give you a big challenge to maintain and develop. I advise you to remove all the mvc code from the front-end and use an asp.net api to retrieve the data together with knockout OR handle the CourseAdd events in MVC.

    – R Pelzer
    Jan 3 at 10:30











  • Thanks @RPelzer for your reply, is there any link or tutorial that can point me to the better way of doing it. Thanks

    – Ayodele Timothy
    Jan 3 at 11:04











  • When you want to learn more about knockout, you can do the tutorial provided by them. learn.knockoutjs.com MVC tutorials can be found all over the web.

    – R Pelzer
    Jan 3 at 11:13











  • lol, R Pelzer, done that already, i meant a tutorial that addresses my immediate issue. Thanks

    – Ayodele Timothy
    Jan 3 at 12:37











  • Do you still need answer to the original issue you posted?

    – adiga
    Jan 16 at 18:56



















  • You are mixing up knockout and mvc code. This will give you a big challenge to maintain and develop. I advise you to remove all the mvc code from the front-end and use an asp.net api to retrieve the data together with knockout OR handle the CourseAdd events in MVC.

    – R Pelzer
    Jan 3 at 10:30











  • Thanks @RPelzer for your reply, is there any link or tutorial that can point me to the better way of doing it. Thanks

    – Ayodele Timothy
    Jan 3 at 11:04











  • When you want to learn more about knockout, you can do the tutorial provided by them. learn.knockoutjs.com MVC tutorials can be found all over the web.

    – R Pelzer
    Jan 3 at 11:13











  • lol, R Pelzer, done that already, i meant a tutorial that addresses my immediate issue. Thanks

    – Ayodele Timothy
    Jan 3 at 12:37











  • Do you still need answer to the original issue you posted?

    – adiga
    Jan 16 at 18:56

















You are mixing up knockout and mvc code. This will give you a big challenge to maintain and develop. I advise you to remove all the mvc code from the front-end and use an asp.net api to retrieve the data together with knockout OR handle the CourseAdd events in MVC.

– R Pelzer
Jan 3 at 10:30





You are mixing up knockout and mvc code. This will give you a big challenge to maintain and develop. I advise you to remove all the mvc code from the front-end and use an asp.net api to retrieve the data together with knockout OR handle the CourseAdd events in MVC.

– R Pelzer
Jan 3 at 10:30













Thanks @RPelzer for your reply, is there any link or tutorial that can point me to the better way of doing it. Thanks

– Ayodele Timothy
Jan 3 at 11:04





Thanks @RPelzer for your reply, is there any link or tutorial that can point me to the better way of doing it. Thanks

– Ayodele Timothy
Jan 3 at 11:04













When you want to learn more about knockout, you can do the tutorial provided by them. learn.knockoutjs.com MVC tutorials can be found all over the web.

– R Pelzer
Jan 3 at 11:13





When you want to learn more about knockout, you can do the tutorial provided by them. learn.knockoutjs.com MVC tutorials can be found all over the web.

– R Pelzer
Jan 3 at 11:13













lol, R Pelzer, done that already, i meant a tutorial that addresses my immediate issue. Thanks

– Ayodele Timothy
Jan 3 at 12:37





lol, R Pelzer, done that already, i meant a tutorial that addresses my immediate issue. Thanks

– Ayodele Timothy
Jan 3 at 12:37













Do you still need answer to the original issue you posted?

– adiga
Jan 16 at 18:56





Do you still need answer to the original issue you posted?

– adiga
Jan 16 at 18:56












0






active

oldest

votes












Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54019521%2fhow-to-repeat-bound-controls-based-on-clicking-add-new-in-asp-net-mvc-and-knocko%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























0






active

oldest

votes








0






active

oldest

votes









active

oldest

votes






active

oldest

votes
















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54019521%2fhow-to-repeat-bound-controls-based-on-clicking-add-new-in-asp-net-mvc-and-knocko%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

MongoDB - Not Authorized To Execute Command

How to fix TextFormField cause rebuild widget in Flutter

Npm cannot find a required file even through it is in the searched directory