Alternative way to submit temp html table in MVC - asp.net-mvc

Question

I always use the hard coded way for submitting temp table in MVC
Ex: I have to submit the following temp table after Jquery manipulating
#using (Html.BeginForm("GridSumbit", "ControllerName", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<table class="Vista" id="table1">
<thead>
<tr>
<th>
col 1
</th>
<th>
col 2
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<input type="submit" value="Submit" />
}
Jquery
function AddRow(val1,val2) {
var col1 = '<input name="col1" type="hidden" value="' + val1 + '" />';
var col2 = '<input name="col2" type="hidden" value="' + val2 + '" />';
$('#table1 tbody:last').append('<tr><td>' + col1 + '</td><td>' + val2 + '</td></tr>');
}
Controller
public ActionResult GridSumbit(List<GridRows> grid)
{
.....
Model
public class GridRows {
public string col1 {set;get;}
public string col2 {set;get;}
}
Is there an alternative way to do this ? more organized way...

Answer 1

For model binder to correctly map the form data to your action method parameter, which is a list of GridRow class, your form element's name attribute value should be like
[{index}].col1
where {index} is the zero based index.
So if you are adding 2 rows, your inputs should be like this
<input name="[0].col1" type="hidden" value="a" />
<input name="[0].col2" type="hidden" value="b" />
<input name="[1].col1" type="hidden" value="c" />
<input name="[1].col2" type="hidden" value="d" />
You can do this by fixing your AddRow method. Here is a simple solution where i am reading the table row length and using that to derive the index. Based upon your HTML markup/client side code, make adjustments to this. All you need is the correct name attribute value in the above format.
function AddRow(val1, val2) {
var index = $('#table1 tr').length-1;
var col1 = '<input name="[' + index+'].col1" type="text" value="' + val1 + '" />';
var col2 = '<input name="[' + index +'].col2" type="text" value="' + val2 + '" />';
$('#table1 tbody:last').append('<tr><td>' + col1 + '</td><td>' + col2 + '</td></tr>');
}