"Multi-level" HTML Form data
I've got these Models:
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.
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; }
}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"> </div>
<div class="col-lg-1">Webinar Code:</div>
<div class="col-lg-4"><input type="text" name="WebinarCode" id="txtWebinarCode" /> <button class="btn btn-primary btn-sm" id="fetchBtn">Fetch</button></div>
<div class="col-lg-2"> </div>
</div>
<div class="row"> </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>ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Closing due to change in requirements
Can you re-explain.