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; }
 }

Wouldn't it be easier to make a single form, pass all the rows in this form and sort them on the controller side ? — Mathieu VIALES, Sep 15 '17 at 13:19
In your current sample, won't all the fields of each rows have the same value ? What does your ViewModel look like ? — Mathieu VIALES, Sep 15 '17 at 13:23
Creating multiple forms makes no sense - you can only submit one form at at time. The model in your view needs to be `IList` and then have one form and generate the form controls using a `for` loop or an `EditorTemplate` - refer [Post an HTML Table to ADO.NET DataTable](http://stackoverflow.com/questions/30094047/html-table-to-ado-net-datatable/30094943#30094943) — , Sep 15 '17 at 23:44

score 0 · Answer 1 · answered Sep 15 '17 at 13:55

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.

They won't have the same values considering each row has a different project ID. But true, your solution won't produces an error — Caleb K.A, Sep 15 '17 at 15:19

score 0 · Answer 2 · answered Sep 15 '17 at 15:05

0

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.

answered Sep 15 '17 at 15:05

Manfice

149
7

Why use "one" here ? If he uses Ajax it means that the button might be clicked multiple times ... – Mathieu VIALES Sep 15 '17 at 15:11
Also, won't submitting the form actually send an classic HTTP POST request for the first found form and ignore the other forms since the page has been "redirected" ? I think that `.submit()` will not use the Ajax calls. At least not in the tests I did :-/ – Mathieu VIALES Sep 15 '17 at 15:15
1

plus, in `$(form)` the `form` var isn't declared. I believe you meant `$('form')` ? – Mathieu VIALES Sep 15 '17 at 15:16
Of couse you can use click (.on('click', function....) event. I don`t knew your idea. It`s simply prevent multiple request when user begins clicked button many times. – Manfice Sep 15 '17 at 15:18
sorry use ajaxSubmit – Manfice Sep 15 '17 at 15:20

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

2 Answers2