Solved

"Multi-level" HTML Form data

Posted on 2016-10-31
3
100 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 58

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: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

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

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

622 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