Data-binding MVC-4 to a Knockout.js foreach - razor

Question

We have a form in our web application that, in one place, asks the user to enter a list of values. We wrote this part of the form using Razor and knockout.js so that there is a textbox for each value of the list, similar to this tutorial. How can we data-bind these textboxes to our MVC model?
Here is our form:
#model OurProject.Models.Input.InputModel
#{
ViewBag.Title = "Input";
}
<h2>
Inputs</h2>
<div id="inputKOApp">
#using (Html.BeginForm())
{
<!-- snip - lots of part of our form that work correctly -->
<div class="row-fluid">
<div class="control-group">
<div class="span8 control-label">
#Html.LabelFor(model => model.POSTransactionCodes)
</div>
<div class="controls">
<!-- These are the textboxes we would like to bind to MVC -->
<ul class="pull-right" data-bind="foreach: POSTransactionCodes">
<li>
<input data-bind="value: code" />
Delete</li>
</ul>
<button class="pull-right" data-bind="click: addPOSTransactionCode">
Add another POS Transaction Code</button>
#Html.ValidationMessageFor(model => model.POSTransactionCodes, null, new { #class = "help-inline" })
</div>
</div>
</div>
<!-- snip - more cshtml that is irrelevant to the problem -->
</div>
<input type="submit" value="Submit" />
}
</div>
<script type="text/javascript" src='~/Scripts/jquery-1.8.2.min.js'></script>
<script type="text/javascript" src='~/Scripts/knockout-2.1.0.js'></script>
<script type="text/javascript" src='~/Scripts/OP/OP.js'></script>
<script type="text/javascript" src='~/Scripts/OP/Input/OP.Input.Input.Form.js'></script>
<script type="text/javascript" src='~/Scripts/OP/Input/OP.Input.Input.Data.js'></script>
<script type="text/javascript">
var inputApp = $('#inputKOApp')[0];
OP.Input.Form.init(inputApp);
</script>
Here is our knockout.js script, OP.Input.Input.Form.js:
extend(OP, 'OP.Input.Form');
OP.Input.Form = function (jQuery) {
var TransactionCodeView = function () {
var self = this;
self.code = "";
};
//The ViewModel for the page
var ViewModel = function () {
var self = this;
//Fields
/* snip - lots of fields that work as expected */
self.POSTransactionCodes = ko.observableArray([]); //is a list of transaction codes
//Set up with initial data
/* I'm guessing that we won't need this function anymore since MVC will populate
* everything for us, but I'll leave it in until I'm far enough along to know
* I won't need to gut lots of stuff */
self.initialize = function () {
var c = function (data, status, response) {
/* snip - lots of fields that work as expected */
if (status === "success") {
if(data.POSTransactionCodes != null) ko.utils.arrayPushAll(self.POSTransactionCodes, data.POSTransactionCodes);
self.POSTransactionCodes.valueHasMutated();
} else {
}
};
OP.Input.Data.GetInput(c);
}
//When saving, submit data to server
self.save = function (model) {
var c = function (data, status, response) {
if (status === "success") {
} else {
}
};
OP.Input.Data.SaveInput(model, c);
}
//Modifying POSTransactionCodes array
self.removePOSTransactionCode = function (POScode) {
self.POSTransactionCodes.remove(POScode);
}
self.addPOSTransactionCode = function () {
self.POSTransactionCodes.push(new TransactionCodeView());
}
};
//Connect KO form to HTML
return {
init: function (elToBind) {
var model = new ViewModel();
ko.applyBindings(model, elToBind);
model.initialize();
}
};
} ($);
Here is our MVC model:
namespace OurProject.Models.Input
{
public class InputModel : IModel
{
//Snip - lots of properties that aren't interesting for this problem
[Required]
[DisplayName("POS Transaction Codes")]
public List<double> POSTransactionCodes { get; set; }
public InputModel()
{ }
/* I ommitted a few other methods that
* aren't relevant to this problem. */
}
}

Answer 1

I don't see how do you send the data back to the server but you need to name your inputs in way which allows model binding:
If you're binding to a list/collection your inputs should be name like:
<input type="text" name="CollectionPropertyName[index]" />
You can read about Model Binding To A List in this article
So you just need generate proper names for your inputs:
<input data-bind="value: code, attr: { name: 'POSTransactionCodes[' + $index() + ']' }" />
You should note that the above solution may only works if you're using the submit button and send the data form-urlencoded if you are sending the data as json you may need to tweak your serialization logic to make the model binder happy:
In this case your json should something like this:
{
//...
POSTransactionCodes: [ 1 , 3 ]
//..
}

Answer 2

Thanks to nemesv's answer show me light on this one.
But I need to have the "normal" name and id attribute for jquery validation. So I come up with the idea of writing my own data binder.
ko.bindingHandlers.nameId = {
update: function(element, valueAccessor, allBindingsAccessor, viewModel) {
var value = valueAccessor(),
allBindings = allBindingsAccessor();
var valueUnwrapped = ko.utils.unwrapObservable(value);
var bindName = $(element).data('bind-name');
bindName = bindName.replace('{0}', valueUnwrapped);
$(element).attr({name : bindName, id : bindName});
}
};
And use it in html
<input
data-bind="value: qty, nameId: $index"
data-bind-name="inventory[{0}].qty" />
jsfiddle