How can I submit an unknown number of forms in ASP.NET MVC

Question

I'm working on a timesheet application where employees create timesheet based on the number of projects they have been assigned to by an Admin.This is a view of a user with 4 project to create a timesheet for. Each row here is a form created by a loop based on the number of projects passed to a viewbag.

This is the code from my view that creates the forms

<tbody style="font-size: 13px;">
                        @{ 
                            int i = 0;

                            }
                        @while (i < ViewBag.projCount)
                        {
                            using (Ajax.BeginForm("BillableHours", "TimesheetManager",
                                new AjaxOptions
                                {
                                    OnSuccess = "OnSuccess",
                                    OnFailure = "OnFailure",
                                    LoadingElementId= "progress"
                                }, new { id= "Form-" + i}))
                            {
                            <tr>
                                <td>
                                    <!-- Hours code begins -->
                                    <div>
                                        @Html.TextBoxFor(p => p.B_Monday, new { @class = "form-control", type = "number", min = "0", id = "B_Monday-" + i.ToString(), max = "8", onChange = "totalMonday(); checkTotal();" })
                                    </div>
                                    <!-- hours code ends -->
                                </td>
                                <td>
                                    <!-- Hours code begins -->
                                    <div>
                                        @Html.TextBoxFor(p => p.B_Tuesday, new { @class = "form-control", type = "number", min = "0", id = "B_Tuesday-" + i.ToString(), max = "8", onChange = "totalTuesday(); checkTotal();" })
                                    </div>
                                    <!-- hours code ends -->
                                </td>
                                <td>
                                    <!-- Hours code begins -->
                                    <div>
                                        @Html.TextBoxFor(p => p.B_Wednesday, new { @class = "form-control", type = "number", min = "0", id = "B_Wednesday-" + i.ToString(), max = "8", onChange = "totalWednesday(); checkTotal();" })
                                    </div>
                                    <!-- hours code ends -->
                                </td>
                                <td>
                                    <!-- Hours code begins -->
                                    <div>
                                        @Html.TextBoxFor(p => p.B_Thursday, new { @class = "form-control", type = "number", min = "0", id = "B_Thursday-" + i.ToString(), max = "8", onChange = "totalThursday(); checkTotal();" })
                                    </div>
                                    <!-- hours code ends -->
                                </td>
                                <td>
                                    <!-- Hours code begins -->
                                    <div>
                                        @Html.TextBoxFor(p => p.B_Friday, new { @class = "form-control", type = "number", min = "0", id = "B_Friday-" + i.ToString(), max = "8", onChange = "totalFriday(); checkTotal();" })
                                    </div>
                                    <!-- hours code ends -->
                                </td>
                                <td>
                                    <!-- Hours code begins -->
                                    <div>
                                        @Html.TextBoxFor(p => p.B_Saturday, new { @class = "form-control", type = "number", min = "0", id = "B_Saturday-" + i.ToString(), max = "8", onChange = "totalSaturday(); checkTotal();" })
                                    </div>
                                    <!-- hours code ends -->
                                </td>
                                <td>
                                    <!-- Hours code begins -->
                                    <div>
                                        @Html.TextBoxFor(p => p.B_Sunday, new { @class = "form-control", type = "number", min = "0", id = "B_Sunday-" + i.ToString(), max = "8", onChange = "totalSunday(); checkTotal();" })
                                    </div>
                                    <!-- hours code ends -->
                                </td>
                                <td>
                                    <!-- project selection -->
                                    @Html.DropDownListFor(p => p.ProjectID, ViewBag.Projects as SelectList, "--select project--", new { @class = "form-control" })
                                    <!-- project selection ends -->
                                </td>
                                <td>
                                    <!-- comments -->
                                    <div>
                                        @Html.TextBoxFor(p => p.ResourceComments, new { @class = "form-control", placeholder = "Comments...", type = "text" })
                                    </div>

                                </td>
                            </tr>                            
                            }
                            i++;
                        }

                    </tbody>

Please, I need help on how to submit the form(s), considering the number of rows is different for each user

This is the ViewModel

 public class BillableHoursViewModel
{

    //billable hours

    public int ProjectID { get; set; }        
    public double B_Monday { get; set; }
    public double B_Tuesday { get; set; }
    public double B_Wednesday { get; set; }
    public double B_Thursday { get; set; }
    public double B_Friday { get; set; }
    public double B_Saturday { get; set; }
    public double B_Sunday { get; set; }
    public string ResourceComments { get; set; }
 }

Answer 1

To send multiple forms like this, you can add a hidden button in each form and the programmatically "click" on the button when you want all these forms to be sent.

The programmatical clicking can be done using $('.submitRow').click(), considering that you added a row in each form that contains a input of submit type with the submitRow class. Here is an example :

<tr>
    <td>
        <input type="submit" name="submit_@i" id="submit_@i" class="submitRow" style="display: none;" />
    </td>
</tr>

This will effectively send all of your forms, but it feels like you have a problem because all of the said forms use a single ViewModel object, so they will all have the same values when you load the page and only one of them will be saved (or you will get an error while saving). Either ways, this does not seem to be what you are trying to achieve.

You might need to re-think the way you send the data to the view. Your current ViewModel works well for sending the data from a form to the view, but you will need a list of them to display the rows sent from the controller.

Answer 2

You can use jQuery script:

$(".buton_to_submit_all_forms").one(function(){
    $(form).submit();
});

Button for this action set where you want in the page:

<button type="button" class="buton_to_submit_all_forms">Submit all</button>

In razor by default it`s very hard to do.