"Multi-level" HTML Form data

I've got these Models:
   
public class FinalWebinarAttendeesList
{
    public List<FinalWebinar> Webinars {get; set; }
}
public class FinalWebinar
{
    public int ParticipantID { get; set; }
    public string FullName { get; set; }
    public int AffidavitReceived { get; set; }
    public List<FinalWebinarAttendee> Attendances { get; set; }

}
public class FinalWebinarAttendee
{
    public string webinarTitle { get; set; }
    public string webinarKey { get; set; }
    public string RegistrantKey { get; set; }
    public string TimeInSession { get; set; }
    public int FirstPollCount { get; set; }
    public int SecondPollCount { get; set; }
    public int AttendedWebinar { get; set; }

}

Open in new window

Now, I want to put this data into an HTML form for viewing and allow the user to set a single "flag" (will be checkbox) for the AffidavitReceived value.

The template I'm create is an accordion in a panel group with each Attendance in a table shown in the HTML below. Now, how would I build the data points in the table to be processed in the form and how would I process the form in my action? I am not sure I'm building the fields correctly in this form and certainly know that it doesn't get posted correctly.
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="">
        <title>Webinar Attendance and Grading</title>
        <!-- Bootstrap Core CSS -->
        <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <!-- jQuery -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
            <script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="//oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
        <style type="text/css">
            .panel-group .panel-heading a.collapsed {
                background: #ddd;
                border-radius: 4px;
                color: inherit;
            }
    
            .panel-group .panel-heading a {
                display: block;
                background: #668bb1;
                border-radius: 4px;
                color: #ffffff;
                padding: 15px;
                text-decoration: none;
                position: relative;
            }
    
            .panel-group .panel-heading .q {
                display: block;
                border-radius: 4px;
                background: #f0ad4e;
                color: #ffffff;
                padding: 15px;
                text-decoration: none;
                position: relative;
            }
            .affrcvd_chk {
                float:right;
                margin-right: 20px;
            }
        </style>
    </head>
    <body>
        <div id="wrapper">
            <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
                <div class="navbar-header">
                    <a class="navbar-brand" href="index.html">Webinar Attendance and Grading</a>
                </div>
            </nav><!-- nav -->
            <div id="page-wrapper">
                <div class="row">
                    <div class="col-lg-12">
                        <h1 class="page-header">Finalize Webinar</h1>
                    </div><!-- /.col-lg-12 -->
                </div><!-- /.row -->
                <div class="row">
                    <div class="col-lg-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <i class="fa fa-list fa-fw"></i>Enter WebinarCode and Click the Fetch Button to load the Webinar Attendees list for that WebinarCode, confirm the data then click the Finalize Button.
                            </div><!-- /.panel-heading -->
                            <div class="panel-body">
                                <div class="row">
                                    <div class="col-lg-4">&nbsp;</div>
                                    <div class="col-lg-1">Webinar Code:</div>
                                    <div class="col-lg-4"><input type="text" name="WebinarCode" id="txtWebinarCode" />&nbsp;&nbsp;<button class="btn btn-primary btn-sm" id="fetchBtn">Fetch</button></div>
                                    <div class="col-lg-2">&nbsp;</div>
                                </div>
                                <div class="row">&nbsp;</div>
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="panel panel-default">
                                            <div class="panel-heading">
                                                <i class="fa fa-users fa-fw"></i>Finalize Webinars
                                            </div><!-- /.panel-heading -->
                                            <div class="panel-body">
                                                <div class="row">
                                                    <form name="FinalizeWebinar" id="finalize-webinar-form" method="post" action="/Home/StoreFinalized">
                                                        <div class="col-lg-12" id="attendeesTable">
                                                            <div class="panel-group" id="accordion">
                                                                <div class="panel panel-default">
                                                                    <div class="panel-heading">
                                                                        <h4 class="panel-title pull-left" style="width:90%">
                                                                            <a class="" data-toggle="collapse" data-parent="#accordion" href="#collapse0" aria-expanded="true">909428<br>Katie Perry</a>
                                                                        </h4>
                                                                        <div class="pull-right" style="width:10%;">
                                                                            <span class="affrcvd_chk">Affidavit Received?<br>
                                                                                <input id="affrcvd_chk_box" type="checkbox" name="[0].AffidavitRecvd">
                                                                            </span>
                                                                        </div>
                                                                        <div class="clearfix"></div>
                                                                    </div> <!--/.panel-heading -->
                                                                    <div id="collapse0" class="panel-collapse collapse in" aria-expanded="true">
                                                                        <div class="panel-body">
                                                                            <div>
                                                                                <input type="hidden" name="[0].FullName" value="Katie Perry">
                                                                                <div class="table-responsive">
                                                                                    <table class="table table-bordered table-hover table-striped" id="attendee0Table">
                                                                                        <thead>
                                                                                            <tr>
                                                                                                <th>Webinar</th>
                                                                                                <th>Time In Session</th>
                                                                                                <th>First Poll Count</th>
                                                                                                <th>Second Poll Count</th>
                                                                                                <th>Attended</th>
                                                                                            </tr>
                                                                                        </thead>
                                                                                        <tbody>
                                                                                            <tr class="">
                                                                                                <input type="hidden" name="[0].Attendances[0].RegistrantKey" value="6629935645682877452">
                                                                                                <input type="hidden" name="[0].Attendances[0].webinarKey" value="5551459873814116097">
                                                                                                <td>Webinar 1: Wednesday</td>
                                                                                                <td><input type="hidden" name="[0].Attendances[0].TimeInSession" value="2 hrs 27 mins">2 hrs 27 mins</td>
                                                                                                <td><input type="hidden" name="[0].Attendances[0].FirstPollCount" value="4">4</td>
                                                                                                <td><input type="hidden" name="[0].Attendances[0].SecondPollCount" value="4">4</td>
                                                                                                <td><input type="hidden" name="[0].Attendances[0].AttendedWebinar" value="YES">YES</td>
                                                                                            </tr>
                                                                                            <tr class="">
                                                                                                <input type="hidden" name="[0].Attendances[1].RegistrantKey" value="4033024420806207757">
                                                                                                <input type="hidden" name="[0].Attendances[1].webinarKey" value="1711808039457813249">
                                                                                                <td>Webinar 1: Thursday</td>
                                                                                                <td><input type="hidden" name="[0].Attendances[1].TimeInSession" value="2 hrs 4 mins">2 hrs 4 mins</td>
                                                                                                <td><input type="hidden" name="[0].Attendances[1].FirstPollCount" value="4">4</td>
                                                                                                <td><input type="hidden" name="[0].Attendances[1].SecondPollCount" value="4">4</td>
                                                                                                <td><input type="hidden" name="[0].Attendances[1].AttendedWebinar" value="YES">YES</td>
                                                                                            </tr>
                                                                                        </tbody>
                                                                                    </table>
                                                                                </div> <!-- /.table-responsive -->
                                                                            </div>
                                                                        </div> <!--/.panel-body -->
                                                                    </div> <!--/.panel-collapse -->
                                                                </div><!-- /.panel -->
                                                            </div> <!-- /.panel-group -->
                                                            <div class="panel-group" id="accordion">
                                                                <div class="panel panel-default">
                                                                    <div class="panel-heading">
                                                                        <h4 class="panel-title pull-left" style="width:90%">
                                                                            <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse1">914251<br>Taylor Swift</a>
                                                                        </h4>
                                                                        <div class="pull-right" style="width:10%;">
                                                                            <span class="affrcvd_chk">Affidavit Received?<br>
                                                                                <input id="affrcvd_chk_box" type="checkbox" name="[1].AffidavitRecvd">
                                                                            </span>
                                                                        </div>
                                                                        <div class="clearfix"></div>
                                                                    </div> <!--/.panel-heading -->
                                                                    <div id="collapse1" class="panel-collapse collapse">
                                                                        <div class="panel-body">
                                                                            <div>
                                                                                <input type="hidden" name="[1].FullName" value="Taylor Swift">
                                                                                <div class="table-responsive">
                                                                                    <table class="table table-bordered table-hover table-striped" id="attendee1Table">
                                                                                        <thead>
                                                                                            <tr>
                                                                                                <th>Webinar</th>
                                                                                                <th>Time In Session</th>
                                                                                                <th>First Poll Count</th>
                                                                                                <th>Second Poll Count</th>
                                                                                                <th>Attended</th>
                                                                                            </tr>
                                                                                        </thead>
                                                                                        <tbody>
                                                                                            <tr class="">
                                                                                                <input type="hidden" name="[1][0].RegistrantKey" value="202236849192755211">
                                                                                                <input type="hidden" name="[1][0].webinarKey" value="5551459873814116097">
                                                                                                <td>Webinar 1: Wednesday</td>
                                                                                                <td><input type="hidden" name="[1][0].TimeInSession" value="2 hrs 37 mins">2 hrs 37 mins</td>
                                                                                                <td><input type="hidden" name="[1][0].FirstPollCount" value="4">4</td>
                                                                                                <td><input type="hidden" name="[1][0].SecondPollCount" value="4">4</td>
                                                                                                <td><input type="hidden" name="[1][0].AttendedWebinar" value="YES">YES</td>
                                                                                            </tr>
                                                                                            <tr class="">
                                                                                                <input type="hidden" name="[1][1].RegistrantKey" value="1787578684817884171">
                                                                                                <input type="hidden" name="[1][1].webinarKey" value="1711808039457813249">
                                                                                                <td>Webinar 1: Thursday</td>
                                                                                                <td><input type="hidden" name="[1][1].TimeInSession" value="2 hrs 11 mins">2 hrs 11 mins</td>
                                                                                                <td><input type="hidden" name="[1][1].FirstPollCount" value="4">4</td>
                                                                                                <td><input type="hidden" name="[1][1].SecondPollCount" value="4">4</td>
                                                                                                <td><input type="hidden" name="[1][1].AttendedWebinar" value="YES">YES</td>
                                                                                            </tr>
                                                                                        </tbody>
                                                                                    </table>
                                                                                </div><!-- /.table-responsive -->
                                                                            </div>  
                                                                        </div><!--/.panel-body -->
                                                                    </div><!--/.panel-collapse -->
                                                                </div><!-- /.panel -->
                                                            </div><!-- /.panel-group -->
                                                        </div> <!-- /.col-lg-12 -->
                                                    </form>
                                                </div><!-- /.row -->
                                            </div><!-- /.panel-body -->
                                        </div><!-- /.panel -->
                                    </div><!-- /.col-lg-12 -->
                                </div><!-- /.row -->
                                <div class="row">
                                    <div class="col-lg-12 text-center"><button type='submit' class='btn btn-primary btn-lg' id="finalize-webinar">Finalize</button></div>                    
                                </div><!-- /.row -->
                            </div><!-- /.panel-body -->
                        </div><!-- /.panel -->
                    </div><!-- /.col-lg-12 -->
                </div><!-- /.row -->
                <script type="text/javascript">
                    $(document).ready(function () {
                        // This keeps the accordion from opening/clocing then clicking the checkbox
                        $("#affrcvd_chk_box").on("click", function (event) {
                            event.stopPropagation();
                        });
                        // This button fetches the Attendees for the entered Webinar
                        $("#fetchBtn").bind("click", function () {
                            $url = "/Home/LoadWebinarAttendeesList?WebinarCode=" + $("#txtWebinarCode").val();
                            $.ajax({
                                async: true,
                                type: "GET",
                                url: $url,
                                dataType: "html",
                                success: function (data) {
                                    $("#attendeesTable").html(data);
                                    $("#upload-form").show();
                                }
                            });
                        })
                        // This button Sends the data to the handler
                        $("#finalize-webinar").bind("click", function () {
                            $("#finalize-webinar-form").submit();
                        })
                    });
                </script>
            </div><!-- /#page-wrapper -->
        </div><!-- /#wrapper -->
        <!-- Bootstrap Core JavaScript -->
        <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </body>
</html>

Open in new window

LVL 26
Eddie ShipmanAll-around developerAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
Eddie ShipmanConnect With a Mentor All-around developerAuthor Commented:
Actually, Julian, I have figured out a different way of doing this.
0
 
Julian HansenCommented:
I see the form but I am having difficulty following the requirement of the question?

Can you re-explain.
0
 
Eddie ShipmanAll-around developerAuthor Commented:
Closing due to change in requirements
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.