将 JavaScript 对象数组传递给控制器

Question

I have a dynamic form that I'm needing to submit to my Controller. I'm attempting to do this using an ajax request after building my Javascript Array of Objects. When I try to send only a string value to the controller, my model is constantly null . However when I'm trying to send my Javascript array , I'm getting a 400 (Bad Request) reponse.

My dynamic form is used to create an overall Ticket . The Ticket is made up of Entries which can be as many as the End-User is needing as they are able to add a new row to the form table. The inputs for the form: AccountNumber , AccountDescription , DebitAmount , CreditAmount , PostingDescription , PostDate .

The form table :

@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>
                    <th>
                        @Html.DisplayNameFor(model => model.DebitAmount)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.CreditAmount)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.PostingDescription)
                    </th>
                    <th>
                        <input type="checkbox" id="checkAllCheckBox" class="allRowCheckBox" value="all" />
                    </th>
                </tr>
            </thead>
            <tbody>
                @for (int i = 0; i < 2; i++)
                {
                    <tr>
                        <td class="tableAccountNumber">
                            <input id="@($"form{i}AccountInfo")" list="AccountList" class="AccountInfo">
                        </td>
                        <td class="tableAccountDescription">
                            <input id="@($"form{i}AccountDescription")" class="AccountDescription" />
                            <span asp-validation-for="AccountDescription" class="text-danger"></span>
                        </td>
                        <td class="tableDebitAmount">
                            <input type="text" data-type="currency" id="@($"form{i}DebitAmount")" class="debitAmount" asp-for="DebitAmount" asp-format="{0:C}" value="0.00" />
                            <span asp-validation-for="DebitAmount" class="text-danger"></span>
                        </td>
                        <td class="tableCreditAmount">
                            <input type="text" data-type="currency" id="@($"form{i}CreditAmount")" class="creditAmount" asp-for="CreditAmount" asp-format="{0:C}" value="0.00" />
                            <span asp-validation-for="CreditAmount" class="text-danger"></span>
                        </td>
                        <td class="tablePostingDescription">
                            <input type="text" id="@($"form{i}PostingDescription")" class="postDescrip" value="" />
                            <span asp-validation-for="PostingDescription" class="text-danger"></span>
                        </td>
                        <td class="tableSelectBox">
                            <input type="checkbox" id="@($"form{i}CheckBox")" class="rowCheckBox" value="selected" />
                        </td>
                    </tr>
                }
            </tbody>
        </table>
        <div class="tableModifyButtons">
            <button id="addRow" type="button">Add Row</button>
            <button id="deleteRow" type="button">Delete Row</button>
        </div>
    </div>

    <div class="formButtons">
        <button id="submitButton" type="button" class="btn btn-primary">Submit Ticket</button>
    </div>
</form>

My Javascript is triggered by my #submitButton being clicked. This iterates over the Ids of the #inputTable and adds the row values to and returns an array . I can print the array of objects to console and all the values are as expected. I'm currently attempting to stringify the array using JSON to pass it to my controller.

My Javascript for submitting the form:

// Function for submitting data to controller
function submitTickets() {
    // Iterate through table and generate type array for ticket submission
    // - Add to array of tickets
    // - using JSON and stringify it
    // - Pass to controller with AJAX

    let tickets = getTableTickets('inputTable');
    
    let authToken = $('input[name="__RequestVerificationToken"]');

    if (!validateTickets(tickets)) {
        setWarningMessage('Invalid Ticket Entries detected. Please review your entries and try again.', 'block');
        return;
    }

    let jsonTickets = JSON.stringify({ "tickets": tickets });

    // Ajax it to server
    // How to send JSON to server?
    $.ajax({
        url: "/TicketEntry/Tickets/Create",
        type: "POST",
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        traditional: true,
        data: {
            __RequestVerificationToken: authToken,
            model: jsonTickets
        },
        success: function (data, textStatus, jqXHR) {
            setMessage('SUCCESS: ' + data.Message, 'block');
        },
        error: function (jqXHR, textStatus, errorThrown) {
            setWarningMessage('Error: ' + jqXHR.statusText + ' - ' + textStatus + ' - ' + errorThrown, 'block');
        }
    });

    console.log(jsonTickets);
    console.log('ticket input length: ' + tickets.length);
}

JSON.Stringified array output:

{"model":[{"AccountNumber":"0000000","AccountDescription":"TEST ACCOUNT","DebitAmount":"25.00","CreditAmount":"0.00","PostingDescription":"TEST","PostDate":"07/15/2021"},{"AccountNumber":"0000001","AccountDescription":"TEST ACCOUNT 2","DebitAmount":"25.00","CreditAmount":"0.00","PostingDescription":"TEST","PostDate":"07/15/2021"},{"AccountNumber":"0000002","AccountDescription":"TEST ACCOUNT 3","DebitAmount":"0.00","CreditAmount":"50.00","PostingDescription":"TEST","PostDate":"07/15/2021"}]}

My current View Model:

public class FormTicketSubmissionModel
    {
        [Display(Name = "Account Number")]
        public string AccountNumber { get; set; }

        [DataType(DataType.Text)]
        [StringLength(29, ErrorMessage = "Description is too long!")]
        [RegularExpression(@"^[a-zA-Z0-9+&.""/'\s-]*$")]
        [Display(Name = "Account Description")]
        public string AccountDescription { get; set; }

        [Display(Name = "Posting Description")]
        [StringLength(29, ErrorMessage = "Posting Description is too long!")]
        [RegularExpression(@"^[a-zA-Z0-9+&.""/'\s-]*$")]
        public string PostingDescription { get; set; }

        [Display(Name = "Post Date")]
        [DataType(DataType.Date)]
        public DateTime PostDate { get; set; }

        [Display(Name = "Debit Amount")]
        [DataType(DataType.Currency)]
        [Column(TypeName = "decimal(18,2)")]
        [Required]
        public decimal DebitAmount { get; set; } = 0.00m;

        [Display(Name = "Credit Amount")]
        [DataType(DataType.Currency)]
        [Column(TypeName = "decimal(18,2)")]
        [Required]
        public decimal CreditAmount { get; set; } = 0.00m;
    }

I've tried passing only string values using my Ajax, but my model was consistantly null . Here is my current Action Method:

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Create([FromBody]List<FormTicketSubmissionModel> model)
{
    if (ModelState.IsValid)
    {
        // Validate data within models and save them to database 
        // ...
        
        return RedirectToAction(nameof(Index));
    }
    
    return View(model);
}

How can I pass an Array of Objects from Javascript to my Controller?

Thank you in advance for any help!

Answer 1

After revisiting @Llama 's shared link, I re-designed my model(s) and form. Also, in my View's Form, I had <form action="Create" .../> instead of <form asp-action="Create" .../> . This caused my form's submission to respond with a 400 . My solution no longer needs JavaScript / Ajax .

New models:

    public class FormTicketSubmissionModel
    {
        [HiddenInput]
        public int Id { get; set; }

        // Stores the values of the entries 
        public FormTicketEntryModel[] TicketEntries { get; set; }

        [Display(Name = "Post Date")]
        [DataType(DataType.Date)]
        public DateTime PostDate { get; set; }

        [DataType(DataType.Text)]
        [RegularExpression(@"^[a-zA-Z0-9]*$")]
        public string UserName { get; set; }
    }

    public class FormTicketEntryModel
    {
        [HiddenInput]
        public int Id { get; set; }

        [Display(Name = "Account Number")]
        public string AccountNumber { get; set; }

        [DataType(DataType.Text)]
        [StringLength(29, ErrorMessage = "Description is too long!")]
        [RegularExpression(@"^[a-zA-Z0-9+&.""/'\s-]*$")]
        [Display(Name = "Account Description")]
        public string AccountDescription { get; set; }

        [Display(Name = "Posting Description")]
        [StringLength(29, ErrorMessage = "Posting Description is too long!")]
        [RegularExpression(@"^[a-zA-Z0-9+&.""/'\s-]*$")]
        public string PostingDescription { get; set; }

        [Display(Name = "Debit Amount")]
        [DataType(DataType.Currency)]
        [Column(TypeName = "decimal(18,2)")]
        [Required]
        public decimal DebitAmount { get; set; } = 0.00m;

        [Display(Name = "Credit Amount")]
        [DataType(DataType.Currency)]
        [Column(TypeName = "decimal(18,2)")]
        [Required]
        public decimal CreditAmount { get; set; } = 0.00m;
    }

My new View:

<form asp-action="Create" method="post" class="ticketForm">
    <input asp-for="Id" />
    <div class="ticketTable">
        <table class="table" id="inputTable">
            <thead>
                <tr>
                    <th>
                        <label>Account Number</label>
                    </th>
                    <th>
                        <label>Account Description</label>
                    </th>
                    <th>
                        <label>Debit Amount</label>
                    </th>
                    <th>
                        <label>Credit Amount</label>
                    </th>
                    <th>
                        <label>Posting Description</label>
                    </th>
                    <th>
                        <input type="checkbox" id="checkAllCheckBox" class="allRowCheckBox" value="all" />
                    </th>
                </tr>
            </thead>
            <tbody>
                @for (int i = 0; i < 2; i++)
                {
                    <tr>
                        <td class="tableAccountNumber">
                            <input id="@($"form{i}AccountInfo")" asp-for="@Model.TicketEntries[i].AccountNumber" list="AccountList" class="AccountInfo">
                        </td>
                        <td class="tableAccountDescription">
                            <input id="@($"form{i}AccountDescription")" asp-for="@Model.TicketEntries[i].AccountDescription" class="AccountDescription" />
                            <span asp-validation-for="@Model.TicketEntries[i].AccountDescription" class="text-danger"></span>
                        </td>
                        <td class="tableDebitAmount">
                            <input type="text" data-type="currency" id="@($"form{i}DebitAmount")" class="debitAmount" asp-for="@Model.TicketEntries[i].DebitAmount" asp-format="{0:C}" value="0.00" />
                            <span asp-validation-for="@Model.TicketEntries[i].DebitAmount" class="text-danger"></span>
                        </td>
                        <td class="tableCreditAmount">
                            <input type="text" data-type="currency" id="@($"form{i}CreditAmount")" class="creditAmount" asp-for="@Model.TicketEntries[i].CreditAmount" asp-format="{0:C}" value="0.00" />
                            <span asp-validation-for="@Model.TicketEntries[i].CreditAmount" class="text-danger"></span>
                        </td>
                        <td class="tablePostingDescription">
                            <input type="text" id="@($"form{i}PostingDescription")" asp-for="@Model.TicketEntries[i].PostingDescription" class="postDescrip" value="" />
                            <span asp-validation-for="@Model.TicketEntries[i].PostingDescription" class="text-danger"></span>
                        </td>
                        <td class="tableSelectBox">
                            <input type="checkbox" id="@($"form{i}CheckBox")" class="rowCheckBox" value="selected" />
                        </td>
                    </tr>
                }
            </tbody>
        </table>
        <div class="tableModifyButtons">
            <button id="addRow" type="button">Add Row</button>
            <button id="deleteRow" type="button">Delete Row</button>
        </div>
    </div>

    <div class="formButtons">
        <button id="submitButton" type="submit" class="btn btn-primary">Submit Ticket</button>
    </div>
</form>