Отправить форму, содержащую входные данные и список <Model> из представления в действие с помощью jquery

Question

В настоящее время я создаю мобильный сайт для iPad с помощью jquery mobile и ASP.NET MVC 4. У меня есть две формы в представлении - назовем их FormA и FormB. Каждая форма имеет пользовательские входы и отдельные отправления. Когда FormA отправляется, я хотел бы также отправить FormB. (Тем не менее, обратное не так - когда FormB представляется пользователем, FormA не должен представить - именно поэтому они разделены.)

Обе формы используют модель, которая выглядит (в части), как это:

public class MyModel 
{ 
    [Display(Name = "ID Number:")] 
    public string idNumber { get; set; } 

    [Display(Name = "First Name:")] 
    public string fName { get; set; } 

    [Display(Name = "Equipment List:")] 
    public IEnumerable<EquipmentModel> listOfEquipment { get; set; } 

} 

public class EquipmentModel 
{ 
    [Display(Name = "Equipment ID:")] 
    public string EquipID { get; set; } 

    [Display(Name = "Equipment Type:")] 
    public string EquipType { get; set; } 

    [Display(Name = "Equipment Description:")] 
    public string EquipDesc { get; set; } 

    [Display(Name = "Equipment Usage Hours: ")] 
    public string EquipUsageHours { get; set; } 

    [Display(Name = "Added By:")] 
    public string EquipAddedBy { get; set; } 

    [Display(Name = "Add Date:")] 
    public string EquipAddDate { get; set; } 

    [Display(Name = "Costkey:")] 
    public string EquipCostKey { get; set; } 

} 

FormB выглядит следующим образом (в основном показывает список оборудования и связанных с ними часов использования для каждой части оборудования пользователя разрешено корректировать часы для каждой единицы оборудования путем перемещения ползунка.):

 @using (Html.BeginForm("ActionBName", "ControllerName", FormMethod.Post, new { id = "FormB" })) 
     { 
      @Html.ValidationSummary(true) 
      <input type="hidden" name="idNumber" value="@Model.idNumber"> 
      <input type="hidden" name="fName" value="@Model.fName"> 

      if (Model.listOfEquipment != null) 
      { 
       int i = 0; 
       foreach (var liEquipModel in Model.listOfEquipment) 
       { 
        <input type="hidden" name="[@i].EquipID" value="@liEquipModel.EquipID"> 
        <input type="hidden" name="[@i].EquipType" value="@liEquipModel.EquipType"> 
        <input type="hidden" name="[@i].EquipDesc" value="@liEquipModel.EquipDesc"> 
        <input type="hidden" name="[@i].EquipAddedBy" value="@liEquipModel.EquipAddedBy"> 
        <input type="hidden" name="[@i].EquipAddDate" value="@liEquipModel.EquipAddDate"> 
        <input type="hidden" name="[@i].EquipCostKey" value="@liEquipModel.EquipCostKey"> 
        DateTime eqAddDateTime = Convert.ToDateTime(liEquipModel.EquipAddDate); 
        string eqAddDate = eqAddDateTime.ToString("d"); 
        string eqAddTime = eqAddDateTime.ToString("t"); 
        <ul data-role="listview" data-inset="true" data-theme="c" style="margin-top:5px;"> 
         <li data-role="list-divider"> 
          @woEquipModel.EquipDesc 
          <span style="float:right;"> 
           Equipment ID:&nbsp; <span>@liEquipModel.EquipID</span> 
          </span> 
         </li>  
         <li> 
          <span style="font-size: 12px; font-weight:bold; color:#474747;"> 


           <span style="color:#29537E;">Hours:&nbsp;</span> 
          </span> 
          <span class="ui-li-aside" style="float:right; width:92%; text-align:left; margin-top:-14px;"> 
           <span style="font-size: 14px; font-weight:bold; color:#474747;"> 
            <input type="range" 
             data-theme="c" 
             name="[@i].EquipUsageHours" 
             id="slider-1" 
             style="font-size: 12px; color:#474747; margin-top:0px;" 
             value="@liEquipModel.EquipUsageHours" min="0" max="16" step=".25" 
             data-highlight="true" 
            /> 
           </span> 
          </span> 
         </li> 
        </ul> 
        i += 1; 
       } 
       <div class="ui-grid-solo"> 
        <div class="ui-block-a" style="float:right; width:30%;"> 
         <input id="btnSaveEquipHours2" data-mini="true" data-theme="b" type="submit" value="Save Hours" /> 
        </div> 
       </div> 
      } 
     } 

Действие, которое я отправляю FormB, является следующим: :

[HttpPost] 
public ActionResult ActionBName (string idNumber, string fName, List<EquipmentModel> equipList) 
{ 
//do work to save to database  
} 

Теперь, когда пользователь отправляет FormA, мне необходимо эффективно отправить FormB. Сложная часть для меня - это список оборудования, которое является свойством модели, которое является списком другой модели.

Как это сделать? Я пробовал следующий JQuery:

$(function() { 
    $('#FormA').submit(function() {    
     $.post('@Url.Action("ActionBName", "ControllerName")', $("#FormB").serialize())    
    }); 
}); 

Это работает на моем рабочем столе в Safari и Chrome, но не работает на IPad.

У кого-нибудь есть идеи? Любая помощь приветствуется. Благодарю.

Answer 1

Поскольку пост AJAX является асинхронным, существует вероятность того, что между AJAX-сообщением FormB и подачей FormA существует условие гонки. и было бы (например, iPad), что FormA отправляется до FormB.

Попробуйте сделать их в последовательности, как это ...

$(function() { 
    var isFormBSubmitted = false; 

    $('#FormA').submit(function (e) { 
     if (!isFormBSubmitted) { 
      e.preventDefault(); // stop FormA from submitting 
      $.post('@Url.Action("ActionBName", "ControllerName")', $("#FormB").serialize()) 
       .done(function() { 
        isFormBSubmitted = true; 
        $('#FormA').submit(); // submit FormA 
       }); 
     }       
    }); 
});