Building a form from json

Question

I'm fetching an array of viewmodels from my controller using jquery+json. I then build a form where each row in a table represents one viewmodel.

My question is: How should I name each form element so that I can get it to my controller action like this:

public ActionResult Update(MyViewModel[] models)
{
}

Edit: I'm using jquery-tmpl to generate the form, and I'm also trying to figure out how to get an index variable in it (if that's needed for the form generation).

score 0 · Accepted Answer · edited May 23 '17 at 12:26

I managed to get it working.

My jquery template:

<script id="wagonTemplate" type="text/x-jquery-tmpl">
    <tr>
        <td>
            <input type="checkbox" value="true" class="wagoncheck" name="wagons[${$item.getIndex()}].IsSelected" />
        </td>
        <td>
            <input type="text" name="wagons[${$item.getIndex()}].WagonId" value="${WagonId}" style="width:120px" />
        </td> 
        <td>
            <input type="text" name="wagons[${$item.getIndex()}].WagonNumber" value="${WagonNumber}" style="width:20px" />
        </td> 
</script>

Method that loads the template:

function loadWagons(trainId, partId) {
    $.getJSON('/train/wagons/' + escape(trainId) + '?partNo=' + partId, function (data) {
        $wagons = $('#wagons tbody');
        $wagons.empty();

        // the function used in the template to get an index.
        var tmplOptions = {
            getIndex: function getIndex() {
                return $.inArray(this.data, data);
            }
        };
        $("#wagonTemplate").tmpl(data, tmplOptions).appendTo($wagons);
    });
}

In other words:

To get a YourModel[] items argument in your controller action you need to name the items as items[0].MyProperty' where0` should correspond to the index in the array.

To get an index in a jquery template, just use pass a method in the options to the template function. I'm using a slightly modified version of the answer found here. Passing the item as done in that answer is not necessary as this points on the current item.

Building a form from json

1 Answers1