Solved

"Multi-level" HTML Form data

Posted on 2016-10-31
3
61 Views
Last Modified: 2016-11-07
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

0
Comment
Question by:EddieShipman
  • 2
3 Comments
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 41869726
I see the form but I am having difficulty following the requirement of the question?

Can you re-explain.
0
 
LVL 26

Accepted Solution

by:
EddieShipman earned 0 total points
ID: 41870788
Actually, Julian, I have figured out a different way of doing this.
0
 
LVL 26

Author Closing Comment

by:EddieShipman
ID: 41876879
Closing due to change in requirements
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question