How to perform model binding of complex types in ASP.NET MVC 5

Question

I am attempting to perform some model binding of a complex type that includes a list of string. I cannot use the lambda functions to populate the posted data because I am performing the population in a javascript function.

Let me explain. I am using knockout.

Here is my client-side view model stuff:

function Witness(firstName, lastName, telephone, email, propertyNameNumber, street, postcode) {
    var self = this;
    self.firstName = firstName;
    self.lastName = lastName;
    self.telephone = telephone;
    self.email = email;
    self.propertyNameNumber = propertyNameNumber;
    self.street = street;
    self.postcode = postcode;

    self.fullName = ko.computed(function () {
        return self.firstName + " " + self.lastName;
    });

    self.address = ko.computed(function () {
        return self.propertyNameNumber + " " + self.street + " " + self.postcode;
    });
}

and here is the corresponding server side view model class:

public class Witness
{
    public string firstName;
    public string lastName;
    public string telephone;
    public string email;
    public string propertyNameNumber;
    public string street;
    public string postcode;
}

I am performing (or attempting to perform) the population for the form data in the form's submit function:

$('#GraffitiForm').submit(function () {
for (var i = 0; i < viewModel.witnesses().length; i++) {
    var witness = viewModel.witnesses()[i];
    $('<input>').attr({ type: 'text' }, { name: '[' + i.toString() + '].firstName' }).val(witness.firstName).appendTo('#GraffitiForm');
 // etc for the other properties
}

I know it's ugly, so if you can suggest a better method to get the data to the server I would appreciate it.

The problem is that when I look at the view model on the controller's action method when the form is submitted, the Witnesses property is null. Argh!

What am I doing wrong?

Mark

Answer 1

You can use templates instead of jquery with for loop for form population. templates are good for performance as well as maintenance wise. main advantage is if any time you want to change logic like validation etc you can do it separately without breaking other. So better to make template according to your model.

for template binding more info http://knockoutjs.com/documentation/template-binding.html