ASP.NET with Knockout variable length list with combobox - how to bind? - asp.net-mvc

Question

With the following ASP.NET models
public class User
{
public string Name { get; set; }
public LEmail LEmail { get; set; }
}
public class LEmail
{
public IList<CLabel> Labels;
public IList<CEmail> Emails;
}
public class CLabels
{
public IList<CLabel> Labels { get; set; }
}
public class CLabel
{
public string Name { get; set; }
}
public abstract class CEmail
{
public string SelectedLabel { get; set; }
public string Name { get; set; }
}
Filling it out with dummy data and sending to appropriate view as User object, I have the following knockout definitions in the view:
#using (Html.BeginForm("MyAction", "MyController", FormMethod.Post, new { id = "MyEditor" }))
{
#Html.EditorFor(m => #Model.LEmail)
<p>
<input type="submit" value="Save" data-bind="enable: Emails().length > 0" />
Cancel
</p>
<p data-bind="visible: saveFailed" class="error">A problem occurred saving the data.</p>
<div id="debug" style="clear: both">
<hr />
<h2>Debug:</h2>
<div data-bind="text: ko.toJSON(viewModel)"></div>
</div>
}
<script type="text/javascript">
$(function() {
ko.applyBindings(viewModel);
$("#profileEditorForm").validate({
submitHandler: function(form) {
if (viewModel.save())
window.location.href = "/";
return false;
}
});
});
var viewModel = {
Name: ko.observable("#Model.Name"),
Labels: ko.observableArray(#Html.Json(Model.LEmail.Labels) || []),
Emails: ko.observableArray(#Html.Json(Model.LEmail.Emails) || []),
addEmail: function() {
viewModel.Emails.push(#Html.Json(new CEmail()));
},
removeEmail: function(eml) {
viewModel.Emails.remove(eml);
},
saveFailed: ko.observable(false),
// Returns true if successful
save: function() {
var saveSuccess = false;
viewModel.saveFailed(false);
// Executed synchronously for simplicity
jQuery.ajax({
type: "POST",
url: "#Url.Action("MyAction", "MyController")",
data: ko.toJSON(viewModel),
dataType: "json",
contentType: "application/json",
success: function(returnedData) {
saveSuccess = returnedData.Success || false;
viewModel.saveFailed(!saveSuccess);
},
async: false
});
return saveSuccess;
}
};
</script>
And finally the editor template that is actually supposed to take care of variable length list that look like this:
#model MyDomain.ViewModels.LEmail
<table>
<tbody data-bind="template: { name: 'EmailsTemplate', foreach: Emails }" />
</table>
<button data-bind="click: addEmail">Add Email</button>
<script id="EmailsTemplate" type="text/html">
<tr>
<td>
#* PROBLEM IS HERE!! Labels won't show (they will it this code taken out of template) *#
<select data-bind="options: Labels"></select></td>
<td>
<input type="text" data-bind="value: Name, uniqueName: true" class="required" /></td>
<td>
Delete</td>
</tr>
</script>
Essentially I
cannot make it work in the EditorTemplate for combobox (or
dropdownlist). It won't attach to Labels no matter what I do. If I
take it outside the template somewhere else - it works as expected.
Also, based on selection to fill out the "SelectedValue" inside the Email - how to do that.
After everything is selected, (this must be simple) how to post it
all back without losing values on the way (its a super nested model
as you see).
Thank you very much in advance!

Answer 1

Labels is on your view model, not each email. Since the template is rendered within the context of a Knockout foreach binding, the binding context has changed to an email.
Here's how I'd write your view:
#model FiveW.ViewModels.LabeledEmail
<table>
<tbody data-bind="foreach: Emails">
<tr>
<td>
<select data-bind="options: $root.Labels, value: SelectedLabel"></select>
</td>
<td>
<input type="text" data-bind="value: Name, uniqueName: true" class="required" />
</td>
<td>
Delete
</td>
</tr>
</tbody>
</table>
<button data-bind="click: addEmail">Add Labeled Email</button>
The fix is in $root.Labels: we need to tell Knockout to use $root (your view model), since Labels is actually on your view model, and not on an individual email.
Also notice I didn't use an named template. This is preferable. Unless you are using the template in more than one place in your view, you should use anonymous, inline templates like I did above.