title: MVC 4 - null model when trying to post a collection of models
body: <p>I've looked on SO and there are similar questions but I am trying to post back a collection of models but when I press my submit button it complains that my model is null.</p>
  
  <p>I have this view in my application</p>
  
  <p><strong>View</strong></p>
  
  <pre><code>@model List&lt;Business.Models.Applications.ApplicantViewModel&gt;
  @using GridMvc.Html
  @using (Html.BeginForm("AllocateFirst", "Application", FormMethod.Post))
  {
  
      &lt;div id="grid-wrap" style="width: 500px;"&gt;
          Allocate Application
          &lt;div id="SystemMsg"&gt;
          &lt;/div&gt;
  
          @Html.Grid(Model).Named("FirstStageGrid").Columns(columns =&gt;
  {
      columns.Add(m =&gt; m.Id);
      columns.Add(m =&gt; m.MembershipNumber).Titled("Membership number");
      columns.Add(m =&gt; m.DateReceived).Titled("Registered date");
      columns.Add(m =&gt; m.Fullname).Titled("Name").Filterable(true).Encoded(false);
      columns.Add(m =&gt; m.ApplicationType).Encoded(false).Sanitized(false);
      columns.Add(m =&gt; m.AssignedStaffMem).Encoded(false).Sanitized(false).RenderValueAs(m =&gt;
  
          @&lt;b&gt;
              @Html.DropDownList("ddlStaff", new SelectList(Model.First().ListOfStaff, "UserId", "Fullname"))
          &lt;/b&gt;
      );
      columns
  .Add()
  .Encoded(false)
  .Titled("Action")
  .Sanitized(false)
  .SetWidth(30)
  .RenderValueAs(m =&gt;
  
    @&lt;b&gt; &lt;a href="#" onclick="AssignStaff(@m.Id, @Html.Raw("\"") @m.Fullname.Trim() @Html.Raw("\""), @m.Id)"&gt;
        Assign&lt;/a&gt; &lt;/b&gt;
  );
  }).WithPaging(5)
  
    &lt;br /&gt;
          Assign on bulk: @Html.CheckBox("AssignOnBulk")
          &lt;br /&gt;
          &lt;div id="bulkAssign"&gt;
  
              Assign to: @Html.DropDownList("ddlStaff", new SelectList(Model.First().ListOfStaff, "UserId", "Fullname"))
              @Html.Hidden("hdnStaffId")
              &lt;input type="submit" value="Submit all on bulk" /&gt;
          &lt;/div&gt;
  
  
      &lt;/div&gt;
      &lt;script&gt;
  
          $('#AssignOnBulk').on('change', function () {
              if ($(this).is(':checked')) {
                  $("#bulkAssign").show();
                  var staffId = $('#ddlStaff').val(); //no :selected here
  
              }
              else {
                  $("#bulkAssign").hide();
                  $("hdnStaffId").val(this);
                  var staffId = $('#ddlStaff').val(); //no :selected here
              }
          });
  
          $('#ddlStaff').change(function () {
              var staffId = $('#ddlStaff').val(); //no :selected here
          });
  
          $(document).ready(function () {
              if ($(AssignOnBulk).is(':checked'))
                  $("#bulkAssign").show();
              else
                  $("#bulkAssign").hide();
          });
  
  
          function AssignStaff(appId, fullName) {
              //Get row based on Id of grid
              var tableRow = $("td").filter(function () {
                  return $(this).text() == appId;
              }).closest("tr");
  
              // get staffId based on option selected in tr
              var staffId = $(tableRow).find('option:selected').val();
  
              $.ajax({
                  type: "GET",
                  url: '/Application/SetFirstCheck',
                  dataType: 'html',
                  data: { "staffId": staffId, "appId": appId },
                  success: function (success) {
                      $('#SystemMsg').html(success);
                      $(tableRow).remove();
                  }
              });
          }
      &lt;/script&gt;
  
  }
  </code></pre>
  
  <p>What I am trying to do is if the user checks this checkbox </p>
  
  <pre><code>Assign on bulk: @Html.CheckBox("AssignOnBulk")
  </code></pre>
  
  <p>The div with the button is shown with a dropdown menu and the user can decide to assign one person to all the people in the grid, instead of using the actionlink.</p>
  
  <p>What I want to do is press the post button and it posts back the collection plus the staffId from the dropdown menu. But when I press post, VS2012 highlights my grid and says the model is null.</p>
  
  <p><strong>Controller method</strong></p>
  
  <pre><code> [HttpPost]
          public ActionResult AllocateFirst(List&lt;Business.Models.Applications.ApplicantViewModel&gt; Model, bool AssignOnBulk, string ddlStaff)
          {
  
              return View(Model);
          }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/EsGVl.png" alt="enter image description here"></p>
  
  <p>I've attached a screenshot of what happens when I click the post, it highlights my entire grid.</p>