jquery - Send an Object from the View -

i've got table populated list of products, using jquery append new row table, want create new product new row , add list.

this 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 display 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 view, hidden field send list of product when click post:

<table id="tabla">       @for (int = 0; < model.listproducts.count(); i++)     {         <tr>             <td>                 @html.displayfor(model => model.listproducts[i].productname)                 @html.hiddenfor(model => model.listproducts[i].productname)             </td>          </tr>     }         </table> 

from drop down list choose new product , append name table:

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

the thing how can add row (product name) product list.

i thinking use ajax or go action after click add , render view again. there way add via jquery without using ajax or go action link?

the way post form, , in actionresult add new items.