how to add textbox for modal with one to many relationship - asp.net-mvc

Question

i have two models "user" (id,username,address) and "sales" (id,descriprion,userid)
user can have multiple sales (one to many relationship)
and i want to add user information from mvc razor form and i also want to send sales information to controller from my form.
my question is what is the best way to do this task
I am using grid and a small form to add sales in a grid and want to post that grid with user information. i dont know how to do this.
please suggest me the best way to do this task. or the way that i am using how to post sales also with user information.
Here is the way i want to post this form
Click Image to see

Answer 1

If you need to insert multi description for each user I think you have to create a list of hidden input(I use jquery you can choose another plugin or pure javascripts)
<form>
<input id="username" name="username" />
<input type="button" value="Add" id="btnAdd" />
<table id="saleTable">
<tbody></tbody>
</table>
<input type="submit" value="submit" />
<div id="inputContainer">
</div>
</form>
<script>
var index = 0;
$("#btnAdd").on("click", function () {
var saleDesc = $("#saleDesc").val();
$("#inputContainer").append('<input type="hidden" value="' + saleDesc + '" name="Sales[' + index + '].Description" />');
$("#saleTable tbody").append('<tr><td> ' + saleDesc + '</td></tr>');
index++;
});
</script>
the code above will work with following ViewModel
public class User
{
public long Id { get; set; }
public string Username { get; set; }
public List<Sale> Sales { get; set; }
}
public class Sale
{
public long Id { get; set; }
public string Description { get; set; }
}
And after you click on Submit button you receive data in controller
public ActionResult Receive(User model)
{
//Save data...
return View()
}