I have a dynamic form that I'm trying to submit to my Controller. Instead of sending just a string or an array with data, I need to pass an array of objects using ajax request after building the Javascript Array. The challenge is that when I send only a string value to the controller, my model ends up being null, and if I try to send the Javascript array, I receive a 400 (Bad Request) response.
The dynamic form I'm working on is for creating a Ticket, which consists of multiple Entries. Users can add as many rows as they need to fill out the required information such as:
AccountNumber, AccountDescription, DebitAmount, CreditAmount, PostingDescription, PostDate.
Here's how the form table looks like:
@model Areas.TicketEntry.Models.FormTicketSubmissionModel
...
<div class="postDate">
<label asp-for="PostDate" class="control-label"></label>
<input id="PostDateInput" autocomplete="off" />
<span asp-validation-for="PostDate" class="text-danger"></span>
</div>
<form action="Create" method="post" class="ticketForm">
<div class="ticketTable">
<table class="table" id="inputTable">
<thead>
<tr>
<th>
@Html.DisplayNameFor(model => model.AccountNumber)
</th>
<th>
@Html.DisplayNameFor(model => model.AccountDescription)
</th>
...
</tr>
</thead>
<tbody>
...
<div class="formButtons">
<button id="submitButton" type="button" class="btn btn-primary">Submit Ticket</button>
</div>
</form>
How can I successfully submit an Array of Objects from Javascript to my Controller?
Any assistance would be greatly appreciated!