Can I prevent dataTables from destroying the form for each table row?

Hiebs915

Hello friends,

I am working on a .NET razor page. It contains a table of data where each row represents a form. I didn't build the page but was asked to implement sorting on the page. My first thought was, "dataTables!". However, I'm running into some trouble. I can successfully get dataTables to run and apply sorting to the page but dataTables is destroying the forms that are connected to each row. If I block the dataTables request in the browser you can see all of the form tags (see screenshot #1). Once I allow dataTables to run, the form tags are removed (see screenshot #2). I haven't used dataTables in a situation with forms yet. Is there anything I can do to tell dataTables to work around these forms and not remove them? The code for the page is below as well. I removed most of the code outside of the table tag but can post all of it if need be. Thank you!

Before dataTables is used;
Before

After dataTables is used:
After

@section Scripts{
    <script src="~/js/lea-school-drop-downs.js" type="text/javascript" asp-append-version="true"></script>
    <script src="~/js/student-roster-scripts.js" type="text/javascript" asp-append-version="true"></script>
    <script src="~/js/dataTables-initialization.js" type="text/javascript" asp-append-version="true"></script>
}

<input type="hidden" id="GetRemoveStudentFromClassroomUrl" value="@Url.Action("RemoveStudentFromClassroom", "Home")" />
<input type="hidden" id="GetSchoolsUrl" value="@Url.Action("GetSchools", "Home")" />
<input type="hidden" id="GetTeachersUrl" value="@Url.Action("GetTeachers", "Home")" />
<input type="hidden" id="GetClassroomsUrl" value="@Url.Action("GetClasses", "Home")" />
<input type="hidden" id="StudentRosterUrl" value="@Url.Action("StudentRoster", "Home")"/>

                    <table id="assessments_table" class="table table-condensed table-hover table-bordered make-datatable">
                        <thead>
                            <tr>
                                @if ((await AuthorizationService.AuthorizeAsync(User, PeepAuthorizationPolicies.ClassroomStudentModification)).Succeeded)
                                {
                                    <th>&nbsp;</th>
                                }

                                <th>Name</th>
                                <th class="text-center">SSID</th>
                                <th class="text-center">Literacy<br /><small>points</small></th>
                                <th class="text-center">Numeracy<br /><small>points</small></th>
                                <th class="text-center">Lifelong Learning<br /><small>points</small></th>
                                <th class="text-center">Recorded Date</th>
                                <th></th>
                                <th>Accommodation</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach (var student in Model.Students)
                            {
                                using (Html.BeginForm("DataEntryAssessment", "Assessment", FormMethod.Get))
                                {
                                    <tr>
                                        @if ((await AuthorizationService.AuthorizeAsync(User, PeepAuthorizationPolicies.ClassroomStudentModification)).Succeeded)
                                        {
                                            <td>
                                                <button type="button" class="btn btn-danger" data-button-type="remove" data-student-id="@student.Ssid" data-classroom-id="@Model.SelectedClassroom">Remove</button>
                                            </td>
                                        }
                                        <td>@student.LastName, @student.FirstName</td>
                                        <td>
                                            @student.Ssid
                                            <input type="hidden" value="@student.Ssid" name="ssid" />
                                            <input type="hidden" value="@Model.AssessmentCode" name="AssessmentType" />
                                            <input type="hidden" value="@Model.LeaNumber" name="leaNumber" />
                                            <input type="hidden" value="@Model.SchoolNumber" name="schoolNumber" />
                                            <input type="hidden" value="@Model.SelectedClassroom" name="classroomId" />

                                        </td>
                                        @if (student.StudentAssessment == null)
                                        {
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td>
                                                <input type="submit" value="Not Started" class="btn btn-link" />
                                                <input type="hidden" name="AssessmentState" value="@AssessmentStateEnum.NotStarted" />
                                            </td>
                                            <td>
                                                <input name="isAccommodated" type="checkbox" @notOpen value="true" />
                                            </td>

                                        }
                                        else
                                        {
                                            var acommodationChecked = ((student.StudentAssessment?.IsAccommodated ?? false) ? "checked" : string.Empty);
                                            <td class="text-center">@student.StudentAssessment.LiteracyScore / @student.StudentAssessment.TotalLiteracyPointsPossible</td>
                                            <td class="text-center">@student.StudentAssessment.NumeracyScore / @student.StudentAssessment.TotalNumeracyPointsPossible</td>
                                            <td class="text-center">@student.StudentAssessment.LifelongLearningScore / @student.StudentAssessment.TotalLifelongLearningPointsPossible</td>
                                            if (student.StudentAssessment.LastEditedDate.HasValue)
                                            {
                                                <td class="text-center">@student.StudentAssessment.LastEditedDate.Value.ToShortDateString()</td>
                                            }
                                            else
                                            {
                                                <td class="text-center">@student.StudentAssessment.CreatedDate.ToShortDateString()</td>
                                            }
                                            if (student.StudentAssessment.AssessmentStateId == 2)
                                            {
                                                <td>
                                                    <input type="submit" value="In Progress" class="btn btn-link" />
                                                    <input type="hidden" name="AssessmentState" value="@AssessmentStateEnum.Incomplete" />
                                                </td>
                                                <td>
                                                    <input style="display: none;" name="isAccommodated" type="checkbox" @acommodationChecked value="true" />
                                                    <input name="isAccommodated" type="checkbox" @acommodationChecked disabled value="true" />
                                                </td>
                                            }
                                            else
                                            {
                                                <td style="text-align:center">
                                                    <input type="submit" value="View" class="btn btn-link" />
                                                    <input type="hidden" name="AssessmentState" value="@AssessmentStateEnum.Completed" />
                                                    @if (Model.AssessmentCode == AssessmentTypeEnum.Entry || Model.AssessmentCode == AssessmentTypeEnum.Exit)
                                                    {
                                                        @Html.ActionLink("Student Report", "IndividualStudentReport", "Report", new { ssId = student.Ssid, type = Model.AssessmentCode })
                                                    }
                                                </td>
                                                <td>
                                                    <input style="display: none;" name="isAccommodated" type="checkbox" @acommodationChecked value="true" />
                                                    <input name="isAccommodated" type="checkbox" @acommodationChecked disabled value="true" />
                                                </td>
                                            }
                                        }
                                    </tr>
                                }
                            }
                        </tbody>
                    </table>

allan

A form as a child of a tr is not valid HTML. You can check it with the W3C validator.

DataTables will only operate with valid HTML.

I'm honestly not sure how you'd get this working with valid HTML. You want a different form for every row. If you could do it with Ajax then Javascript can be used and just gather up the variables together. But like this? I'm honestly not sure! You might be best asking on Stackoverflow or similar on how to create a valid document for such a case.

Allan

Hiebs915

Ok. Thanks Allen! Might have to re-work some of the C# here...

Hiebs915

Allen, unrelated question... How did you make those fancy markdown tags for form|tag?

kthorngren

See the Markdown technote. Basically `-tag x`.

Kevin