In my view, I have created a table that functions as a timesheet with an option to add more rows using a button.
<table class="table table-bordered table-responsive table-hover" id="mytab" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>Project</th>
<th>Discipline</th>
<th>Mo</th>
<th>Tu</th>
<th>We</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
<th>Sun</th>
<th></th>
</tr>
</thead>
<tr>
<td><select name="selectedProjectId" asp-items="@ViewData["projectSubProject"] as SelectList" class="form-control-plaintext align-content-around">
</select></td>
<td><select name="selectedPositionId" asp-items="@ViewData["Positions"] as SelectList" class="form-control-plaintext align-content-around"></select></td>
<td><input class="form-control-plaintext align-content-around txtCal" type="number" min="1" max="24"/></td>
<td><input class="form-control-plaintext align-content-around txtCal" type="number" min="1" max="24"/></td>
<td><input class="form-control-plaintext align-content-around txtCal" type="number" min="1" max="24"/></td>
<td><input class="form-control-plaintext align-content-around txtCal" type="number" min="1" max="24"/></td>
<td><input class="form-control-plaintext align-content-around txtCal" type="number" min="1" max="24"/></td>
<td><input class="form-control-plaintext align-content-around txtCal" type="number" min="1" max="24"/></td>
<td><input class="form-control-plaintext align-content-around txtCal" type="number" min="1" max="24"/></td>
</tr>
</table>
<br />
<form action="">
<input type="button" value="Add a Row" onclick="addRow()">
</form>
Click here to see how it looks on the webpage
The script for adding rows and sending table data in JSON format to the controller on table data change is written like this:
$(document).ready(function(){
// JavaScript code for calculating total sum goes here...
});
// JavaScript functions for adding rows, cloning elements, and cleaning up inputs
// JavaScript function for handling table data changes and sending to controller
Below are my controller methods:
public async Task<IActionResult> TableList()
{
// Controller logic for initializing view data
}
[HttpPost]
public async Task<IActionResult> TableList([FromBody] List<object> data)
{
// Controller logic for processing table data
}
I seem to be facing an issue where the JSON data doesn't reach the controller. Any insights on what might be going wrong?
UPDATE:
After resolving some issues, the data sent to the controller seems incorrect. https://i.stack.imgur.com/5aVnw.png
The selected options from select fields and numbers are not being captured correctly. I have updated all code to reflect the current state. Any suggestions or guidance on how to fix this would be greatly appreciated.