ASP.Net MVC Posting Form

Question

I've got these Models:

public class FinalizedWebinarAttendeesList
{
    public List<FinalizedWebinar> Webinars { get; set; }
}
public class FinalizedWebinar
{
    public int ParticipantID { get; set; }
    public bool AffidavitRecvd { get; set; }
}

Now, I want to put this data into an HTML form for viewing and allow the user to set a checkbox for the AffidavitRecvd value and the ParticipantID for each attendee.

The form I have is an accordion in a panel group with each Attendance in a table shown in the HTML below.

<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>
                            <input type="hidden" name="[909428].ParticipantID" value="909428">
                        </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="">
                                                <td>Webinar 1: Wednesday</td>
                                                <td>2 hrs 27 mins</td>
                                                <td>4</td>
                                                <td>4</td>
                                                <td>YES</td>
                                            </tr>
                                            <tr class="">
                                                <td>Webinar 1: Thursday</td>
                                                <td>2 hrs 4 mins</td>
                                                <td>4</td>
                                                <td>4</td>
                                                <td>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>
                            <input type="hidden" name="[914251].ParticipantID" value="914251">
                        </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="">
                                                <td>Webinar 1: Wednesday</td>
                                                <td>2 hrs 37 mins</td>
                                                <td>4</td>
                                                <td>4</td>
                                                <td>YES</td>
                                            </tr>
                                            <tr class="">
                                                <td>Webinar 1: Thursday</td>
                                                <td>2 hrs 11 mins</td>
                                                <td>4</td>
                                                <td>4</td>
                                                <td>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 -->

This is the definition for the function in the form's action:

public ActionResult StoreFinalized(List<FinalizedWebinar> attendees)

But when I post, the attendees parameter is null and this is what is sent in the postdata:

[909428].ParticipantID:909428
[909428].AffidavitRecvd:on
[914251].ParticipantID:914251
[914251].AffidavitRecvd:on

I've also tried this definition:

public ActionResult StoreFinalized(FinalizedWebinarAttendeesList attendees)

and the attendees.Webinars is null.

What am I doing wrong here?

Answer 1

Your view:

@using (Html.BeginForm("Index"))
{
<input type="text" name="Webinars[0].ParticipantID" value="1" />
<input type="text" name="Webinars[0].AffidavitRecvd" value="11" />

<input type="text" name="Webinars[1].ParticipantID" value="2" />
<input type="text" name="Webinars[1].AffidavitRecvd" value="22" />

<input type="submit" value="submit" />
}

Your controller:

[HttpPost]
public ActionResult Index(FinalizedWebinarAttendeesList form)
{
    return View();
}

use the same viewmodel that you have described.