I've got a table populated from a list of products, using jquery I append a new row to the table, what I want is to create a new product from this new row and add it to the list.

This is the Product model:

```
    public class Product
    {
    public int ProductId { get; set; }
    public string ProductName { get; set; }
    public decimal Price { get; set; }
    public int ProductState { get; set; }
    }

```

The Index Model View where I display the list of product:

```
    public class BillViewModel
    {
    public SelectList ClientList { get; set; }
    public int SelectedClient { get; set; }
    public SelectList ProductList { get; set; }
    public int ProductSelected { get; set; }
    public List<Product> ListProducts { get; set; }
    public List<Client> ListClients { get; set; }
    }

```

This is the view, the hidden field is to send the list of product when I click post:

```
<table id="tabla">

    @for (int i = 0; i < Model.ListProducts.Count(); i++)
    {
        <tr>
            <td>
                @Html.DisplayFor(model => model.ListProducts[i].ProductName)
                @Html.HiddenFor(model => model.ListProducts[i].ProductName)
            </td>

        </tr>
    }       

</table>

```

From a drop down list a choose a new product and I append the name to the table:

```
<script type="text/javascript">
$('#submit').click(function() {
    $('#tabla').append('<tr><td>' + $('#select option:selected').text() + '</tr>');
});

```

The thing is how can I do to add this row (product name) to the product list.

I was thinking use ajax or go to an action after click add and render the view again.
Is there some way to add it via jquery without using ajax or go to an action link?