Solved

"Multi-level" HTML Form data

Posted on 2016-10-31
3
88 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 57

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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

734 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