Question

我目前正在使用jquery mobile和ASP.NET MVC 4为iPad构建一个移动网站。我在View上有两个表单 - 让我们称之为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。对我来说棘手的部分是Equipment列表，它是一个模型属性，是另一个模型的列表。

我该怎么做？我尝试过以下jquery：

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

这适用于Safari和Chrome中的桌面，但无法在iPad上使用。

有人有什么想法吗？任何帮助表示赞赏。感谢。

Answer 1

因为AJAX帖子是异步的，所以在FormB的AJAX帖子和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
               });
       }                         
    });
});

使用jquery </model>从视图提交包含输入和List <model>的表单

1 个答案: