title: html.beginForm post null value for List<strongly typed> to controller via jQuery Ajax function in ASP>NET-MVC5
body: <p>I have ASP.net-mvc5 website. I need to allow user update/ edit two emergency contact details. To achieve that I am sending "list myModel" to razor view and in view I got two @html.beginform. I have List because I know I always have two record. I am printing value from list via index 0 for record 1 and 1 for record 2. Jquery Ajax function used to post data back to controller.</p>
  
  <p>Now form 1 for  emergency contact detail 1 is working fine but form 2 for 2nd emergency contact detail posting null values to controller. I have commet form1 and tried to submit form2 but still null values. I am not sure why this happening.</p>
  
  <h2>Controller</h2>
  
  <pre><code>  [Authorize]
      [HttpGet]
      public ActionResult EditEmergencyContact()
      {
  
          int _studentEntityID = 0;
  
          _studentEntityID = _studentProfileServices.GetStudentIDByIdentityUserID(User.Identity.GetUserId());
  
          List&lt;EmergencyContact&gt; _emergencyContactModel = new List&lt;EmergencyContact&gt;();
  
          _emergencyContactModel = _studentProfileServices.GetEmergencyContactByStudentID(_studentEntityID);
  
          return PartialView("EditEmergencyContact_Partial", _emergencyContactModel);
  
      }
  
      [Authorize]
      [HttpPost]
      public ActionResult EditEmergencyContact(List&lt;EmergencyContact&gt; _emergencyContactModel)
      {
         try
          {
              if (_emergencyContactModel!=null &amp;&amp; _emergencyContactModel.Count()&gt;0)
              {
                  if (ModelState.IsValid)
                  {
  
  
                      int _entityID = _studentProfileServices.EditEmergencyContactByStudentID(
                          new EmergencyContact
                          {
                              EmergencyContactID = _emergencyContactModel[0].EmergencyContactID,
                              StudentID = _emergencyContactModel[0].StudentID,
                              NameOfContact = _emergencyContactModel[0].NameOfContact,
                              Relationship = _emergencyContactModel[0].Relationship,
                              Telephone = _emergencyContactModel[0].Telephone,
                              Mobile = _emergencyContactModel[0].Mobile,
                              Address = _emergencyContactModel[0].Address
                          });
  
                      if (_entityID != 0)
                      {
                          return Json(new { Response = "Success" });
                      }
                      else
                      {
                          return Json(new { Response = "Error" });
                      }
                  }
                  else
                  {
                      return Json(new { Response = "Invalid Entry" });
                  }
              }
              else
              {
                    return Json(new { Response = "Error! In Updating Record" });
              }
          }
          catch (DataException ex)
          {
              ModelState.AddModelError("", "Unable To Edit Emergency Contact" + ex);
          }
  
          return RedirectToAction("MyProfile", "StudentProfile");
      }
  </code></pre>
  
  <h2>View</h2>
  
  <pre><code>@using (Html.BeginForm("EditEmergencyContact", "StudentProfile", FormMethod.Post, new { id = "EditNo2EmergencyContactForm" }))
  {
    @Html.AntiForgeryToken()
  
  &lt;div class="form-horizontal"&gt;
      &lt;h4&gt;Emergency Contact 2&lt;/h4&gt;
      &lt;hr /&gt;
      @Html.ValidationSummary(true, "", new { @class = "text-danger" })
      @Html.HiddenFor(model =&gt; model[1].EmergencyContactID)
  
      &lt;div class="form-group"&gt;
          @Html.LabelFor(model =&gt; model[1].StudentID, "StudentID", htmlAttributes: new { @class = "control-label col-md-2" })
          &lt;div class="col-md-10"&gt;
              @Html.EditorFor(model =&gt; model[1].StudentID, new { htmlAttributes = new { @class = "form-control" } })
              @Html.ValidationMessageFor(model =&gt; model[1].StudentID, "", new { @class = "text-danger" })
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group"&gt;
          @Html.LabelFor(model =&gt; model[1].NameOfContact, htmlAttributes: new { @class = "control-label col-md-2" })
          &lt;div class="col-md-10"&gt;
              @Html.EditorFor(model =&gt; model[1].NameOfContact, new { htmlAttributes = new { @class = "form-control" } })
              @Html.ValidationMessageFor(model =&gt; model[1].NameOfContact, "", new { @class = "text-danger" })
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group"&gt;
          @Html.LabelFor(model =&gt; model[1].Relationship, htmlAttributes: new { @class = "control-label col-md-2" })
          &lt;div class="col-md-10"&gt;
              @Html.EditorFor(model =&gt; model[1].Relationship, new { htmlAttributes = new { @class = "form-control" } })
              @Html.ValidationMessageFor(model =&gt; model[1].Relationship, "", new { @class = "text-danger" })
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group"&gt;
          @Html.LabelFor(model =&gt; model[1].Telephone, htmlAttributes: new { @class = "control-label col-md-2" })
          &lt;div class="col-md-10"&gt;
              @Html.EditorFor(model =&gt; model[1].Telephone, new { htmlAttributes = new { @class = "form-control" } })
              @Html.ValidationMessageFor(model =&gt; model[1].Telephone, "", new { @class = "text-danger" })
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group"&gt;
          @Html.LabelFor(model =&gt; model[1].Mobile, htmlAttributes: new { @class = "control-label col-md-2" })
          &lt;div class="col-md-10"&gt;
              @Html.EditorFor(model =&gt; model[1].Mobile, new { htmlAttributes = new { @class = "form-control" } })
              @Html.ValidationMessageFor(model =&gt; model[1].Mobile, "", new { @class = "text-danger" })
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group"&gt;
          @Html.LabelFor(model =&gt; model[1].Address, htmlAttributes: new { @class = "control-label col-md-2" })
          &lt;div class="col-md-10"&gt;
              @Html.EditorFor(model =&gt; model[1].Address, new { htmlAttributes = new { @class = "form-control" } })
              @Html.ValidationMessageFor(model =&gt; model[1].Address, "", new { @class = "text-danger" })
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group"&gt;
          &lt;div class="col-md-offset-2 col-md-10"&gt;
              &lt;input type="submit" value="Save" class="btn btn-default" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
   &lt;/div&gt;
  }
  </code></pre>
  
  <h2>Jquery Function</h2>
  
  <pre><code> $('#EditNo2EmergencyContactForm').submit(function (e) {
  
      e.preventDefault();
  
      var formURL = $(this).attr("action");
  
      alert($(this).serialize());
  
      $.ajax({
          url: formURL,
          type: "POST",
          data: $(this).serialize()
      }).done(function (data, textStatus, jqXHR) {
  
          if (data.Response == "Success") {
  
              $(this).MyMessageDialog({
                  _messageBlockID: "_StatusMessage",
                  _messageContent: "Record Been Updated Successfully",
                  _messageBlockWidth: "300px"
              });
  
              $('div#_StatusMessage').on('dialogclose', function (event) {
                  window.location = "/StudentProfile/MyProfile";
              });
          }
          else {
  
              $(this).MyMessageDialog({
                  _messageBlockID: "_StatusMessage",
                  _messageContent: "&lt;div class='errorMessage'&gt;" + data.Response + "&lt;/div&gt;",
                  _messageBlockWidth: "300px"
              });
          }
      }).fail(function (jqXHR, textStatus, errorThrown) {
          $(this).MyMessageDialog({
              _messageBlockID: "_StatusMessage",
              _messageContent: "&lt;div class='errorMessage'&gt; Error In Updating Record! " + textStatus + "  " + errorThrown + "  "+jqXHR.status +"&lt;/div&gt;",
              _messageBlockWidth: "350px"
          });
  
          $('div#_StatusMessage').on('dialogclose', function (event) {
              window.location = "/StudentProfile/MyProfile";
          });
      });
  });
  </code></pre>
  
  <h2>For Form 1: this one works</h2>
  
  <pre><code> @using (Html.BeginForm("EditEmergencyContact", "StudentProfile", FormMethod.Post, new { id = "EditNo1EmergencyContactForm" }))
  </code></pre>
  
  <p>..............</p>
  
  <pre><code> $('#EditNo1EmergencyContactForm').submit(function (e) {
  </code></pre>