Solved

"Multi-level" HTML Form data

Posted on 2016-10-31
3
71 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 55

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: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering 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

Title # Comments Views Activity
Help in good tutorials for PHP, HTML and CSS 6 42
Angular won't showing my array result in HTML 3 28
Media Queries  not Firing 6 19
Problem to Office 1 16
Performance in games development is paramount: every microsecond counts to be able to do everything in less than 33ms (aiming at 16ms). C# foreach statement is one of the worst performance killers, and here I explain why.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
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…

828 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